Merge pull request #136 from ConductionNL/development

Development to main, week 43

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",

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;
+  }
+}

pwa/src/services/filtersToQueryParams.ts

@@ -1,3 +1,5 @@
+import { generateYearsArray } from "../data/years";
+
 export const filtersToQueryParams = (filters: any): string => {
   const cleanedFilters = Object.fromEntries(
     Object.entries(filters).filter(([key]) => !filterKeysToRemove.includes(key)),
@@ -9,7 +11,7 @@ export const filtersToQueryParams = (filters: any): string => {
 
       const formattedValue = Array.isArray(value)
         ? value.map((v: string) => v.replace(/\s+/g, "_")).join(`&${key}[]=`)
-        : (value as string).replace(/\s+/g, "_");
+        : (value as string);
 
       return `${Array.isArray(value) ? `${key}[]` : key}=${formattedValue}`;
     })
@@ -20,6 +22,9 @@ export const filtersToQueryParams = (filters: any): string => {
 };
 
 export const filtersToUrlQueryParams = (filters: Record<string, any>): string => {
+  const today = new Date();
+  const currentYear = today.getFullYear();
+
   const cleanedFilters = Object.fromEntries(
     Object.entries(filters).filter(([key]) => !filterKeysToRemove.includes(key)),
   );
@@ -32,6 +37,13 @@ export const filtersToUrlQueryParams = (filters: Record<string, any>): string =>
         ? value.map((v: string) => v.replace(/\s+/g, "_")).join(`&${key}[]=`)
         : (value as string).replace(/\s+/g, "_");
 
+      if (key == "Publicatiedatum[after]") return;
+      if (key == "Publicatiedatum[before]")
+        return `year=${
+          generateYearsArray(currentYear - 1995).find((year: any) => {
+            return year.before === value;
+          })?.value
+        }`;
       return `${Array.isArray(value) ? `${key}[]` : key}=${formattedValue}`;
     })
     .filter(Boolean)

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: var(--utrecht-space-block-lg) !important;
+  }
+
+  .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);
+  }
+}

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));
+  }
+}

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;
+  }
+}

pwa/src/templates/templateParts/filters/FiltersTemplate.tsx

@@ -52,7 +52,7 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
     setValue(
       "year",
       generateYearsArray(currentYear - 1995).find((year: any) => {
-        return year.after === params.Publicatiedatum?.after && year.before === params.Publicatiedatum?.before;
+        return year.value === params.year;
       }),
     );
 

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;
+  }
+}