Update datahub result's page based on new figma design

eea · Jul 8, 2022 · 394f364 · 394f364
1 parent 1df511a
commit 394f364
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 118 deletions.
diff --git a/src/SearchBlock/less/datahub.less b/src/SearchBlock/less/datahub.less
@@ -0,0 +1,60 @@
+.searchlib-block {
+  .searchapp-datahub {
+    /**
+    * Search box
+    */
+    .sui-search-box .search-input .terms-box {
+      border-color: @blue-5;
+    }
+
+    /**
+    * Result item
+    */
+    .search-result {
+      padding-bottom: 1em !important;
+      border-bottom: 1px solid #bcbec0;
+      margin-bottom: 1em !important;
+
+      h3 {
+        margin-top: 1rem;
+      }
+    }
+
+    .result-info {
+      margin-top: 1em;
+      margin-right: 4em;
+      color: #808285;
+      font-size: 14px;
+      font-weight: 400;
+
+      .result-info-title {
+        color: @deepBlue;
+        font-weight: 700;
+      }
+    }
+
+    .result-bottom {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      @media only screen and (max-width: @largestMobileScreen) {
+        flex-direction: column;
+      }
+    }
+
+    /**
+    * Tabs
+    */
+    .ui.secondary.pointing.content-section-tabs.menu {
+      a.item {
+        color: @blue-grey-5;
+
+        &.active {
+          border-color: @blue-5;
+          color: @blue-5;
+        }
+      }
+    }
+  }
+}
diff --git a/src/SearchBlock/less/facets.less b/src/SearchBlock/less/facets.less
@@ -56,69 +56,6 @@ div#page-document .searchlib-block {
     }
   }
 
