DRY link-box css component definitions/options

internetarchive · Apr 28, 2024 · 1860c25 · 1860c25
1 parent 21eb1ae
commit 1860c25
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 18 deletions.
diff --git a/openlibrary/templates/publishers/view.html b/openlibrary/templates/publishers/view.html
@@ -60,11 +60,9 @@ <h2>$_("Common Subjects")
 	        <span class="title"><em>$_("None found.")</em></span>
 
     $for s, limit in subject_list:
-        <div class="contentQuarter link-box">
+        <div class="contentQuarter link-box link-box--with-header">
             <h6>$s</h6>
-			<div class="subjects" id="subjects-$s">
-				$:renderSubjects(page[s][:limit])
-			</div>
+            $:renderSubjects(page[s][:limit])
         </div>
         $if s != 'times':
             <div class="contentSpacer"></div>

diff --git a/openlibrary/templates/subjects.html b/openlibrary/templates/subjects.html
@@ -91,11 +91,9 @@ <h2>$_("Related...")
             <span class="title"><em>$_("None found.")</em></span>
 
     $for category, label, limit in subject_list:
-        <div class="contentQuarter link-box">
+        <div class="contentQuarter link-box link-box--with-header">
           <h6 class="black collapse uppercase">$label</h6>
-          <div class="subjects" id="subjects-$category">
-            $:renderSubjects(page[category][:limit])
-          </div>
+          $:renderSubjects(page[category][:limit])
         </div>
 
     <div class="clearfix"></div>

diff --git a/openlibrary/templates/type/author/view.html b/openlibrary/templates/type/author/view.html
@@ -156,7 +156,7 @@ <h2 class="collapse">
 
         $def render_subjects(label, subjects, prefix):
             $if subjects:
-                <div class="section">
+                <div class="section link-box link-box--with-header">
                     <h6 class="collapse black uppercase">$label</h6>
                     $for _, subject, count in subjects:
                         <a itemprop="knowsAbout" href="/subjects/$prefix$subject.lower().replace(' ', '_')">$subject</a>$cond(not loop.last, ",", "")

diff --git a/static/css/components/link-box.less b/static/css/components/link-box.less
@@ -2,10 +2,6 @@
  * Link Box
  * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#linkbox
  */
-.contentQuarter div, .link-box div {
-  padding-right: 19px;
-}
-
 .link-box {
   font-size: @font-size-body-medium;
   white-space: normal;
@@ -19,4 +15,8 @@
     display: inline;
     font-size: @font-size-label-medium;
   }
+
+  &.link-box--with-header h6 {
+    display: block;
+  }
 }
diff --git a/static/css/layout/v2.less b/static/css/layout/v2.less
@@ -25,10 +25,9 @@ body.full-width #test-body-mobile {
 }
 
 @media all and ( min-width: @width-breakpoint-desktop ) {
-  .content {
-    &Quarter {
-      float: left;
-      width: 240px;
-    }
+  .contentQuarter {
+    float: left;
+    width: 25%;
+    padding-right: 19px;
   }
 }