feat: categories shortcuts for mobile (#222)

City-of-Helsinki · Feb 17, 2023 · 1a4457a · 1a4457a
1 parent 2103f2a
commit 1a4457a
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 26 deletions.
diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json
@@ -73,7 +73,7 @@
     "react-content-loader": "^6.2.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
-    "react-helsinki-headless-cms": "1.0.0-alpha110",
+    "react-helsinki-headless-cms": "1.0.0-alpha111",
     "react-i18next": "11.18.6",
     "react-scroll": "^1.8.7",
     "react-toastify": "^9.0.3",

diff --git a/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap b/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
@@ -33,7 +33,9 @@ exports[`matches snapshot 1`] = `
         </g>
       </svg>
     </span>
-    text
+    <span>
+      text
+    </span>
     <span
       aria-hidden="true"
       class="LinkBase-module_verticalAlignSmallOrMediumIcon__0SjrX LinkBase_vertical-align-small-or-medium-icon__wxjmq"

diff --git a/apps/events-helsinki/src/common-events/components/category/categoryFilter.module.scss b/apps/events-helsinki/src/common-events/components/category/categoryFilter.module.scss
@@ -3,6 +3,11 @@
   height: 100%;
   min-height: 64px;
 
+  @include respond-below(m) {
+    width: 100%;
+    min-height: auto;
+  }
+
   a {
     display: flex;
     align-items: center;
@@ -46,6 +51,9 @@
     span {
       text-align: left;
       text-overflow: ellipsis;
+      &:nth-child(2) {
+        width: 100%;
+      }
     }
 
     &:focus {

diff --git a/apps/events-helsinki/src/domain/search/landingPageSearch/landingPageSearch.module.scss b/apps/events-helsinki/src/domain/search/landingPageSearch/landingPageSearch.module.scss
@@ -37,12 +37,16 @@
   height: fit-content;
   align-items: center;
 
-  @include respond-below(s) {
-    display: none;
+  @include respond-below(m) {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0;
+    grid-gap: 0;
+    padding-bottom: 2rem;
   }
 
   @include respond-above(s) {
-    padding-top: 12rem;
+    padding-top: 7rem;
   }
 
   @include respond-above(m) {

diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json
@@ -73,7 +73,7 @@
     "react-content-loader": "^6.2.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
-    "react-helsinki-headless-cms": "1.0.0-alpha110",
+    "react-helsinki-headless-cms": "1.0.0-alpha111",
     "react-i18next": "11.18.6",
     "react-scroll": "^1.8.7",
     "react-toastify": "^9.0.3",

diff --git a/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap b/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
@@ -33,7 +33,9 @@ exports[`matches snapshot 1`] = `
         </g>
       </svg>
     </span>
-    text
+    <span>
+      text
+    </span>
     <span
       aria-hidden="true"
       class="LinkBase-module_verticalAlignSmallOrMediumIcon__0SjrX LinkBase_vertical-align-small-or-medium-icon__wxjmq"

diff --git a/apps/hobbies-helsinki/src/common-events/components/category/categoryFilter.module.scss b/apps/hobbies-helsinki/src/common-events/components/category/categoryFilter.module.scss
@@ -3,6 +3,11 @@
   height: 100%;
   min-height: 64px;
 
+  @include respond-below(m) {
+    width: 100%;
+    min-height: auto;
+  }
+
   a {
     display: flex;
     align-items: center;
@@ -46,6 +51,9 @@
     span {
       text-align: left;
       text-overflow: ellipsis;
+      &:nth-child(2) {
+        width: 100%;
+      }
     }
 
     &:focus {

diff --git a/apps/hobbies-helsinki/src/domain/search/landingPageSearch/landingPageSearch.module.scss b/apps/hobbies-helsinki/src/domain/search/landingPageSearch/landingPageSearch.module.scss
@@ -37,12 +37,16 @@
   height: fit-content;
   align-items: center;
 
-  @include respond-below(s) {
-    display: none;
+  @include respond-below(m) {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0;
+    grid-gap: 0;
+    padding-bottom: 2rem;
   }
 
   @include respond-above(s) {
-    padding-top: 12rem;
+    padding-top: 7rem;
   }
 
   @include respond-above(m) {

diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json
@@ -80,7 +80,7 @@
     "react-content-loader": "^6.2.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
-    "react-helsinki-headless-cms": "1.0.0-alpha110",
+    "react-helsinki-headless-cms": "1.0.0-alpha111",
     "react-i18next": "11.18.6",
     "react-leaflet": "4.2.0",
     "react-scroll": "^1.8.7",

diff --git a/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap b/...rc/common-events/components/category/__tests__/__snapshots__/CategoryFilter.test.tsx.snap
@@ -33,7 +33,9 @@ exports[`matches snapshot 1`] = `
         </g>
       </svg>
     </span>
-    text
+    <span>
+      text
+    </span>
     <span
       aria-hidden="true"
       class="LinkBase-module_verticalAlignSmallOrMediumIcon__0SjrX LinkBase_vertical-align-small-or-medium-icon__wxjmq"

diff --git a/apps/sports-helsinki/src/common-events/components/category/categoryFilter.module.scss b/apps/sports-helsinki/src/common-events/components/category/categoryFilter.module.scss
@@ -3,6 +3,11 @@
   height: 100%;
   min-height: 64px;
 
+  @include respond-below(m) {
+    width: 100%;
+    min-height: auto;
+  }
+
   a {
     display: flex;
     align-items: center;
@@ -46,6 +51,9 @@
     span {
       text-align: left;
       text-overflow: ellipsis;
+      &:nth-child(2) {
+        width: 100%;
+      }
     }
 
     &:focus {

diff --git a/apps/sports-helsinki/src/domain/search/landingPageSearch/landingPageSearch.module.scss b/apps/sports-helsinki/src/domain/search/landingPageSearch/landingPageSearch.module.scss
@@ -37,12 +37,16 @@
   height: fit-content;
   align-items: center;
 
-  @include respond-below(s) {
-    display: none;
+  @include respond-below(m) {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0;
+    grid-gap: 0;
+    padding-bottom: 2rem;
   }
 
   @include respond-above(s) {
-    padding-top: 12rem;
+    padding-top: 7rem;
   }
 
   @include respond-above(m) {

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -67,7 +67,7 @@
     "react-content-loader": "6.2.0",
     "react-datepicker": "4.8.0",
     "react-dom": ">=17.0.2",
-    "react-helsinki-headless-cms": "1.0.0-alpha110",
+    "react-helsinki-headless-cms": "1.0.0-alpha111",
     "react-i18next": "11.18.6",
     "react-leaflet": "4.2.0",
     "react-toastify": "^9.0.3",

diff --git a/packages/components/src/utils/headless-cms/service.tsx b/packages/components/src/utils/headless-cms/service.tsx
@@ -40,7 +40,7 @@ export const getAllArticles = async (
         locale: node.language.code.toLowerCase(),
         slug: node.slug,
       });
-      node.translations?.forEach((translation) => {
+      node.translations?.forEach((translation: PageType['translations']) => {
         if (
           translation?.uri &&
           translation.slug &&
@@ -88,7 +88,7 @@ export const getAllPages = async (
         locale: node.language.code.toLowerCase(),
         slug: node.slug,
       });
-      node.translations?.forEach((translation) => {
+      node.translations?.forEach((translation: PageType['translations']) => {
         if (
           translation?.uri &&
           translation.slug &&

diff --git a/yarn.lock b/yarn.lock
@@ -14861,7 +14861,7 @@ __metadata:
     react-content-loader: "npm:6.2.0"
     react-datepicker: "npm:4.8.0"
     react-dom: "npm:>=17.0.2"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha110"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha111"
     react-i18next: "npm:11.18.6"
     react-leaflet: "npm:4.2.0"
     react-toastify: "npm:^9.0.3"
@@ -15117,7 +15117,7 @@ __metadata:
     react-content-loader: "npm:^6.2.0"
     react-datepicker: "npm:^4.8.0"
     react-dom: "npm:18.2.0"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha110"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha111"
     react-i18next: "npm:11.18.6"
     react-scroll: "npm:^1.8.7"
     react-toastify: "npm:^9.0.3"
@@ -17330,7 +17330,7 @@ __metadata:
     react-content-loader: "npm:^6.2.0"
     react-datepicker: "npm:^4.8.0"
     react-dom: "npm:18.2.0"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha110"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha111"
     react-i18next: "npm:11.18.6"
     react-scroll: "npm:^1.8.7"
     react-toastify: "npm:^9.0.3"
@@ -25688,9 +25688,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helsinki-headless-cms@npm:1.0.0-alpha110":
-  version: 1.0.0-alpha110
-  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha110"
+"react-helsinki-headless-cms@npm:1.0.0-alpha111":
+  version: 1.0.0-alpha111
+  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha111"
   dependencies:
     hds-design-tokens: "npm:^2.3.0"
     html-react-parser: "npm:^1.4.8"
@@ -25704,7 +25704,7 @@ __metadata:
   peerDependenciesMeta:
     "@apollo/client":
       optional: true
-  checksum: e0801d9e4e30292543e0d841a7ef0267be7f837ba3e38e307154692b0c539a3ed187037ed9b5c52816d3ea402c9a589d2284a3ae32e956dee1c87f1d05edbd7e
+  checksum: 63fb37406b2becb82318b9ab707d7fe8da56d8a26197e8ebdc3b78350143598317f54b303b20922d498d7b669f881e5fa2f7605db88facb9c5bd06161223f761
   languageName: node
   linkType: hard
 
@@ -28092,7 +28092,7 @@ __metadata:
     react-content-loader: "npm:^6.2.0"
     react-datepicker: "npm:^4.8.0"
     react-dom: "npm:18.2.0"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha110"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha111"
     react-i18next: "npm:11.18.6"
     react-leaflet: "npm:4.2.0"
     react-scroll: "npm:^1.8.7"