WIP responsiveness

eea · Sep 12, 2022 · fb2a51c · fb2a51c
1 parent 8b1bdab
commit fb2a51c
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 89 deletions.
diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -7,7 +7,7 @@
   .dropdown-facets-list {
     .dropdown-facet {
       display: inline-block;
-      margin: 0 0 1em 0;
+      cursor: pointer;
 
       .facet-title {
         position: relative !important;
@@ -66,10 +66,6 @@
           .histogram-facet {
             width: 350px;
           }
-
-          .ui.button {
-            margin-top: 1em;
-          }
         }
 
         .icon.chevron {
@@ -80,19 +76,6 @@
         }
       }
 
-      .sui-facet-search {
-        border: 0.5px solid #c4c4c4;
-        margin: 0.7em 0;
-        border-radius: 0;
-        font-size: 14px;
-      }
-
-      .facet-label {
-        color: @green-5;
-        font-size: 18px;
-        font-weight: 700;
-      }
-
       .clear-filters {
         padding: 0;
         margin: 0 !important;
@@ -177,95 +160,100 @@
       }
     }
 
-    .ui.card.term.active-term {
-      width: auto !important;
-      min-width: auto;
-      margin: 5px 1.5em 5px 0 !important;
+    .ui.button.sui-button {
+      padding: 0;
+      // margin-bottom: 1em;
+      color: @secondaryColor !important;
+      font-weight: 600;
 
-      .header,
-      span.count {
-        color: @secondaryColor;
-        font-weight: 700;
+      &:hover,
+      &:active,
+      &:focus {
+        border: none;
+        background: none !important;
+        box-shadow: none;
+        color: @secondaryColor !important;
       }
     }
+  }
+}
+
+.active-filters {
+  margin-top: 1.5em;
+
+  .ui.card.term.active-term {
+    width: auto !important;
+    min-width: auto;
+    margin: 5px 1.5em 5px 0 !important;
 
-    .facets-wrapper {
-      margin: 1.5em 0 0 0;
+    .header,
+    span.count {
+      color: @secondaryColor;
+      font-weight: 700;
     }
 
-    .ui.card.term {
-      min-width: 100px;
-      margin-top: 2em;
+    .card-header {
+      flex-direction: row;
+    }
+  }
 
-      &.disabled {
-        .header,
-        span.count {
-          color: #bfbfbf;
-        }
-      }
+  .ui.card.term {
+    min-width: 100px;
+    margin-top: 2em;
 
-      .clear-filters {
-        margin-left: 5px !important;
+    &.disabled {
+      .header,
+      span.count {
+        color: #bfbfbf;
       }
+    }
 
-      .header {
-        border: none;
-        color: @deepBlue;
-        font-size: 14px;
-        font-weight: 400;
-      }
+    .clear-filters {
+      margin-left: 5px !important;
+    }
 
-      .content {
-        flex-grow: initial;
-        padding: 0;
-        // padding-bottom: 0.5em;
-      }
+    .header {
+      border: none;
+      font-size: 14px !important;
+    }
 
-      &.active {
-        .header,
-        span.count {
-          color: @darkCerulean;
-          font-weight: 700;
-        }
+    .content {
+      flex-grow: initial;
+      padding: 0;
+    }
 
-        &:hover {
-          background: transparent !important;
-        }
+    &.active {
+      .header,
+      span.count {
+        color: @darkCerulean;
+        font-weight: 700;
       }
 
       &:hover {
-        border: none;
         background: transparent !important;
-        box-shadow: none;
-      }
-
-      .title {
-        margin-right: 5px;
       }
+    }
 
-      .count {
-        color: @deepBlue;
-        font-size: 16px;
-        font-weight: 400;
-      }
+    &:hover {
+      border: none;
+      background: transparent !important;
+      box-shadow: none;
     }
 
-    .ui.button.sui-button {
-      padding: 0;
-      // margin-bottom: 1em;
-      color: @secondaryColor !important;
-      font-weight: 600;
+    .title {
+      margin-right: 5px;
+    }
 
-      &:hover,
-      &:active,
-      &:focus {
-        border: none;
-        background: none !important;
-        box-shadow: none;
-        color: @secondaryColor !important;
-      }
+    .count {
+      color: @deepBlue;
+      font-size: 16px;
+      font-weight: 400;
     }
   }
+
+  .ui.button.clear-btn {
+    margin-top: 1em;
+  }
 }
 
 .dropdown-facet {
@@ -274,12 +262,34 @@
   }
 }
 
+.dropdown-facet-modal {
+  .sui-multi-checkbox-facet__option-input-wrapper {
+    max-width: none;
+  }
+}
+
 .dropdown-facet,
-.sidebar-content {
+.sidebar-content,
+.dropdown-facet-modal {
+  color: @deepBlue;
+
+  .facet-label {
+    color: @green-5;
+    font-size: 18px;
+    font-weight: 700;
+  }
+
   .sui-facet-search__text-input {
     font-size: 14px;
   }
 
+  .sui-facet-search {
+    border: 0.5px solid #c4c4c4;
+    margin: 0.7em 0;
+    border-radius: 0;
+    font-size: 14px;
+  }
+
   .sui-multi-checkbox-facet__option-label {
     justify-content: initial;
     margin: 0.5em 0;
@@ -297,7 +307,6 @@
 
   .sui-multi-checkbox-facet__option-input-wrapper {
     position: relative;
-    // max-width: none;
     flex: none;
 
     input.sui-multi-checkbox-facet__checkbox {

diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less
@@ -218,7 +218,7 @@ a.ui.mini.circular.compact.icon.right.floated.button.metaButton {
 }
 
 .result-info-title {
-  margin-right: 3px;
+  margin-right: 5px;
   color: @deepBlue;
   font-size: 14px;
   font-weight: 700;
@@ -393,6 +393,10 @@ div#page-document div.searchapp div.cards div.search-result {
 
       @media only screen and (max-width: @largestMobileScreen) {
         flex-direction: column;
+
+        .result-info {
+          align-items: flex-start;
+        }
       }
     }
 

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -108,10 +108,7 @@ div#page-document {
     }
 
     .above-results {
-      display: grid;
       margin-bottom: 2.5em;
-      column-gap: 20px;
-      grid-template-columns: auto auto;
 
       .above-right {
         display: flex;
@@ -248,6 +245,18 @@ div#page-document {
           }
         }
       }
+
+      @media only screen and (min-width: @largestTabletScreen) {
+        display: grid;
+        margin-bottom: 2.5em;
+        column-gap: 20px;
+        grid-template-columns: auto auto;
+      }
+
+      @media only screen and (max-width: @largestTabletScreen) {
+        display: flex;
+        flex-direction: column-reverse;
+      }
     }
 
     .search-body-footer {