Improve filters layout

eea · Jul 18, 2022 · f090063 · f090063
1 parent 9f15740
commit f090063
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -1,8 +1,5 @@
 .searchlib-block {
   .dropdown-facets-list {
-    display: flex;
-    margin-bottom: 3em;
-
     .dropdown-facet {
       .ui.dropdown {
         .divider {
@@ -20,8 +17,10 @@
     }
 
     .horizontal-dropdown-facets {
-      display: flex;
-      gap: 1.5em;
+      .dropdown-facet {
+        display: inline-block;
+        margin: 0 1.5em 1em 0;
+      }
     }
 
     .ui.right.sidebar {
@@ -63,7 +62,7 @@
 
     .ui.button.sui-button {
       padding: 0;
-      margin-left: 1.5em;
+      margin: 0;
       color: #007b6c !important;
       font-weight: 600;
 

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -108,11 +108,14 @@ div#page-document {
     }
 
     .above-results {
-      display: flex;
-      flex-wrap: wrap;
-      align-content: baseline;
-      justify-content: right;
-      margin-bottom: 0.5em;
+      display: grid;
+      margin-bottom: 2em;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+
+      .above-right {
+        display: flex;
+      }
 
       .ui.dropdown {
         .icon.chevron {
@@ -150,7 +153,7 @@ div#page-document {
           }
         }
 
-        div.checked {
+        .checked {
           label {
             color: @secondaryColor !important;
             font-weight: 600;
@@ -169,17 +172,16 @@ div#page-document {
 
       .view-selector {
         width: auto !important;
-        // padding-bottom: 1em;
         padding-left: 0px !important;
         margin-left: 10px;
         font-size: 16px;
 
-        div.text {
+        .text {
           margin-right: 2px;
         }
 
         .ui.dropdown {
-          div.text {
+          .text {
             color: @sf-dark-gray;
             font-weight: 400;
           }
@@ -198,7 +200,7 @@ div#page-document {
           }
         }
 
-        div.buttons {
+        .buttons {
           button {
             background: @midGray;
             font-size: 12px;
@@ -216,7 +218,6 @@ div#page-document {
 
       .sorting {
         width: auto;
-        // margin-bottom: 0.5em;
         font-size: 16px;
 
         .inline.dropdown > span {