BorrowTable id converted to class (#4582)

Using IDs for styling means the component is not reusable. Using a class means we can have multiple borrow tables on the same page without fear of IDs clashing.
internetarchive · Feb 14, 2021 · ab24038 · ab24038
1 parent 55a6a39
commit ab24038
Show file tree

Hide file tree

Showing 9 changed files with 256 additions and 252 deletions.
diff --git a/openlibrary/templates/account/borrow.html b/openlibrary/templates/account/borrow.html
@@ -70,7 +70,7 @@ <h1>$_("Books You've Checked Out")</h1>
     <div><em>$_("You've not checked out any books at this moment.")</em></div>
 $else:
   $# Have current loans
-  <div id="borrowTable" class="borrow collapse">
+  <div class="borrow borrow-table collapse">
     <table>
         <thead>
             <tr>
@@ -164,7 +164,7 @@ <h1>$_("Books You're Waiting For")</h1>
         });
     });
     </script>
-    <div id="borrowTable" class="borrow collapse waitinglist">
+    <div class="borrow borrow-table collapse waitinglist">
     <table>
         <thead>
             <tr>

diff --git a/openlibrary/templates/admin/loans_table.html b/openlibrary/templates/admin/loans_table.html
@@ -15,7 +15,7 @@
 $if not loans:
     <em>No current loans.</em>
 $else:
-    <div id="borrowTable" class="borrow collapse">
+    <div class="borrow borrow-table collapse">
     <table>
         <thead>
             <tr>

diff --git a/openlibrary/templates/admin/people/view.html b/openlibrary/templates/admin/people/view.html
@@ -59,7 +59,7 @@
     display:inline;
 }
 
-#borrowTable .who {
+.borrow-table .who {
     display: none;
 }
 

diff --git a/openlibrary/templates/admin/waitinglists.html b/openlibrary/templates/admin/waitinglists.html
@@ -16,7 +16,7 @@ <h2>Recently available waiting loans</h2>
 $if not loans:
     <em>None found.</em>
 $else:
-    <div id="borrowTable" class="borrow collapse">
+    <div class="borrow borrow-table collapse">
     <table>
         <thead>
             <tr>

diff --git a/openlibrary/templates/borrow_admin.html b/openlibrary/templates/borrow_admin.html
@@ -89,7 +89,7 @@ <h3>Current Loans</h3>
         $ borrow_status = get_borrow_status(page.ocaid)
         $if current_loans:
             $ loan = current_loans[0]
-            <div id="borrowTable" class="borrow collapse current-loan">
+            <div class="borrow borrow-table collapse current-loan">
             <table>
                 <thead>
                     <tr>
@@ -153,7 +153,7 @@ <h3>Current Loans</h3>
     <div class="section">
         <h3>Waiting List</h3>
         $if waitinglist:
-            <div id="borrowTable" class="borrow collapse waitinglist">
+            <div class="borrow borrow-table collapse waitinglist">
             <table>
                 <thead>
                     <tr>

diff --git a/package-lock.json b/package-lock.json
diff --git a/static/css/components/borrowTable.less b/static/css/components/borrowTable.less
@@ -1,5 +1,5 @@
 /**
- * BorrowTable
+ * borrow-table
  * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#borrowtable
  * Used in the following templates:
  * - openlibrary/templates/account/borrow.html
@@ -10,7 +10,7 @@
  */
 
 // stylelint-disable selector-max-specificity
