From 8249ff139703ffbda4a56dff328c018cc2857dbc Mon Sep 17 00:00:00 2001
From: Sebastian Abromeit <38963270+Abrom8@users.noreply.github.com>
Date: Tue, 28 Jun 2022 14:55:29 +0200
Subject: [PATCH] update ui components for mobile (#1495)

* fix mobile layout for filter buttons

* fix tabs component mobile view

* fix zoom in on input focus on mobile devices

* reduce searchbar font-size
---
 .../@shared/atoms/Tabs/index.module.css       |  21 ++-
 src/components/@shared/atoms/Tabs/index.tsx   |  48 +++----
 src/components/Header/SearchBar.module.css    |   1 +
 src/components/Search/Filters.module.css      |  15 ++-
 src/components/Search/Filters.tsx             | 123 +++++++++---------
 src/components/Search/index.module.css        |   2 +-
 src/components/Search/sort.module.css         |   2 +-
 7 files changed, 119 insertions(+), 93 deletions(-)

diff --git a/src/components/@shared/atoms/Tabs/index.module.css b/src/components/@shared/atoms/Tabs/index.module.css
index 658eb67e1..3339cd988 100644
--- a/src/components/@shared/atoms/Tabs/index.module.css
+++ b/src/components/@shared/atoms/Tabs/index.module.css
@@ -1,14 +1,20 @@
+.tabListContainer {
+  margin-left: auto;
+  margin-right: auto;
+  border-bottom: 1px solid var(--border-color);
+  max-width: 100%;
+}
+
 .tabList {
   text-align: center;
-  border-bottom: 1px solid var(--border-color);
   padding: calc(var(--spacer) / 2);
   display: flex;
-  justify-content: center;
+  overflow-x: auto;
 }
 
 .tab {
   display: inline-block;
-  padding: calc(var(--spacer) / 8) var(--spacer);
+  padding: calc(var(--spacer) / 8) calc(var(--spacer) / 2);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-small);
   text-transform: uppercase;
@@ -16,7 +22,6 @@
   background-color: var(--background-body);
   border: 1px solid var(--border-color);
   margin-right: -1px;
-  min-width: 90px;
 }
 
 .tab,
@@ -27,11 +32,13 @@
 .tab:first-child {
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
+  margin-left: auto;
 }
 
 .tab:last-child {
   border-top-right-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
+  margin-right: auto;
 }
 
 .tab[aria-selected='true'] {
@@ -58,6 +65,12 @@
   }
 }
 
+@media (min-width: 60rem) {
+  .tab {
+    padding: calc(var(--spacer) / 8) var(--spacer);
+  }
+}
+
 .radio {
   composes: radio from '../../FormInput/InputRadio.module.css';
 }
