From e8b8e6b9130cc76264ffaecb7467956551926a3b Mon Sep 17 00:00:00 2001
From: Remko <remkohuisman@hotmail.nl>
Date: Mon, 23 Oct 2023 12:56:26 +0200
Subject: [PATCH 1/2] updated template to accommodate mobile use

---
 pwa/package.json                              |   2 +-
 .../ResultsDisplaySwitch.module.css           |  17 ++
 .../landing/LandingTemplate.module.css        |  18 ++
 .../CardsResultsTemplate.module.css           |  13 +
 .../filters/FiltersTemplate.module.css        |  25 ++
 .../footer/FooterTemplate.module.css          |  30 +-
 .../WOOItemDetailTemplate.tsx                 | 284 +++++++++---------
 7 files changed, 248 insertions(+), 141 deletions(-)

diff --git a/pwa/package.json b/pwa/package.json
index 6d6751db..3c012350 100644
--- a/pwa/package.json
+++ b/pwa/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.18",
-    "@conduction/theme": "1.0.50",
+    "@conduction/theme": "1.0.51",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
diff --git a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.module.css b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.module.css
index db3cb651..6ac3abe6 100644
--- a/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.module.css
+++ b/pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.module.css
@@ -7,3 +7,20 @@
 .button:hover {
   cursor: pointer;
 }
+
+@media only screen and (max-width: 992px) {
+  /* Tablet */
+  .container {
+    margin-inline-start: unset;
+    display: flex;
+  }
+}
+
+@media only screen and (max-width: 576px) {
+  /* Mobile */
+  .container {
+    margin-inline-start: unset;
+    justify-content: center;
+    display: flex;
+  }
+}
diff --git a/pwa/src/templates/landing/LandingTemplate.module.css b/pwa/src/templates/landing/LandingTemplate.module.css
index ddb02a7a..587afc40 100644
--- a/pwa/src/templates/landing/LandingTemplate.module.css
+++ b/pwa/src/templates/landing/LandingTemplate.module.css
@@ -10,3 +10,21 @@
   display: flex;
   justify-content: space-between;
 }
+
+@media only screen and (max-width: 576px) {
+  /* Mobile */
+  .container {
+    margin-block-start: unset;
+  }
+
+  .container > *:not(:last-child) {
+    margin-block-end: var(--utrecht-space-block-2xl);
+  }
+
+  .pagination {
+    display: grid;
+    justify-content: unset;
+    justify-items: center;
+    margin-block-start: var(--utrecht-space-block-lg);
+  }
+}
diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css
index 5b12176b..23365624 100644
--- a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css
+++ b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css
@@ -25,3 +25,16 @@
 .description {
   color: var(--conduction-card-wrapper-color) !important;
 }