-  .content-section-tabs.menu {
-    margin-bottom: 1em;
-    overflow-x: auto;
-
-    .item.dropdown {
-      padding: 0px 10px 0px 10px;
-      border: none;
-      border-bottom: 4px solid white;
-      background: white;
-      color: @sf-dark-gray;
-      font-size: 14px;
-      font-weight: 400 !important;
-
-      &:before {
-        display: none;
-      }
-
-      div.menu {
-        margin-top: 4px;
-      }
-
-      i.icon:first-of-type {
-        display: none;
-      }
-
-      span.title {
-        margin-right: 5px;
-        color: @sf-dark-gray;
-      }
-
-      span.count {
-        color: @sf-medium-gray2;
-        font-size: 10px;
-        font-weight: 400;
-      }
-    }
-
-    a.item {
-      color: @deepBlue;
-      font-size: 18px;
-
-      &:hover {
-        background: white;
-      }
-
-      &:before {
-        display: none;
-      }
-
-      &.active {
-        color: @secondaryColor;
-      }
-
-      span.title {
-        margin-right: 5px;
-      }
-    }
-
-    &::-webkit-scrollbar {
-      height: 0.3rem !important;
-    }
-  }
-
   .secondary-facets {
     display: flex;
     flex-wrap: wrap;

diff --git a/src/SearchBlock/less/searchinput.less b/src/SearchBlock/less/searchinput.less
@@ -11,7 +11,7 @@
       display: flex;
       width: 100%;
       border: none;
-      border-bottom: 1.5px solid @secondaryColor;
+      border-bottom: 2px solid @secondaryColor;
 
       .terms-box-left {
         display: flex;

diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less
@@ -6,37 +6,6 @@
   padding-right: 0.6em;
 }
 
-.listing-view-item.header {
-  cursor: pointer;
-}
-
-.listing-view-details {
-  .listing-view-details-section {
-    padding: 1em 0em;
-
-    .details-field {
-      display: flex;
-      border-bottom: 1px solid #ccc;
-      font-size: medium;
-
-      .details-field-label {
-        width: 25%;
-        padding: 0.3em 1em 0.3em 0.3em;
-        border-right: 1px solid #ccc;
-        background: #ddd;
-        font-weight: bold;
-      }
-
-      .details-field-value {
-        width: 75%;
-        padding: 0.3em 0.3em 0.3em 1em;
-        background: #f9f9f9;
-        white-space: pre-wrap;
-      }
-    }
-  }
-}
-
 .searchlib-block {
   .ui.cards {
     .ui.card.card-item {
@@ -220,6 +189,37 @@ div#page-document .horizontal-card-item .content.details .header a {
   border-radius: 50%;
 }
 
+.listing-view-item.header {
+  cursor: pointer;
+}
+
+.listing-view-details {
+  .listing-view-details-section {
+    padding: 1em 0em;
+
+    .details-field {
+      display: flex;
+      border-bottom: 1px solid #ccc;
+      font-size: medium;
+
+      .details-field-label {
+        width: 25%;
+        padding: 0.3em 1em 0.3em 0.3em;
+        border-right: 1px solid #ccc;
+        background: #ddd;
+        font-weight: bold;
+      }
+
+      .details-field-value {
+        width: 75%;
+        padding: 0.3em 0.3em 0.3em 1em;
+        background: #f9f9f9;
+        white-space: pre-wrap;
+      }
+    }
+  }
+}
+
 a.ui.mini.circular.compact.icon.right.floated.button.metaButton {
   padding: 3px;
 }
@@ -232,19 +232,6 @@ div#page-document div.searchapp div.cards div.search-result {
   margin-bottom: 2em;
   clear: both;
 
-  // div.menu.mlt {
-  //   top: -100%;
-  //   left: -5px;
-  //
-  //   div.item {
-  //     padding: 5px !important;
-  //     background: @secondaryColor;
-  //     color: white;
-  //     font-size: 10px;
-  //     font-weight: 400;
-  //   }
-  // }
-
   &:hover {
     div.controls {
       button {
@@ -279,7 +266,6 @@ div#page-document div.searchapp div.cards div.search-result {
     color: @secondaryColor;
     font-size: 16px;
     font-weight: 700;
-    // gap: 1.5em;
 
     span {
       margin-right: 20px;

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -208,7 +208,6 @@ div#page-document {
       .sorting {
         width: auto;
         margin-bottom: 0.5em;
-        // margin-left: 10px;
         font-size: 16px;
 
         .inline.dropdown > span {
@@ -260,14 +259,14 @@ div#page-document {
         max-width: @search-result-max-width;
       }
 
-      &.fullwidth {
-        div.cards {
-          display: grid;
-          justify-content: space-between;
-          padding-right: 2px;
-          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        }
-      }
+      // &.fullwidth {
+      //   div.cards {
+      //     display: grid;
+      //     justify-content: space-between;
+      //     padding-right: 2px;
+      //     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      //   }
+      // }
     }
 
     .top-filter-layout {
@@ -278,6 +277,71 @@ div#page-document {
   }
 }
 
+.searchlib-block {
+  .ui.secondary.pointing.content-section-tabs.menu {
+    margin-bottom: 1em;
+    overflow-x: auto;
+
+    .item.dropdown {
+      padding: 0px 10px 0px 10px;
+      border: none;
+      border-bottom: 4px solid white;
+      background: white;
+      color: @sf-dark-gray;
+      font-size: 14px;
+      font-weight: 400 !important;
+
+      &:before {
+        display: none;
+      }
+
+      div.menu {
+        margin-top: 4px;
+      }
+
+      i.icon:first-of-type {
+        display: none;
+      }
+
+      span.title {
+        margin-right: 5px;
+        color: @sf-dark-gray;
+      }
+
+      span.count {
+        color: @sf-medium-gray2;
+        font-size: 10px;
+        font-weight: 400;
+      }
+    }
+
+    a.item {
+      color: @deepBlue;
+      font-size: 18px;
+
+      &:hover {
+        background: white;
+      }
+
+      &:before {
+        display: none;
+      }
+
+      &.active {
+        color: @secondaryColor;
+      }
+
+      span.title {
+        margin-right: 5px;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      height: 0.3rem !important;
+    }
+  }
+}
+
 body.searchlib-page {
   overflow-x: hidden !important;
 

diff --git a/src/SearchBlock/less/styles.less b/src/SearchBlock/less/styles.less
@@ -13,3 +13,4 @@
 @import '~./searchview.less';
 @import '~./paging.less';
 @import '~./landingpage.less';
+@import '~./datahub.less';