-#borrowTable {
+.borrow-table {
   .LoanReadForm {
     margin: 10px 0;
   }

diff --git a/static/css/legacy-borrowTable-adminUser.less b/static/css/legacy-borrowTable-adminUser.less
@@ -6,7 +6,7 @@
 @import (less) "less/font-families.less";
 
 /* stylelint-disable selector-max-specificity */
-#borrowTable {
+.borrow-table {
   margin: 30px 0 25px;
   table {
     width: 100%;

diff --git a/static/css/page-plain.less b/static/css/page-plain.less
@@ -12,21 +12,18 @@
 @import (less) "less/mixins.less";
 @import (less) "less/font-families.less";
 
-/* stylelint-disable selector-max-specificity */
 div#header,
 footer,
 div#bottom,
 .siteSearch {
   display: none;
 }
-/* stylelint-enable selector-max-specificity */
-/* stylelint-disable selector-max-specificity */
+
 #contentBody,
 #contentHead {
   padding: 0 134px;
   margin: 0;
 }
-/* stylelint-enable selector-max-specificity */
 div.contentOnethird {
   width: 210px;
 }
@@ -38,10 +35,49 @@ div.nav {
   margin: 50px 0;
   font-size: 14px;
 }
+// Specific to borrowTable component
+
+.borrow-table {
+  margin: 60px 0 25px;
+
+  p {
+    font-size: .875em;
+    margin: 0;
+    padding: 0;
+  }
+
+  table {
+    width: 690px;
+    margin-bottom: 20px;
+
+    th {
+      border-bottom: 1px solid @beige-three;
+      vertical-align: bottom;
+      padding-bottom: 10px;
+
+      &.expires {
+        font-family: @lucida_sans_serif-1;
+        color: @brown;
+        font-weight: 600;
+        font-size: .6875em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+
+      &.titles {
+        font-family: @lucida_sans_serif-1;
+        color: @teal;
+        font-weight: 600;
+        font-size: 1.125em;
+      }
+    }
+  }
+}
 div.message {
   padding: 25px 25px 25px 55px;
   margin-bottom: 50px;
-  background: @light-yellow url(/images/icons/icon_lock-msg.png) no-repeat 15px 50%;
+  background: @light-yellow url(/images/icons/icon_lock-msg.png) no-repeat 15px
+    50%;
   h2 {
     font-weight: normal;
     font-size: 18px;
@@ -61,7 +97,7 @@ ul.link {
     font-size: 1.125em;
   }
 }
-/* stylelint-disable selector-max-specificity */
+
 #faq {
   h4 {
     font-size: .75em;
@@ -74,12 +110,12 @@ ul.link {
     color: @dark-grey;
   }
 }
-/* stylelint-enable selector-max-specificity */
 p.help {
   font-size: 14px;
 }
 div.alert {
-  background: @light-yellow url(/images/icons/icon_alert-gold.png) no-repeat 15px 50% !important;
+  background: @light-yellow url(/images/icons/icon_alert-gold.png) no-repeat
+    15px 50% !important;
   margin-bottom: 10px;
   margin-top: 20px;
 }
@@ -113,11 +149,10 @@ div.navBorrow {
 .panel h3 {
   font-size: 1.875em;
 }
-/* stylelint-disable selector-max-specificity */
+
 #borrowThis {
   margin-bottom: 20px;
 }
-/* stylelint-enable selector-max-specificity */
 .borrow {
   span.book {
     font-size: 1em;
@@ -143,54 +178,14 @@ div.navBorrow {
     border-bottom: none;
   }
 }
-// Specific to borrowTable component
-/* stylelint-disable selector-max-specificity */
-#borrowTable {
-  margin: 60px 0 25px;
-
-  p {
-    font-size: .875em;
-    margin: 0;
-    padding: 0;
-  }
-
-  table {
-    width: 690px;
-    margin-bottom: 20px;
-
-    th {
-      border-bottom: 1px solid @beige-three;
-      vertical-align: bottom;
-      padding-bottom: 10px;
 
-      &.expires {
-        font-family: @lucida_sans_serif-1;
-        color: @brown;
-        font-weight: 600;
-        font-size: .6875em;
-        text-transform: uppercase;
-        white-space: nowrap;
-      }
-
-      &.titles {
-        font-family: @lucida_sans_serif-1;
-        color: @teal;
-        font-weight: 600;
-        font-size: 1.125em;
-      }
-    }
-  }
-}
-/* stylelint-enable selector-max-specificity */
-/* stylelint-disable selector-max-specificity */
 div#listsWork {
   p {
     font-size: .75em;
     padding-left: 0;
     margin-bottom: 5px !important;
   }
 }
-/* stylelint-enable selector-max-specificity */
 
 // Import all common components
 @import (less) "legacy.less";