+
+@media only screen and (max-width: 992px) {
+  /* Tablet */
+  .componentsGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media only screen and (max-width: 576px) {
+  /* Mobile */
+  .componentsGrid {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
diff --git a/pwa/src/templates/templateParts/filters/FiltersTemplate.module.css b/pwa/src/templates/templateParts/filters/FiltersTemplate.module.css
index a0850fda..66258cd7 100644
--- a/pwa/src/templates/templateParts/filters/FiltersTemplate.module.css
+++ b/pwa/src/templates/templateParts/filters/FiltersTemplate.module.css
@@ -33,3 +33,28 @@
     transform: rotate(360deg);
   }
 }
+
+@media only screen and (max-width: 992px) {
+  /* Tablet */
+  .container {
+    display: grid;
+    justify-content: unset;
+  }
+
+  .form {
+    margin-block-end: 12px;
+  }
+}
+
+@media only screen and (max-width: 576px) {
+  /* Mobile */
+  .container {
+    display: grid;
+    justify-content: unset;
+  }
+
+  .form {
+    display: grid;
+    margin-block-end: 12px;
+  }
+}
diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css
index d5e22e04..4315112c 100644
--- a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css
+++ b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css
@@ -56,7 +56,7 @@
 .contentGrid {
   gap: 28px;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .dynamicSectionTitle {
@@ -76,3 +76,31 @@
   justify-content: space-between;
   align-items: flex-end;
 }
+
+@media only screen and (max-width: 992px) {
+  /* Tablet */
+  .contentGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media only screen and (max-width: 576px) {
+  /* Mobile */
+  .footer {
+    background-position: var(
+      --utrecht-page-footer-mobile-background-position,
+      var(--utrecht-page-footer-background-position)
+    );
+  }
+  .contentGrid {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .imageContainer {
+    margin-block-end: 15px;
+  }
+
+  .logoAndConduction {
+    display: block;
+  }
+}
diff --git a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx b/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx
index 3b618a5d..fc17014a 100644
--- a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx
+++ b/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx
@@ -11,7 +11,6 @@ import {
   UnorderedList,
   UnorderedListItem,
   Link,
-  Icon,
 } from "@utrecht/component-library-react/dist/css-module";
 import { translateDate } from "../../services/dateFormat";
 import { useTranslation } from "react-i18next";
@@ -23,7 +22,7 @@ import { useOpenWoo } from "../../hooks/openWoo";
 import Skeleton from "react-loading-skeleton";
 import { getPDFName } from "../../services/getPDFName";
 import { isUUID } from "../../services/isUUID";
-import { getBijlageTitleFromURL } from "../../services/getNameFromBijlageArray";
+import { HorizontalOverflowWrapper } from "@conduction/components";
 
 interface WOOItemDetailTemplateProps {
   wooItemId: string;
@@ -50,144 +49,151 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
               {getItems.data.Titel !== "" ? getItems.data.Titel : t("No title available")}
             </Heading1>
 
-            <Table className={styles.table}>
-              <TableBody className={styles.tableBody}>
-                {getItems.data.ID && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Feature")}</TableCell>
-                    <TableCell>{isUUID(getItems.data.ID) ? getItems.data.Object_ID : getItems.data.ID}</TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data.Titel && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Category")}</TableCell>
-                    <TableCell>{getItems.data.Categorie ?? "-"}</TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data.Samenvatting && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Summary")}</TableCell>
-                    <TableCell>{getItems.data.Samenvatting}</TableCell>
-                  </TableRow>
-                )}
-                {getItems.data.Beschrijving && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Description")}</TableCell>
-                    <TableCell>{getItems.data.Beschrijving}</TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data.Termijnoverschrijding && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Exceeding the term")}</TableCell>
-                    <TableCell>{getItems.data.Termijnoverschrijding}</TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data.Publicatiedatum && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Publication date")}</TableCell>
-                    <TableCell>
-                      {getItems.data.Publicatiedatum
-                        ? translateDate(i18n.language, getItems.data.Publicatiedatum)
-                        : "-"}
-                    </TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data.Ontvangstdatum && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Registration date")}</TableCell>
-
-                    <TableCell>{translateDate(i18n.language, getItems.data.Ontvangstdatum) ?? "-"}</TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data.Besluitdatum && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Decision date")} </TableCell>
-                    <TableCell>{translateDate(i18n.language, getItems.data.Besluitdatum) ?? "-"}</TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data?.embedded?.Themas && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Themes")}</TableCell>
-                    <TableCell>
-                      {getItems.data?.embedded?.Themas.map((thema: any, idx: number) => (
-                        <span key={idx}>
-                          {thema.Hoofdthema + (idx !== getItems.data?.embedded?.Themas.length - 1 ? ", " : "")}
-                        </span>
-                      ))}
-                    </TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data?.embedded?.informatieverzoek && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Information request")}</TableCell>
-                    <TableCell>
-                      <Link href={getItems.data?.embedded?.informatieverzoek.URL_Bijlage} target="blank">
-                        {getItems.data?.embedded?.informatieverzoek?.Titel_Bijlage}
-                      </Link>
-                    </TableCell>
-                  </TableRow>
-                )}
-
-                {(getItems.data.Besluit || (getItems.data?.embedded?.besluit ?? getItems.data.URL_besluit)) && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Decision")}</TableCell>
-                    <TableCell>
-                      {getItems.data.Besluit}
-                      {getItems.data.Besluit &&
-                        (getItems.data?.embedded?.besluit ?? getItems.data.URL_besluit) &&
-                        ","}{" "}
-                      {(getItems.data?.embedded?.besluit ?? getItems.data.URL_besluit) && (
-                        <Link
-                          href={getItems.data?.embedded?.besluit?.URL_Bijlage ?? getItems.data.URL_besluit}
-                          target="blank"
-                        >
-                          {getItems.data?.embedded?.besluit?.Titel_Bijlage ?? getPDFName(getItems.data.URL_besluit)}
-                        </Link>
-                      )}
-                    </TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data?.embedded?.inventarisatielijst && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Inventory list")}</TableCell>
-                    <TableCell>
-                      <Link href={getItems.data?.embedded?.inventarisatielijst?.URL_Bijlage} target="blank">
-                        {getItems.data?.embedded?.inventarisatielijst?.Titel_Bijlage}
-                      </Link>
-                    </TableCell>
-                  </TableRow>
-                )}
-
-                {getItems.data?.embedded?.Bijlagen && (
-                  <TableRow className={styles.tableRow}>
-                    <TableCell>{t("Attachments")}</TableCell>
-                    <TableCell>
-                      <UnorderedList>
-                        {getItems.data?.embedded?.Bijlagen.map((bijlage: any, idx: number) => (
-                          <UnorderedListItem key={idx}>
-                            <Link
-                              href={bijlage.URL_Bijlage?.length !== 0 ? bijlage.URL_Bijlage : "#"}
-                              target={bijlage.URL_Bijlage?.length !== 0 ? "blank" : ""}
-                            >
-                              {bijlage.Titel_Bijlage}
-                            </Link>
-                          </UnorderedListItem>
+            <HorizontalOverflowWrapper
+              ariaLabels={{
+                scrollLeftButton: t("Scroll table to the left"),
+                scrollRightButton: t("Scroll table to the right"),
+              }}
+            >
+              <Table className={styles.table}>
+                <TableBody className={styles.tableBody}>
+                  {getItems.data.ID && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Feature")}</TableCell>
+                      <TableCell>{isUUID(getItems.data.ID) ? getItems.data.Object_ID : getItems.data.ID}</TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data.Titel && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Category")}</TableCell>
+                      <TableCell>{getItems.data.Categorie ?? "-"}</TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data.Samenvatting && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Summary")}</TableCell>
+                      <TableCell>{getItems.data.Samenvatting}</TableCell>
+                    </TableRow>
+                  )}
+                  {getItems.data.Beschrijving && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Description")}</TableCell>
+                      <TableCell>{getItems.data.Beschrijving}</TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data.Termijnoverschrijding && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Exceeding the term")}</TableCell>
+                      <TableCell>{getItems.data.Termijnoverschrijding}</TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data.Publicatiedatum && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Publication date")}</TableCell>
+                      <TableCell>
+                        {getItems.data.Publicatiedatum
+                          ? translateDate(i18n.language, getItems.data.Publicatiedatum)
+                          : "-"}
+                      </TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data.Ontvangstdatum && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Registration date")}</TableCell>
+
+                      <TableCell>{translateDate(i18n.language, getItems.data.Ontvangstdatum) ?? "-"}</TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data.Besluitdatum && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Decision date")} </TableCell>
+                      <TableCell>{translateDate(i18n.language, getItems.data.Besluitdatum) ?? "-"}</TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data?.embedded?.Themas && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Themes")}</TableCell>
+                      <TableCell>
+                        {getItems.data?.embedded?.Themas.map((thema: any, idx: number) => (
+                          <span key={idx}>
+                            {thema.Hoofdthema + (idx !== getItems.data?.embedded?.Themas.length - 1 ? ", " : "")}
+                          </span>
                         ))}
-                      </UnorderedList>
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
+                      </TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data?.embedded?.informatieverzoek && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Information request")}</TableCell>
+                      <TableCell>
+                        <Link href={getItems.data?.embedded?.informatieverzoek.URL_Bijlage} target="blank">
+                          {getItems.data?.embedded?.informatieverzoek?.Titel_Bijlage}
+                        </Link>
+                      </TableCell>
+                    </TableRow>
+                  )}
+
+                  {(getItems.data.Besluit || (getItems.data?.embedded?.besluit ?? getItems.data.URL_besluit)) && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Decision")}</TableCell>
+                      <TableCell>
+                        {getItems.data.Besluit}
+                        {getItems.data.Besluit &&
+                          (getItems.data?.embedded?.besluit ?? getItems.data.URL_besluit) &&
+                          ","}{" "}
+                        {(getItems.data?.embedded?.besluit ?? getItems.data.URL_besluit) && (
+                          <Link
+                            href={getItems.data?.embedded?.besluit?.URL_Bijlage ?? getItems.data.URL_besluit}
+                            target="blank"
+                          >
+                            {getItems.data?.embedded?.besluit?.Titel_Bijlage ?? getPDFName(getItems.data.URL_besluit)}
+                          </Link>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data?.embedded?.inventarisatielijst && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Inventory list")}</TableCell>
+                      <TableCell>
+                        <Link href={getItems.data?.embedded?.inventarisatielijst?.URL_Bijlage} target="blank">
+                          {getItems.data?.embedded?.inventarisatielijst?.Titel_Bijlage}
+                        </Link>
+                      </TableCell>
+                    </TableRow>
+                  )}
+
+                  {getItems.data?.embedded?.Bijlagen && (
+                    <TableRow className={styles.tableRow}>
+                      <TableCell>{t("Attachments")}</TableCell>
+                      <TableCell>
+                        <UnorderedList>
+                          {getItems.data?.embedded?.Bijlagen.map((bijlage: any, idx: number) => (
+                            <UnorderedListItem key={idx}>
+                              <Link
+                                href={bijlage.URL_Bijlage?.length !== 0 ? bijlage.URL_Bijlage : "#"}
+                                target={bijlage.URL_Bijlage?.length !== 0 ? "blank" : ""}
+                              >
+                                {bijlage.Titel_Bijlage}
+                              </Link>
+                            </UnorderedListItem>
+                          ))}
+                        </UnorderedList>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </HorizontalOverflowWrapper>
           </>
         )}
         {getItems.isLoading && <Skeleton height={"200px"} />}

From f885579e521ce0d0106edf12ec494a53db33b447 Mon Sep 17 00:00:00 2001
From: Remko <remkohuisman@hotmail.nl>
Date: Mon, 23 Oct 2023 13:39:22 +0200
Subject: [PATCH 2/2] updated version of conduction-theme

---
 pwa/package-lock.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pwa/package-lock.json b/pwa/package-lock.json
index b5b625ed..900f2005 100644
--- a/pwa/package-lock.json
+++ b/pwa/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@conduction/components": "2.2.18",
-        "@conduction/theme": "1.0.50",
+        "@conduction/theme": "1.0.51",
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/react-fontawesome": "^0.1.18",
@@ -2112,9 +2112,9 @@
       }
     },
     "node_modules/@conduction/theme": {
-      "version": "1.0.50",
-      "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.50.tgz",
-      "integrity": "sha512-VdkN12+r12WORjVtl2W1kSLMaeZLtqRdrwtHJKuuUFGZmUnqDoxrdjPnX9c5in+MROLgIbBN1Xp/8/Ucy/Y6Lg==",
+      "version": "1.0.51",
+      "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.51.tgz",
+      "integrity": "sha512-rRp8SMHYU7EYrgXNR/z5+X6/rB6XNrXrJ3WnmBEu+jYLKJqpbhluPUPhHvWEJmRAYNDo1rEYyYK27JljgGe89w==",
       "dependencies": {
         "@nl-design-system-unstable/rotterdam-design-tokens": "^1.0.0-alpha.100"
       }