Refs #139198 - Horizontal card - move image to right.

eea · Oct 11, 2021 · 04061bb · 04061bb
1 parent b165916
commit 04061bb
Showing 1 changed file with 93 additions and 66 deletions.
diff --git a/src/SearchBlock/styles.less b/src/SearchBlock/styles.less
@@ -393,97 +393,109 @@ div#page-document {
 
     div.search-result {
       overflow: auto;
+
+      &:hover {
+        div.controls {
+          button {
+            opacity: 1 !important;
+          }
+        }
+      }
+
       width: 100%;
-      padding-bottom: 10px;
-      margin-top: 10px;
+      padding-bottom: 5px;
+      margin-top: 5px;
       clear: both;
 
-      div.meta.col-full {
-        width: 100%;
-        margin-bottom: 0px;
-        font-size: 12px !important;
+      div.col-right {
+        max-width: 180px;
+        float: right;
+        text-align: center;
 
-        span.score {
-          padding: 0px 5px 0px 5px;
-          border: 1px solid @sf-light-gray2;
-          margin-right: 20px;
-          background: @sf-light-gray;
-          border-radius: 2px;
+        a,
+        img {
+          width: 180px;
         }
 
-        span.date {
-          margin-right: 20px;
+        img {
+          padding: 10px;
         }
 
-        span.tags {
-          margin-right: 10px;
-        }
+        div.controls {
+          display: flex;
+          justify-content: center;
 
-        i.icon {
-          margin-left: 3px;
-          background: @sf-light-gray;
-          line-height: 1em;
+          button {
+            margin: 3px;
+            font-size: 10px;
+            opacity: 0;
+          }
         }
       }
 
-      div.col-full {
-        width: 100%;
+      div.col-left {
+        width: calc(100% - 180px);
+        padding-top: 10px;
+        padding-left: 10px;
+        float: left;
 
-        div.col-left {
-          max-width: 140px;
-          float: left;
-          text-align: center;
+        div.meta {
+          margin-bottom: 5px;
+          font-size: 12px !important;
 
-          a,
-          img {
-            width: 140px;
+          span.score {
+            padding: 0px 5px 0px 5px;
+            border: 1px solid @sf-light-gray2;
+            margin-right: 20px;
+            background: @sf-light-gray;
+            border-radius: 2px;
           }
 
-          img {
-            position: relative;
-            top: 6px;
-            padding-top: 5px;
-            padding-right: 2px;
+          span.date {
+            margin-right: 20px;
           }
-        }
 
-        div.col-right {
-          width: calc(100% - 140px);
-          padding-top: 5px;
-          padding-left: 10px;
-          float: right;
-
-          h3 {
-            font-weight: 400;
+          span.tags {
+            margin-right: 10px;
           }
 
-          p {
-            font-size: 14px !important;
+          i.icon {
+            margin-left: 3px;
+            background: @sf-light-gray;
+            line-height: 1em;
           }
+        }
 
-          h3,
-          p {
-            margin: 0px 0px 10px 0px;
-          }
+        h3 {
+          font-weight: 400;
+        }
 
-          h3 div.label.new-item {
-            padding: 4px 5px 4px 4px;
-            background: @s-light-orange;
-            color: @s-dark-orange;
-            font-size: 70%;
-          }
+        p {
+          font-size: 14px !important;
+        }
 
-          h3 div.label.archived-item {
-            padding: 4px 5px 4px 4px;
-            background: @s-light-blue;
-            color: @s-dark-blue;
-            font-size: 70%;
-          }
+        h3,
+        p {
+          margin: 0px 0px 10px 0px;
+        }
 
-          p {
-            color: @s-dark-gray;
-            font-size: 12.8px;
-          }
+        h3 div.label.new-item {
+          padding: 4px 5px 4px 4px;
+          background: @s-light-orange;
+          color: @s-dark-orange;
+          font-size: 70%;
+        }
+
+        h3 div.label.archived-item {
+          padding: 4px 5px 4px 4px;
+          background: @s-light-blue;
+          color: @s-dark-blue;
+          font-size: 70%;
+        }
+
+        p {
+          color: @s-dark-gray;
+          font-size: 12.8px;
         }
       }
     }
@@ -661,6 +673,21 @@ div.ui.modal {
   }
 }
 
+@media only screen and (min-width: 600px) {
+  div.search-result {
+    div.col-left {
+      padding-right: 2em;
+    }
+
+    div.col-right {
+      img {
+        padding-right: 0px !important;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
 .answers-list {
   margin-top: 3em;