Improve sidebar on mobile

eea · Apr 6, 2023 · 6607851 · 6607851
1 parent 667fd04
commit 6607851
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 24 deletions.
diff --git a/searchlib/components/Facets/SidebarFacetsList.jsx b/searchlib/components/Facets/SidebarFacetsList.jsx
@@ -1,6 +1,10 @@
 import React from 'react';
-import { Sidebar, Button } from 'semantic-ui-react';
-import { useSearchContext, useOutsideClick } from '@eeacms/search/lib/hocs';
+import { Sidebar, Button, Icon, Dimmer } from 'semantic-ui-react';
+import {
+  useSearchContext,
+  useOutsideClick,
+  useWindowDimensions,
+} from '@eeacms/search/lib/hocs';
 import FacetResolver from './FacetResolver';
 
 export default function SidebarFacetsList(props) {
@@ -13,6 +17,8 @@ export default function SidebarFacetsList(props) {
     // setIsLiveSearch,
   } = props;
   const nodeRef = React.useRef(null);
+  const { width } = useWindowDimensions();
+  const isSmallScreen = width < 768;
 
   useOutsideClick(nodeRef, onClose);
   const searchContext = useSearchContext();
@@ -37,31 +43,27 @@ export default function SidebarFacetsList(props) {
                 onClick={() => {
                   searchContext.resetFilters();
                 }}
-              />
-              {/* <h3>Filters</h3>
-                <Button
-                  basic
-                  className="clear-btn"
-                  content="clear all"
-                  onClick={() => {
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
                     searchContext.resetFilters();
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      searchContext.resetFilters();
-                    }
-                  }}
-                />
-              </div>
+                  }
+                }}
+              />
+
               <Button
                 basic
                 className="close-btn"
                 onClick={() => {
                   onClose(true);
                 }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    onClose(true);
+                  }
+                }}
               >
                 <Icon name="close" />
-              </Button> */}
+              </Button>
             </div>
             {facets.map((facetInfo, i) => (
               <FacetResolver
@@ -83,6 +85,9 @@ export default function SidebarFacetsList(props) {
           </div> */}
         </div>
       </Sidebar>
+      {isSmallScreen && (
+        <Dimmer active={open} verticalAlign="top" className="sidebar-dimmer" />
+      )}
     </div>
   );
 }
diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -75,11 +75,19 @@
       padding-bottom: 2em;
     }
 
+    .sidebar-dimmer {
+      position: fixed;
+    }
+
     .ui.right.sidebar {
       background-color: white;
       box-shadow: -4px 0px 4px rgba(0, 0, 0, 0.25);
     }
 
+    .visible.sidebar {
+      z-index: 1003;
+    }
+
     .sidebar-wrapper {
       display: flex;
       height: 100%;
@@ -90,6 +98,26 @@
         color: @darkCerulean !important;
       }
 
+      .ui.basic.button.close-btn {
+        padding: 0;
+        margin-right: 0;
+        margin-left: auto;
+
+        &:hover,
+        &:active,
+        &:focus {
+          border: none;
+          box-shadow: none;
+        }
+
+        .close {
+          margin: 0;
+          color: @darkCerulean !important;
+          font-size: 1.2em;
+          opacity: 1;
+        }
+      }
+
       .sidebar-header {
         display: flex;
         align-items: baseline;
@@ -98,6 +126,10 @@
         border-bottom: 1px solid @blue-grey-5;
         margin-bottom: 1em;
         gap: 1em;
+
+        @media only screen and (max-width: @largestMobileScreen) {
+          justify-content: space-between;
+        }
       }
 
       .sidebar-content {
@@ -404,3 +436,36 @@
   align-items: flex-start;
   justify-content: space-between;
 }
+
+@media only screen and (min-width: @largestMobileScreen) {
+  .ui.basic.button.close-btn {
+    display: none;
+  }
+
+  body.searchlib-page .sidebar-dimmer {
+    display: none !important;
+  }
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .dropdown-facets-list {
+    .visible.sidebar {
+      top: 100px;
+    }
+  }
+
+  body.has-toolbar-collapsed {
+    .dropdown-facets-list {
+      .visible.sidebar {
+        top: 20px;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .horizontal-dropdown-facets {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/src/SearchBlock/less/searchbox.less b/src/SearchBlock/less/searchbox.less
@@ -34,7 +34,7 @@
       }
 
       input {
-        width: calc(100% - 55px);
+        width: 100%;
         border: none;
         border-bottom: 2px solid @secondaryColor;
         color: @deepBlue;

diff --git a/src/SearchBlock/less/searchview.less b/src/SearchBlock/less/searchview.less
@@ -84,7 +84,6 @@ body.searchlib-page {
 
       .above-right {
         display: flex;
-        justify-content: flex-end;
         padding: 0.6em 0;
         gap: 1em;
       }
@@ -198,16 +197,17 @@ body.searchlib-page {
 
     &:before {
       position: absolute;
-      top: 6px;
-      width: 1.7rem;
+      top: 8px;
+      width: 1.5rem;
       height: 0.6rem !important;
       background: @sf-medium-gray2 !important;
       box-shadow: 0px 0px 0px 2px @sf-medium-gray2 !important;
     }
 
     &:after {
       position: absolute;
-      top: 6px;
+      top: 8px;
+      left: 0.08rem !important;
       width: 0.6rem !important;
       height: 0.6rem !important;
       background: white;
@@ -225,8 +225,17 @@ body.searchlib-page {
       }
 
       &:after {
-        left: 1.1rem !important;
+        left: 0.8rem !important;
       }
     }
   }
 }
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .above-results {
+    .above-right {
+      justify-content: flex-start;
+      padding: 0.6em 1em !important;
+    }
+  }
+}