Merge pull request #1925 from jdlrobson/MergeComponent

Component: Merge form
internetarchive · Mar 2, 2019 · cf19feb · cf19feb
2 parents 1de45a9 + 1db27c7
commit cf19feb
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 87 deletions.
diff --git a/static/css/components/merge-form.less b/static/css/components/merge-form.less
@@ -0,0 +1,101 @@
+/**
+ * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#merge-form
+ */
+// Consider using .merge-form OR #mergeForm for a common parent selector
+// openlibrary/templates/merge/editions.html
+div.merge {
+    font-family: @lucida_sans_serif-2;
+    width: 100%;
+    float: left;
+    margin-bottom: 15px;
+    .entry {
+      width: 100%;
+      padding: 10px 0;
+      float: left;
+      clear: right;
+      border-bottom: 1px solid @lighter-grey;
+    }
+    .header {
+      width: 100%;
+      padding: 0 !important;
+      float: left;
+      clear: right;
+      border-bottom: 1px solid @lighter-grey;
+      div {
+        padding: 5px;
+      }
+    }
+    .master {
+      background-color: @light-yellow!important;
+    }
+    .data {
+      padding: 0 5px;
+    }
+    .input {
+      width: 37px;
+      float: left;
+      text-align: center;
+      padding: 3px 5px 0;
+    }
+    .record {
+      ul {
+        margin-top: 5px;
+        margin-bottom: 0 !important;
+      }
+      li {
+        color: @grey!important;
+        font-size: .75em;
+      }
+      label {
+        display: block;
+      }
+    }
+    .metaDate {
+      color: @brown;
+      font-size: .8125em;
+      padding-left: 10px;
+    }
+    .metaSubject {
+      color: @grey;
+      font-size: .8125em;
+      display: block;
+    }
+
+    .name {
+        font-weight: 700;
+        color: @black;
+
+        /* stylelint-disable selector-max-specificity */
+        a:link,
+        a:visited {
+          color: @black;
+          text-decoration: none;
+        }
+        a:hover,
+        a:active {
+          color: @link-blue;
+          text-decoration: underline;
+        }
+        /* stylelint-enable selector-max-specificity */
+    }
+    .count {
+      font-size: .8125em;
+      text-align: right;
+    }
+  }
+
+@media all and ( min-width: @width-breakpoint-desktop ) {
+    div.merge {
+        .record {
+            float: left;
+            width: 710px;
+        }
+        label {
+            width: 710px;
+        }
+        .count {
+          width: 86px;
+          float: left;
+        }
+    }
+}
diff --git a/static/css/legacy.less b/static/css/legacy.less
@@ -429,6 +429,7 @@ span {
     color: @brown;
     padding: 5px 5px 0;
   }
+  // span.merge appears in openlibrary/templates/work_search.html
   &.merge {
     padding: 2px 0;
   }
@@ -1963,94 +1964,15 @@ div.addfield {
 @import (less) "components/chart.less";
 
 /* MERGING */
-// openlibrary/templates/merge/editions.html
-div.merge {
-  font-family: @lucida_sans_serif-2;
-  width: 100%;
-  float: left;
-  margin-bottom: 15px;
-  &This {
-    float: right;
-    margin: 20px 20px 0 30px;
-    padding-left: 47px;
-    background: url(/images/icons/icon_merge.png) no-repeat 0 0;
-  }
-  div.entry {
-    width: 100%;
-    padding: 10px 0;
-    float: left;
-    clear: right;
-    border-bottom: 1px solid @lighter-grey;
-  }
-  div.header {
-    width: 100%;
-    padding: 0 !important;
-    float: left;
-    clear: right;
-    border-bottom: 1px solid @lighter-grey;
-    div {
-      padding: 5px;
-    }
-  }
-  div.master {
-    background-color: @light-yellow!important;
-  }
-  div.data {
-    padding: 0 5px;
-  }
-  div.input {
-    width: 37px;
-    float: left;
-    text-align: center;
-    padding: 3px 5px 0;
-  }
-  div.record {
-    float: left;
-    width: 710px;
-    ul {
-      margin-top: 5px;
-      margin-bottom: 0 !important;
-      li {
-        color: @grey!important;
-        font-size: .75em;
-      }
-    }
-    .name {
-      font-weight: 700;
-      color: @black;
-      a:link,
-      a:visited {
-        color: @black;
-        text-decoration: none;
-      }
-      a:hover,
-      a:active {
-        color: @link-blue;
-        text-decoration: underline;
-      }
-    }
-    label {
-      display: block;
-      width: 710px;
-    }
-    .metaDate {
-      color: @brown;
-      font-size: .8125em;
-      padding-left: 10px;
-    }
-    .metaSubject {
-      color: @grey;
-      font-size: .8125em;
-      display: block;
-    }
-  }
-  div.count {
-    width: 86px;
-    float: left;
-    font-size: .8125em;
-    text-align: right;
-  }
+// Merge button
+//openlibrary/templates/search/authors.html
+div.mergeThis {
+  float: right;
+  margin: 20px 20px 0 30px;
+  padding-left: 47px;
+  background: url(/images/icons/icon_merge.png) no-repeat 0 0;
 }
+@import (less) "components/merge-form.less";
 
 // openlibrary/templates/merge/editions2.html
 // openlibrary/templates/merge/history.html