diff --git a/src/components/@shared/atoms/Tabs/index.tsx b/src/components/@shared/atoms/Tabs/index.tsx
index 9514ae9cd..058bc5f0a 100644
--- a/src/components/@shared/atoms/Tabs/index.tsx
+++ b/src/components/@shared/atoms/Tabs/index.tsx
@@ -26,28 +26,32 @@ export default function Tabs({
 }: TabsProps): ReactElement {
   return (
     <ReactTabs className={`${className || ''}`} defaultIndex={defaultIndex}>
-      <TabList className={styles.tabList}>
-        {items.map((item, index) => (
-          <Tab
-            className={styles.tab}
-            key={index}
-            onClick={handleTabChange ? () => handleTabChange(item.title) : null}
-            disabled={item.disabled}
-          >
-            {showRadio ? (
-              <InputRadio
-                name={item.title}
-                type="radio"
-                checked={index === defaultIndex}
-                options={[item.title]}
-                readOnly
-              />
-            ) : (
-              item.title
-            )}
-          </Tab>
-        ))}
-      </TabList>
+      <div className={styles.tabListContainer}>
+        <TabList className={styles.tabList}>
+          {items.map((item, index) => (
+            <Tab
+              className={styles.tab}
+              key={index}
+              onClick={
+                handleTabChange ? () => handleTabChange(item.title) : null
+              }
+              disabled={item.disabled}
+            >
+              {showRadio ? (
+                <InputRadio
+                  name={item.title}
+                  type="radio"
+                  checked={index === defaultIndex}
+                  options={[item.title]}
+                  readOnly
+                />
+              ) : (
+                item.title
+              )}
+            </Tab>
+          ))}
+        </TabList>
+      </div>
       <div className={styles.tabContent}>
         {items.map((item, index) => (
           <TabPanel key={index}>{item.content}</TabPanel>
diff --git a/src/components/Header/SearchBar.module.css b/src/components/Header/SearchBar.module.css
index cbd81c652..571b6a641 100644
--- a/src/components/Header/SearchBar.module.css
+++ b/src/components/Header/SearchBar.module.css
@@ -26,6 +26,7 @@
 }
 
 .input {
+  font-size: 16px; /* prevent zoom in on input focus on mobile devices  */
   background-color: transparent;
   height: 36px;
   margin: 0;
diff --git a/src/components/Search/Filters.module.css b/src/components/Search/Filters.module.css
index 18b4ee0fd..70359b151 100644
--- a/src/components/Search/Filters.module.css
+++ b/src/components/Search/Filters.module.css
@@ -1,16 +1,14 @@
 .filterList,
 div.filterList {
   white-space: normal;
+  margin-top: 0;
   margin-bottom: 0;
   display: flex;
-  flex-direction: row;
+  gap: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
+  flex-direction: column;
   align-items: baseline;
 }
 
-.separator {
-  width: calc(var(--spacer) / 2);
-}
-
 .filter {
   display: inline-block;
 }
@@ -65,3 +63,10 @@ button.filter,
 .hideClear {
   display: none !important;
 }
+
+@media screen and (min-width: 35rem) {
+  .filterList,
+  div.filterList {
+    flex-direction: row;
+  }
+}
diff --git a/src/components/Search/Filters.tsx b/src/components/Search/Filters.tsx
index c5f2f372f..52c806c68 100644
--- a/src/components/Search/Filters.tsx
+++ b/src/components/Search/Filters.tsx
@@ -137,66 +137,69 @@ export default function FilterPrice({
 
   return (
     <div className={styleClasses}>
-      {serviceFilterItems.map((e, index) => {
-        const isServiceSelected =
-          e.value === serviceType || serviceSelections.includes(e.value)
-        const selectFilter = cx({
-          [styles.selected]: isServiceSelected,
-          [styles.filter]: true
-        })
-        return (
-          <Button
-            size="small"
-            style="text"
-            key={index}
-            className={selectFilter}
-            onClick={async () => {
-              handleSelectedFilter(isServiceSelected, e.value)
-            }}
-          >
-            {e.display}
-          </Button>
-        )
-      })}
-      <div className={styles.separator} />
-      {accessFilterItems.map((e, index) => {
-        const isAccessSelected =
-          e.value === accessType || accessSelections.includes(e.value)
-        const selectFilter = cx({
-          [styles.selected]: isAccessSelected,
-          [styles.filter]: true
-        })
-        return (
-          <Button
-            size="small"
-            style="text"
-            key={index}
-            className={selectFilter}
-            onClick={async () => {
-              handleSelectedFilter(isAccessSelected, e.value)
-            }}
-          >
-            {e.display}
-          </Button>
-        )
-      })}
-      {clearFilters.map((e, index) => {
-        const showClear =
-          accessSelections.length > 0 || serviceSelections.length > 0
-        return (
-          <Button
-            size="small"
-            style="text"
-            key={index}
-            className={showClear ? styles.showClear : styles.hideClear}
-            onClick={async () => {
-              applyClearFilter(addFiltersToUrl)
-            }}
-          >
-            {e.display}
-          </Button>
-        )
-      })}
+      <div>
+        {serviceFilterItems.map((e, index) => {
+          const isServiceSelected =
+            e.value === serviceType || serviceSelections.includes(e.value)
+          const selectFilter = cx({
+            [styles.selected]: isServiceSelected,
+            [styles.filter]: true
+          })
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={async () => {
+                handleSelectedFilter(isServiceSelected, e.value)
+              }}
+            >
+              {e.display}
+            </Button>
+          )
+        })}
+      </div>
+      <div>
+        {accessFilterItems.map((e, index) => {
+          const isAccessSelected =
+            e.value === accessType || accessSelections.includes(e.value)
+          const selectFilter = cx({
+            [styles.selected]: isAccessSelected,
+            [styles.filter]: true
+          })
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={async () => {
+                handleSelectedFilter(isAccessSelected, e.value)
+              }}
+            >
+              {e.display}
+            </Button>
+          )
+        })}
+        {clearFilters.map((e, index) => {
+          const showClear =
+            accessSelections.length > 0 || serviceSelections.length > 0
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={showClear ? styles.showClear : styles.hideClear}
+              onClick={async () => {
+                applyClearFilter(addFiltersToUrl)
+              }}
+            >
+              {e.display}
+            </Button>
+          )
+        })}
+      </div>
     </div>
   )
 }
diff --git a/src/components/Search/index.module.css b/src/components/Search/index.module.css
index d30c587e0..9a3840e2e 100644
--- a/src/components/Search/index.module.css
+++ b/src/components/Search/index.module.css
@@ -12,7 +12,7 @@
   margin-bottom: calc(var(--spacer) / 2);
 }
 
-@media (min-width: 40rem) {
+@media (min-width: 55rem) {
   .row {
     flex-direction: row;
   }
diff --git a/src/components/Search/sort.module.css b/src/components/Search/sort.module.css
index 0ecf9f23a..dad17cba1 100644
--- a/src/components/Search/sort.module.css
+++ b/src/components/Search/sort.module.css
@@ -8,7 +8,7 @@
   overflow-y: auto;
 }
 
-@media (min-width: 40rem) {
+@media (min-width: 55rem) {
   .sortList {
     align-self: flex-end;
     overflow-y: unset;