From 8bd3ba39eea6aaa13b43a782b50d337f62975daf Mon Sep 17 00:00:00 2001
From: TomDijkema <tom.dijkema@naturalis.nl>
Date: Wed, 8 May 2024 16:42:03 +0200
Subject: [PATCH 1/6] Make the homepage, header and footer suitable for mobile
 devices

Makes the homepage, header and footer suitable for mobile devices.
Does this using bootstrap and custom made css classes that are invoked into the existing components.
---
 src/App.css                                   | 120 +++++++++++--
 src/app/Utilities.ts                          |  12 +-
 src/components/general/buttons/Button.tsx     |   4 +-
 .../general/buttons/buttons.module.scss       |   6 +-
 src/components/general/footer/Footer.tsx      |  42 ++++-
 src/components/general/header/Header.tsx      |  12 +-
 .../general/header/header.module.scss         |   9 +
 src/components/home/Home.tsx                  | 164 +++++++++++-------
 .../home/components/HomeCategory.tsx          |  19 +-
 src/components/home/components/SearchBar.tsx  |  14 +-
 src/components/home/home.module.scss          |  16 +-
 11 files changed, 307 insertions(+), 111 deletions(-)

diff --git a/src/App.css b/src/App.css
index 25b4980..7be2674 100644
--- a/src/App.css
+++ b/src/App.css
@@ -21,7 +21,13 @@
 /* Global styles */
 html {
   height: 100vh;
-  font-size: 0.85vw;
+  font-size: 1.9vmax;
+}
+
+@media only screen and (min-width: 768px) {
+  html {
+    font-size: 0.85vmax
+  }
 }
 
 body {
@@ -43,7 +49,7 @@ code {
 #root {
   height: 100%;
   width: 100%;
-  overflow-y: auto;
+  overflow-y: hidden;
   overflow-x: hidden;
 }
 
@@ -66,32 +72,54 @@ p {
 }
 
 /* Font sizes, default is 16px */
-.fs-title {
-  font-size: 3rem !important;
+.fs-5 {
+  font-size: 0.75rem !important;
 }
 
-.fs-subTitle {
-  font-size: 2rem !important;
+.fs-4 {
+  font-size: 0.875rem !important;
 }
 
-.fs-1 {
-  font-size: 2.5rem !important;
+.fs-3 {
+  font-size: 1.125rem !important;
 }
 
 .fs-2 {
   font-size: 1.5rem !important;
 }
 
-.fs-3 {
-  font-size: 1.125rem !important;
-}
-
-.fs-4 {
-  font-size: 0.875rem !important;
+.fs-1 {
+  font-size: 2.5rem !important;
 }
 
-.fs-5 {
-  font-size: 0.75rem !important;
+@media only screen and (min-width: 768px) {
+  .fs-lg-5 {
+    font-size: 0.75rem !important;
+  }
+  
+  .fs-lg-4 {
+    font-size: 0.875rem !important;
+  }
+  
+  .fs-lg-3 {
+    font-size: 1.125rem !important;
+  }
+  
+  .fs-lg-2 {
+    font-size: 1.5rem !important;
+  }
+  
+  .fs-lg-1 {
+    font-size: 2.5rem !important;
+  }
+
+  .fs-title {
+    font-size: 3rem !important;
+  }
+  
+  .fs-subTitle {
+    font-size: 2rem !important;
+  }
 }
 
 /* Text color */
@@ -214,6 +242,12 @@ p {
   overflow-y: hidden;
 }
 
+@media only screen and (max-width: 768px) {
+  .overflow-y-lg-scroll {
+    overflow-y: scroll;
+  }
+}
+
 /* Z-index */
 .z-0 {
   z-index: 0;
@@ -227,6 +261,60 @@ p {
   z-index: 2;
 }
 
+/* Width and Height */
+@media only screen and (max-width: 768px) {
+  .w-100 {
+    width: 100% !important;
+  }
+
+  .w-50 {
+    width: 50% !important;
+  }
+
+  .h-100 {
+    height: 100% !important;
+  }
+
+  .h-50 {
+    height: 50% !important;
+  }
+
+  .h-auto {
+    height: auto !important;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .w-lg-25 {
+    width: 25% !important;
+  }
+
+  .h-lg-100 {
+    height: 100% !important;
+  }
+
+  .h-lg-50 {
+    height: 50% !important;
+  }
+
+  .h-lg-auto {
+    height: auto !important;
+  }
+}
+
+/* Position */
+@media only screen and (max-width: 768px) {
+  .position-absolute {
+    position: absolute !important;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .position-lg-static {
+    position: static !important;
+  }
+}
+
 /* Transition */
 .tr-smooth {
   transition: 0.3s;
diff --git a/src/app/Utilities.ts b/src/app/Utilities.ts
index b36c234..ea7ea56 100644
--- a/src/app/Utilities.ts
+++ b/src/app/Utilities.ts
@@ -1,3 +1,7 @@
+/* Import Dependencies */
+import { startCase } from "lodash";
+
+
 /** Function to capitalize the first character of a string */
 const Capitalize = (string: string) => {
     if (string) {
@@ -8,11 +12,11 @@ const Capitalize = (string: string) => {
 }
 
 /** Function to replace capitals in a string with spaces to make a readable string */
-const MakeReadableString = (string: string) => {  
-    const splitArray: string[] = string.split(/(?=[A-Z])/);
+const MakeReadableString = (string: string) => {
+    const splitArray: RegExpMatchArray | null = string.match(/[A-Z]?[a-z]+|[0-9]+|[A-Z]+(?![a-z])/g);
 
-    return Capitalize(splitArray.join(' '));
-}
+    return startCase(splitArray?.join(' ')) ?? startCase(string.split(/(?=[A-Z])/).join(' '));
+};
 
 
 export {
diff --git a/src/components/general/buttons/Button.tsx b/src/components/general/buttons/Button.tsx
index 69e6a78..46948a0 100644
--- a/src/components/general/buttons/Button.tsx
+++ b/src/components/general/buttons/Button.tsx
@@ -9,7 +9,7 @@ import styles from './buttons.module.scss';
 interface Props {
     children?: string | JSX.Element,
     type: 'button' | 'submit',
-    variant: 'primary' | 'secondary' | 'blank',
+    variant: 'primary' | 'secondary' | 'tertiary' | 'blank',
     className?: string,
     OnClick?: Function
 };
@@ -36,7 +36,7 @@ const Button = (props: Props) => {
             className={`${styles.button} ${styles[variant]} ${buttonClass} fs-4 fw-bold b-none br-round`}
             onClick={() => OnClick?.()}
         >
-            {children}
+            {children ?? ''}
         </button>
     );
 };
diff --git a/src/components/general/buttons/buttons.module.scss b/src/components/general/buttons/buttons.module.scss
index 958c0f4..19c4e32 100644
--- a/src/components/general/buttons/buttons.module.scss
+++ b/src/components/general/buttons/buttons.module.scss
@@ -2,7 +2,6 @@
 .button {
     background-color: transparent;
     transition: 0.3s;
-    color: inherit;
 }
 
 .button:hover {
@@ -19,4 +18,9 @@
 .secondary {
     background-color: var(--secondary);
     color: white;
+}
+
+.tertiary {
+    background-color: var(--tertiary);
+    color: white;
 }
\ No newline at end of file
diff --git a/src/components/general/footer/Footer.tsx b/src/components/general/footer/Footer.tsx
index 83dd9be..d605c49 100644
--- a/src/components/general/footer/Footer.tsx
+++ b/src/components/general/footer/Footer.tsx
@@ -14,9 +14,47 @@ const Footer = () => {
 
     return (
         <Container fluid>
-            <Row className="bgc-dark py-2">
+            <Row className="bgc-dark py-2 px-2 px-lg-0">
                 <Col lg={{ span: 10, offset: 1 }}>
-                    <Row>
+                    {/* Mobile */}
+                    <Row className="d-flex d-lg-none">
+                        <Col>
+                            <Row>
+                                <Col>
+                                    <p className="fs-5 tc-white fw-lightBold">
+                                        TETTRIs Grant Agreement 101081903
+                                    </p>
+                                </Col>
+                                <Col className="col-auto">
+                                    <p className="fs-5 tc-white">{`CETAF ${currentYear}`}</p>
+                                </Col>
+                            </Row>
+                            <Row className="mt-3">
+                                <Col>
+                                    <Row className="mt-2 align-items-end">
+                                        <Col>
+                                            <img src={EUFundedLogo}
+                                                alt="Funded by EU logo"
+                                                className={styles.EUFundedLogo}
+                                            />
+                                        </Col>
+                                        <Col>
+                                            <Row>
+                                                <Col>
+                                                    <div className="h-100 fs-5 tc-white fw-lightBold text-end">
+                                                        <p>Privacy policy</p>
+                                                        <p className="mt-1">Terms and Conditions</p>
+                                                    </div>
+                                                </Col>
+                                            </Row>
+                                        </Col>
+                                    </Row>
+                                </Col>
+                            </Row>
+                        </Col>
+                    </Row>
+                    {/* Desktop */}
+                    <Row className="d-none d-lg-flex">
                         <Col className="col-lg-auto">
                             <img src={EUFundedLogo}
                                 alt="Funded by EU logo"
diff --git a/src/components/general/header/Header.tsx b/src/components/general/header/Header.tsx
index 759794f..e0fe1b1 100644
--- a/src/components/general/header/Header.tsx
+++ b/src/components/general/header/Header.tsx
@@ -12,11 +12,13 @@ import styles from './header.module.scss';
 /** Component that renders the application's Header */
 const Header = () => {
     return (
-        <Container fluid>
-            <Row className="bgc-white py-2">
+        <Container fluid
+            className={styles.header}
+        >
+            <Row className="bgc-white py-2 px-2">
                 <Col lg={{ span: 10, offset: 1 }}>
                     <Row>
-                        <Col className="col-lg-auto">
+                        <Col className="col-auto">
                             <Link to="/">
                                 <img src={CETAFLogo}
                                     alt="CETAF Logo"
@@ -25,10 +27,10 @@ const Header = () => {
                             </Link>
                         </Col>
                         <Col className="d-flex flex-column justify-content-center">
-                            <h2 className="fs-2 tc-primary fw-bold">
+                            <h2 className="w-auto fs-3 fs-lg-2 tc-primary fw-bold">
                                 Marketplace Prototype
                             </h2>
-                            <h3 className="fs-3 tc-grey fw-lightBold">
+                            <h3 className="fs-4 tc-grey fw-lightBold">
                                 The Taxonomic Expertise and Services Marketplace
                             </h3>
                         </Col>
diff --git a/src/components/general/header/header.module.scss b/src/components/general/header/header.module.scss
index e9e6cdc..2de9702 100644
--- a/src/components/general/header/header.module.scss
+++ b/src/components/general/header/header.module.scss
@@ -1,4 +1,13 @@
 /* Custom styling for the Header component */
+@media only screen and (max-width: 768px) {
+    .header {
+        position: sticky;
+        -webkit-box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
+        -moz-box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
+        box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
+    }
+}
+
 .CETAFLogo {
     height: 4rem;
 }
\ No newline at end of file
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index ab662c9..64c1f7e 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -21,74 +21,106 @@ const Home = () => {
             {/* Render Header */}
             <Header />
 
-            {/* Home page Body */}
-            <Container fluid className="flex-grow-1">
-                <Row className="h-100">
-                    <Col className="h-100 d-flex flex-column">
-                        {/* Big background image with Title and primary Search Bar */}
-                        <Row className={`${styles.background} flex-grow-1`}>
-                            <Col lg={{ span: 10, offset: 1 }}
-                                className="h-100 d-flex flex-column justify-content-center"
-                            >
-                                {/* Title */}
-                                <Row>
-                                    <Col>
-                                        <h1 className="fs-title tc-white fw-bold">A hive for finding and supplying <br /> taxonomic expertise and services</h1>
-                                        <div className="bgc-white w-25 pt-1 mt-3" />
-                                    </Col>
-                                </Row>
+            {/* Home page body */}
+            <div className="flex-grow-1 d-flex flex-column overflow-y-scroll overflow-x-hidden">
+                {/* Home page body */}
+                <Container fluid className="flex-lg-grow-1">
+                    <Row className="h-100">
+                        <Col className="h-100 d-flex flex-column">
+                            {/* Big background image with Title and primary search bar */}
+                            <Row className={`${styles.background} flex-lg-grow-1 py-5 py-lg-0 px-2 px-lg-0`}>
+                                <Col lg={{ span: 10, offset: 1 }}
+                                    className="h-100 d-flex flex-column justify-content-center"
+                                >
+                                    {/* Title */}
+                                    <Row>
+                                        <Col>
+                                            {/* Desktop */}
+                                            <h1 className="d-none d-lg-block fs-title tc-white fw-bold"
+                                            >A hive for finding and supplying <br /> taxonomic expertise and services
+                                            </h1>
+                                            {/* Mobile */}
+                                            <h1 className="d-block d-lg-none fs-2 tc-white fw-bold">
+                                                A hive for finding <br /> and supplying <br /> taxonomic <br /> expertise <br /> and services
+                                            </h1>
 
-                                {/* Search Bar */}
-                                <Row className="mt-5">
-                                    <Col lg={{span: 5}}>
-                                        <SearchBar />
-                                    </Col>
-                                </Row>
-                            </Col>
-                        </Row>
-                        {/* Search Category representation */}
-                        <Row>
-                            <Col lg={{ span: 1 }} className="p-0">
-                                <div className={`${styles.homeCategoryBar} bgc-grey py-3`} />
-                            </Col>
-                            <Col lg={{ span: 10 }}>
-                                <Row>
-                                    <Col lg={{ span: 4 }}>
-                                        <HomeCategory title="Taxonomic Services"
-                                            subTitle="Go find"
-                                            count={254}
-                                            link="/search"
-                                            color="primary"
-                                        />
-                                    </Col>
-                                    <Col lg={{ span: 4 }}>
-                                        <HomeCategory title="Reference Collections"
-                                            subTitle="Go explore"
-                                            count={84}
-                                            link="/search?taxonomicServiceType=referenceCollection"
-                                            color="secondary"
-                                        />
-                                    </Col>
-                                    <Col lg={{ span: 4 }}>
-                                        <HomeCategory title="Expertise Taxonomists"
-                                            subTitle="Go engage"
-                                            count={113}
-                                            link="/expertise"
-                                            color="tertiary"
-                                        />
-                                    </Col>
-                                </Row>
-                            </Col>
-                            <Col lg={{ span: 1 }} className="p-0">
-                                <div className={`${styles.homeCategoryBar} bgc-grey py-3`} />
-                            </Col>
-                        </Row>
-                    </Col>
-                </Row>
-            </Container>
+                                            <div className="bgc-white w-50 w-lg-25 pt-1 mt-3" />
+                                        </Col>
+                                    </Row>
 
-            {/* Render Footer */}
-            <Footer />
+                                    {/* Search Bar */}
+                                    <Row className="h-25 h-lg-auto mt-5 px-3 px-lg-0">
+                                        <Col xs={{ span: 12 }} lg={{ span: 5 }}
+                                            className="position-relative mt-2 mt-lg-0"
+                                        >
+                                            <SearchBar />
+                                        </Col>
+                                    </Row>
+                                </Col>
+                            </Row>
+                            {/* Search Category representation */}
+                            <Row className="mt-5 mt-lg-0 px-2 px-lg-0">
+                                <Col lg={{ span: 1 }}
+                                    className="p-0"
+                                >
+                                    <div className={`${styles.homeCategoryBar} bgc-grey d-none d-lg-block py-3`} />
+                                </Col>
+                                <Col lg={{ span: 10 }}
+                                    className="mt-5 mt-lg-0"
+                                >
+                                    {/* Block title on mobile */}
+                                    <Row className="d-flex d-lg-none">
+                                        <Col>
+                                            <p className="fw-lightBold">Currently providing:</p>
+                                        </Col>
+                                    </Row>
+                                    {/* Home category blocks */}
+                                    <Row>
+                                        <Col xs={{ span: 4 }}
+                                            lg={{ span: 4 }}
+                                        >
+                                            <HomeCategory title="Taxonomic Services"
+                                                subTitle="Go find"
+                                                count={254}
+                                                link="/search"
+                                                color="primary"
+                                            />
+                                        </Col>
+                                        <Col xs={{ span: 4 }}
+                                            lg={{ span: 4 }}
+                                        >
+                                            <HomeCategory title="Reference Collections"
+                                                subTitle="Go explore"
+                                                count={84}
+                                                link="/search?taxonomicServiceType=referenceCollection"
+                                                color="secondary"
+                                            />
+                                        </Col>
+                                        <Col xs={{ span: 4 }}
+                                            lg={{ span: 4 }}
+                                        >
+                                            <HomeCategory title="Expertise Taxonomists"
+                                                subTitle="Go engage"
+                                                count={113}
+                                                link="/expertise"
+                                                color="tertiary"
+                                            />
+                                        </Col>
+                                    </Row>
+                                </Col>
+                                <Col lg={{ span: 1 }} className="p-0">
+                                    <div className={`${styles.homeCategoryBar} bgc-grey py-3 d-none d-lg-block`} />
+                                </Col>
+                            </Row>
+                        </Col>
+                    </Row>
+                </Container>
+
+                {/* Render Footer */}
+                <div className="mt-auto">
+                    <Footer />
+                </div>
+            </div>
         </div>
     );
 }
diff --git a/src/components/home/components/HomeCategory.tsx b/src/components/home/components/HomeCategory.tsx
index ca277fc..a72588f 100644
--- a/src/components/home/components/HomeCategory.tsx
+++ b/src/components/home/components/HomeCategory.tsx
@@ -8,6 +8,9 @@ import { Row, Col } from 'react-bootstrap';
 /* Import Styles */
 import styles from '../home.module.scss';
 
+/* Import Components */
+import { Button } from "components/general/CustomComponents";
+
 
 /* Props Type */
 interface Props {
@@ -36,7 +39,7 @@ const HomeCategory = (props: Props) => {
 
     /* ClassNames */
     const hoverDivClass = classNames({
-        [`${styles.homeCategoryBar} bgc-${color} py-3 tr-smooth z-1 position-absolute`]: true,
+        [`${styles.homeCategoryBar} bgc-${color} py-3 tr-smooth z-1 position-absolute d-none d-lg-block`]: true,
         'h-100': active
     });
 
@@ -55,13 +58,21 @@ const HomeCategory = (props: Props) => {
             <Col className="flex-grow-1 z-2 mt-1 p-0">
                 {/* Content of the category */}
                 <Link to={link}>
-                    <Row className="pt-5 pb-5">
-                        <Col className="text-center">
+                    <Row className="py-lg-5">
+                        <Col className="d-flex flex-column justify-content-center text-center">
                             <p className={`${textClass} fs-1 tc-${color} fw-bold tr-smooth`}>
                                 <CountUp end={count} />
                             </p>
                             <p className={`${textClass} fs-subTitle fw-lightBold tr-smooth`}>{title}</p>
-                            <p className={`${textClass} fs-2 fw-lightBold tr-smooth`}>{subTitle}</p>
+
+                            {/* Button on mobile, title on desktop */}
+                            <Button type="button"
+                                variant="blank"
+                                className={`tc-${color} d-block d-lg-none mt-2`}
+                            >
+                                {subTitle}
+                            </Button>
+                            <p className={`${textClass} fs-2 fw-lightBold tr-smooth d-none d-lg-block`}>{subTitle}</p>
                         </Col>
                     </Row>
                 </Link>
diff --git a/src/components/home/components/SearchBar.tsx b/src/components/home/components/SearchBar.tsx
index 51420ad..e482f0b 100644
--- a/src/components/home/components/SearchBar.tsx
+++ b/src/components/home/components/SearchBar.tsx
@@ -7,6 +7,9 @@ import { Row, Col } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 
+/* Import Styles */
+import styles from 'components/home/home.module.scss';
+
 /* Import Components */
 import { QueryBar } from 'components/general/FormComponents';
 
@@ -17,7 +20,7 @@ const SearchBar = () => {
     const navigate = useNavigate();
 
     return (
-        <div className="bgc-white br-corner">
+        <div className={`${styles.searchBar} position-absolute position-lg-static top-0 start-0 w-100 bgc-white br-corner`}>
             <Formik initialValues={{
                 query: ''
             }}
@@ -43,15 +46,6 @@ const SearchBar = () => {
                             >
                                 <FontAwesomeIcon icon={faMagnifyingGlass} />
                             </QueryBar>
-                            {/* <Field name="query"
-                                className="w-100 py-1 px-2"
-                                placeholder="Enter search query"
-                            />
-                            <button type="submit"
-                                className="bgc-none b-none fs-4 position-absolute end-0 me-4"
-                            >
-                                <FontAwesomeIcon icon={faMagnifyingGlass} />
-                            </button> */}
                         </Col>
                     </Row>
                 </Form>
diff --git a/src/components/home/home.module.scss b/src/components/home/home.module.scss
index 53bb362..e2b31ce 100644
--- a/src/components/home/home.module.scss
+++ b/src/components/home/home.module.scss
@@ -1,5 +1,4 @@
 /* Custom styling for the Home page */
-
 .background {
     background:
         url('/webroot/img/homeBackground.jpg');
@@ -10,7 +9,22 @@
     background-position: 0%;
 }
 
+/* Search bar */
+@media only screen and (max-width: 768px) {
+    .searchBar {
+        -webkit-box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
+        -moz-box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
+        box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
+    }
+}
+
 /* Home Category */
 .homeCategoryBar {
     height: 10%;
+}
+
+@media only screen and (min-width: 768px) {
+    .homeCategoryBar {
+        height: 10%;
+    }
 }
\ No newline at end of file

From 71fd2c6e20a5ab372470d3a94e04db229f5a1788 Mon Sep 17 00:00:00 2001
From: TomDijkema <tom.dijkema@naturalis.nl>
Date: Wed, 15 May 2024 12:11:24 +0200
Subject: [PATCH 2/6] Make Search page compatible with mobile devices and make
 Search paginator results reset on refresh of page

Makes the Search page compatible with mobile devices by scaling elements and making the filters triggerable by a button.

Also makes the search results reset on each iteration to not let it build up a pile of search results
---
 src/App.css                                   |  4 +
 src/app/Hooks.ts                              | 55 +++++++++++--
 src/components/general/buttons/Button.tsx     |  5 +-
 src/components/general/header/Header.tsx      |  2 +-
 .../general/header/header.module.scss         |  6 +-
 src/components/search/Search.tsx              | 16 ++--
 .../search/components/FiltersBar.tsx          | 20 ++++-
 .../search/components/SearchResult.tsx        | 26 +++---
 src/components/search/components/TopBar.tsx   | 82 +++++++++++++++----
 src/components/search/search.module.scss      |  7 ++
 src/redux-store/TaxonomicServiceSlice.ts      |  6 +-
 11 files changed, 180 insertions(+), 49 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7be2674..7ff9f15 100644
--- a/src/App.css
+++ b/src/App.css
@@ -100,6 +100,10 @@ p {
   .fs-lg-4 {
     font-size: 0.875rem !important;
   }
+
+  .fs-lg-default {
+    font-size: 1rem;
+  }
   
   .fs-lg-3 {
     font-size: 1.125rem !important;
diff --git a/src/app/Hooks.ts b/src/app/Hooks.ts
index 3d9dfbe..ea000b5 100644
--- a/src/app/Hooks.ts
+++ b/src/app/Hooks.ts
@@ -1,5 +1,5 @@
 /* Import Dependencies */
-import { useEffect, useState } from 'react';
+import { Ref, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
@@ -63,18 +63,58 @@ const useFetch = () => {
 }
 
 
+/**
+ * Focus hook for handling the focus of a specific HTML element
+ * @param ref A React reference to the focussed element
+ * @returns Instance of hook
+ */
+const useFocus = ({ ref, OnFocusLose }: { ref: React.RefObject<HTMLElement>, OnFocusLose?: Function }) => {
+    /* Base variables */
+    const [focusToggle, setFocusToggle] = useState<boolean>(false);
+
+    useEffect(() => {
+        const focusElement = ref.current as HTMLDivElement;
+
+        /**
+         * Function to handle a click outside of the element
+         * @param event The click event initiated by the user
+         */
+        const HandleClickOutside = (event: Dict) => {
+            if (!focusElement.contains(event.target)) {
+                setFocusToggle(false);
+
+                /* Call OnFocusLose function if defined */
+                OnFocusLose?.();
+            }
+        };
+
+        /* Set listener for mouse down (click) events */
+        document.addEventListener("mousedown", HandleClickOutside);
+
+        /* Clean up function */
+        return () => {
+            document.removeEventListener("mousedown", HandleClickOutside);
+        };
+    }, [ref]);
+
+    return {
+        focusToggle
+    };
+}
+
+
 /**
  * Paginator Hook for handling pagination with fetch requests and page numbers
  * @returns Instance of hook
  */
-const usePaginator = ({ Method, Handler, pageSize, key, allowSearchParams = false, currentRecords }:
-    { Method: Function, Handler: Function, pageSize: number, key?: string, allowSearchParams: boolean, currentRecords?: Dict[] }
+const usePaginator = ({ Initiate, Method, Handler, pageSize, key, allowSearchParams = false }:
+    { Initiate: Function, Method: Function, Handler: Function, pageSize: number, key?: string, allowSearchParams: boolean }
 ) => {
     /* Hooks */
     const [searchParams] = useSearchParams();
 
     /* Base variables */
-    const [records, setRecords] = useState<Dict[]>(currentRecords ?? []);
+    const [records, setRecords] = useState<Dict[]>([]);
     const [links, setLinks] = useState<Dict>({});
     const [pageNumber, setPageNumber] = useState<number>(1);
     const [loading, setLoading] = useState<boolean>(false);
@@ -107,6 +147,11 @@ const usePaginator = ({ Method, Handler, pageSize, key, allowSearchParams = fals
         }
     };
 
+    /* Initial setup */
+    useEffect(() => {
+        Initiate();
+    }, []);
+
     useEffect(() => {
         /* Set Loading to true */
         setLoading(true);
@@ -144,8 +189,8 @@ const usePaginator = ({ Method, Handler, pageSize, key, allowSearchParams = fals
     };
 };
 
-
 export {
     useFetch,
+    useFocus,
     usePaginator
 }
\ No newline at end of file
diff --git a/src/components/general/buttons/Button.tsx b/src/components/general/buttons/Button.tsx
index 46948a0..5765103 100644
--- a/src/components/general/buttons/Button.tsx
+++ b/src/components/general/buttons/Button.tsx
@@ -28,12 +28,13 @@ const Button = (props: Props) => {
     /* ClassNames */
     const buttonClass = classNames({
         'px-4 py-2': variant !== 'blank',
-        [`${className}`]: className
+        [`${className}`]: className,
+        'fs-4': !className?.includes('fs')
     });
 
     return (
         <button type={type}
-            className={`${styles.button} ${styles[variant]} ${buttonClass} fs-4 fw-bold b-none br-round`}
+            className={`${styles.button} ${styles[variant]} ${buttonClass} fw-bold b-none br-round`}
             onClick={() => OnClick?.()}
         >
             {children ?? ''}
diff --git a/src/components/general/header/Header.tsx b/src/components/general/header/Header.tsx
index e0fe1b1..f1f58ce 100644
--- a/src/components/general/header/Header.tsx
+++ b/src/components/general/header/Header.tsx
@@ -30,7 +30,7 @@ const Header = () => {
                             <h2 className="w-auto fs-3 fs-lg-2 tc-primary fw-bold">
                                 Marketplace Prototype
                             </h2>
-                            <h3 className="fs-4 tc-grey fw-lightBold">
+                            <h3 className="fs-4 fs-lg-3 tc-grey fw-lightBold">
                                 The Taxonomic Expertise and Services Marketplace
                             </h3>
                         </Col>
diff --git a/src/components/general/header/header.module.scss b/src/components/general/header/header.module.scss
index 2de9702..a752590 100644
--- a/src/components/general/header/header.module.scss
+++ b/src/components/general/header/header.module.scss
@@ -2,9 +2,9 @@
 @media only screen and (max-width: 768px) {
     .header {
         position: sticky;
-        -webkit-box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
-        -moz-box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
-        box-shadow: 1px 7px 15px -7px rgba(0, 0, 0, 0.75);
+        -webkit-box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
+        -moz-box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
+        box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
     }
 }
 
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
index aa13a02..76fb896 100644
--- a/src/components/search/Search.tsx
+++ b/src/components/search/Search.tsx
@@ -7,7 +7,7 @@ import { useSearchParams } from 'react-router-dom';
 import { usePaginator, useAppSelector, useAppDispatch } from 'app/Hooks';
 
 /* Import Store */
-import { getTaxonomicServices, setTaxonomicServices } from 'redux-store/TaxonomicServiceSlice';
+import { getTaxonomicServices, setTaxonomicServices, concatToTaxonomicServices } from 'redux-store/TaxonomicServiceSlice';
 
 /* Import Types */
 import { TaxonomicService } from 'app/Types';
@@ -37,15 +37,15 @@ const Search = () => {
     const taxonomicServices = useAppSelector(getTaxonomicServices);
 
     const paginator = usePaginator({
+        Initiate: () => dispatch(setTaxonomicServices([])),
         Method: GetTaxonomicServices,
-        Handler: (newTaxonomicServices: TaxonomicService[]) => {
-            /* On receivel of a new page with records, add them to the total */
-            dispatch(setTaxonomicServices([...taxonomicServices, ...newTaxonomicServices]));
+        Handler: (taxonomicServices: TaxonomicService[]) => {
+            /* On receival of a new page with records, add them to the total */
+            dispatch(concatToTaxonomicServices(taxonomicServices));
         },
         pageSize: 12,
         key: 'taxonomicServices',
-        allowSearchParams: true,
-        currentRecords: taxonomicServices
+        allowSearchParams: true
     });
 
     /* ClassNames */
@@ -63,7 +63,7 @@ const Search = () => {
             <Container fluid className={`${mainBodyClass} flex-grow-1 overflow-hidden tr-smooth`}>
                 <Row className="h-100">
                     <Col lg={{ span: 10, offset: 1 }}
-                        className="h-100 d-flex flex-column pt-5"
+                        className="h-100 d-flex flex-column pt-5 px-4 px-lg-3"
                     >
                         {/* Top Bar */}
                         <Row>
@@ -72,7 +72,7 @@ const Search = () => {
                             </Col>
                         </Row>
                         {/* Filters Bar */}
-                        <Row className="mt-3">
+                        <Row className="mt-3 d-none d-lg-flex">
                             <Col>
                                 <FiltersBar />
                             </Col>
diff --git a/src/components/search/components/FiltersBar.tsx b/src/components/search/components/FiltersBar.tsx
index 851bebf..356f5cd 100644
--- a/src/components/search/components/FiltersBar.tsx
+++ b/src/components/search/components/FiltersBar.tsx
@@ -18,13 +18,21 @@ import { QueryBar } from 'components/general/FormComponents';
 import Filter from './Filter';
 
 
+/* Props Type */
+type Props = {
+    ToggleFilters?: Function
+};
+
+
 /** Component that renders the Filters Bar on the Search page, it contains:
  * search bar (input)
  * taxonomic scope filter (select)
  * publishing date filter (select)
  * language filter (select)
 */
-const FiltersBar = () => {
+const FiltersBar = (props: Props) => {
+    const { ToggleFilters } = props;
+
     /* Hooks */
     const [searchParams, setSearchParams] = useSearchParams();
 
@@ -58,13 +66,19 @@ const FiltersBar = () => {
                 });
 
                 setSearchParams(searchParams);
+
+                /* On mobile, close filters */
+                ToggleFilters?.();
             }}
         >
             {({ values, setFieldValue, submitForm }) => (
                 <Form>
                     <Row>
                         {/* Search Bar */}
-                        <Col lg={{ span: 4 }}>
+                        <Col xs={{ span: 12 }} 
+                            lg={{ span: 4 }}
+                            className="mb-4 mb-lg-0"
+                        >
                             <QueryBar name="query"
                                 placeholder="Enter a search query"
                             >
@@ -76,7 +90,9 @@ const FiltersBar = () => {
                             <Row>
                                 {filters.map((filter) => (
                                     <Col key={filter.name}
+                                        xs={{ span: 12 }}
                                         lg={{ span: 4 }}
+                                        className="mb-2"
                                     >
                                         <Filter filter={filter}
                                             currentValue={values[filter.name as keyof typeof values]}
diff --git a/src/components/search/components/SearchResult.tsx b/src/components/search/components/SearchResult.tsx
index a2841b0..63e9e54 100644
--- a/src/components/search/components/SearchResult.tsx
+++ b/src/components/search/components/SearchResult.tsx
@@ -55,12 +55,12 @@ const SearchResult = (props: Props) => {
 
     /* ClassNames */
     const imageColClass = classNames({
-        'd-none': !previewImage,
-        'd-block': previewImage
+        'd-none d-lg-none': !previewImage,
+        'd-none d-lg-flex': previewImage
     });
 
     return (
-        <div className={`${styles.searchResult} w-100 bgc-white mt-1 pt-3 pb-2 px-3`}>
+        <div className={`${styles.searchResult} w-100 bgc-white mt-lg-1 pt-3 pb-2 px-3`}>
             <button type="button"
                 className="button-no-style"
                 onClick={() => SelectTaxonomicService(taxonomicService)}
@@ -71,12 +71,12 @@ const SearchResult = (props: Props) => {
                         {/* Title and language if image is not present */}
                         <Row>
                             <Col>
-                                <p className="fw-bold">{taxonomicService.taxonomicService['erp:name']}</p>
-                                <p className="fs-4 fst-italic">{taxonomicService.taxonomicService['cetaf:taxonomicScope']?.toString()}</p>
+                                <p className="fs-4 fs-lg-3 fs-lg-default fw-bold">{taxonomicService.taxonomicService['erp:name']}</p>
+                                <p className="fs-5 fs-lg-4 fst-italic">{taxonomicService.taxonomicService['cetaf:taxonomicScope']?.toString()}</p>
                             </Col>
-                            {!previewImage &&
-                                <Col className="col-lg-auto">
-                                    <p className="fw-bold fs-4">{taxonomicService.taxonomicService['erp:languageAvailabilities']?.join(' / ').toUpperCase()}</p>
+                            {(!previewImage || window.innerWidth < 768) &&
+                                <Col xs="auto" lg="auto">
+                                    <p className="fw-bold fs-5 fs-lg-4">{taxonomicService.taxonomicService['erp:languageAvailabilities']?.join(' / ').toUpperCase()}</p>
                                 </Col>
                             }
                         </Row>
@@ -89,18 +89,18 @@ const SearchResult = (props: Props) => {
                         {/* Service Type and Publishing Date if preview image is not present */}
                         <Row>
                             <Col>
-                                <p className="fs-4">{MakeReadableString(taxonomicService.taxonomicService['cetaf:taxonomicServiceType'] ?? 'Taxonomic Service')}</p>
+                                <p className="fs-5 fs-lg-4">{MakeReadableString(taxonomicService.taxonomicService['cetaf:taxonomicServiceType'] ?? 'Taxonomic Service')}</p>
                             </Col>
-                            {!previewImage &&
-                                <Col className="col-lg-auto">
-                                    <p className="fs-4 fw-bold">{moment(taxonomicService.taxonomicService['ods:created']).format('MMM DD - YYYY')}</p>
+                            {(!previewImage || window.innerWidth < 768) &&
+                                <Col xs="auto" lg="auto">
+                                    <p className="fs-5 fs-lg-4 fw-bold">{moment(taxonomicService.taxonomicService['ods:created']).format('MMM DD - YYYY')}</p>
                                 </Col>
                             }
                         </Row>
                     </Col>
                     {/* If preview image is present, render this additional column which takes over some details from the original one */}
                     <Col lg={{ span: 4 }}
-                        className={`${imageColClass} h-100 d-flex flex-column`}
+                        className={`${imageColClass} h-100 flex-column`}
                         style={{
                             backgroundImage: `Url(${previewImage})`,
                             backgroundColor: '#333333',
diff --git a/src/components/search/components/TopBar.tsx b/src/components/search/components/TopBar.tsx
index 4e5f015..df6ed70 100644
--- a/src/components/search/components/TopBar.tsx
+++ b/src/components/search/components/TopBar.tsx
@@ -1,8 +1,21 @@
 /* Import Dependencies */
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import { useState, useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Row, Col } from 'react-bootstrap';
 
+/* Import Hooks */
+import { useFocus } from 'app/Hooks';
+
+/* Import Icons */
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
+
+/* Import Styles */
+import styles from 'components/search/search.module.scss';
+
 /* Import Components */
+import FiltersBar from './FiltersBar';
 import { Button } from 'components/general/CustomComponents';
 
 
@@ -14,22 +27,63 @@ const TopBar = () => {
     const navigate = useNavigate();
     const [searchParams] = useSearchParams();
 
+    /* Base variables */
+    const [filtersToggle, setFiltersToggle] = useState<boolean>(false);
+
+    /* Create ref and focus for mobile filters */
+    const filtersRef = useRef<HTMLDivElement>(null);
+    const filtersFocus = useFocus({ ref: filtersRef, OnFocusLose: () => setFiltersToggle(false) });
+
+    /* Class Names */
+    const filtersClass = classNames({
+        [`${styles.topBarFilters}`]: true,
+        'd-none': !filtersToggle,
+        'd-block': filtersToggle
+    });
+
     return (
-        <Row>
-            <Col>
-                <h1 className="fs-2 fw-lightBold">
-                    Browse the catalog
-                </h1>
-            </Col>
-            <Col className="col-lg-auto">
-                <Button type="button"
-                    variant={searchParams.get('taxonomicServiceType') === 'referenceCollection' ? 'secondary': 'primary'}
-                    OnClick={() => navigate('/ts/add')}
+        <div className="position-relative">
+            <Row>
+                <Col xs={{ span: 12 }} lg>
+                    <h1 className="fs-2 fs-lg-2 fw-lightBold">
+                        Browse the catalog
+                    </h1>
+                </Col>
+                {/* Display filters menu, if device is mobile */}
+                <Col xs
+                    className="d-block d-lg-none mt-3"
+                >
+                    <Button type="button"
+                        variant={searchParams.get('taxonomicServiceType') === 'referenceCollection' ? 'secondary' : 'primary'}
+                        className="fs-5"
+                        OnClick={() => setFiltersToggle(!filtersToggle)}
+                    >
+                        <>
+                            <span className="pe-2">Filters</span>
+                            <FontAwesomeIcon icon={faFilter} />
+                        </>
+                    </Button>
+
+                    {/* Absolute position filters bar */}
+                    <div ref={filtersRef}
+                        className={`${filtersClass} position-absolute z-1 bgc-grey-light mt-3 px-3 py-3`}
+                    >
+                        <FiltersBar ToggleFilters={() => setFiltersToggle(!filtersToggle)} />
+                    </div>
+                </Col>
+                <Col xs="auto" lg="auto"
+                    className="mt-3 mt-lg-0"
                 >
-                    Suggest a new service
-                </Button>
-            </Col>
-        </Row>
+                    <Button type="button"
+                        variant={searchParams.get('taxonomicServiceType') === 'referenceCollection' ? 'secondary' : 'primary'}
+                        className="fs-5 fs-lg-4"
+                        OnClick={() => navigate('/ts/add')}
+                    >
+                        Suggest a new service
+                    </Button>
+                </Col>
+            </Row>
+        </div>
     );
 }
 
diff --git a/src/components/search/search.module.scss b/src/components/search/search.module.scss
index 8b8f011..9600479 100644
--- a/src/components/search/search.module.scss
+++ b/src/components/search/search.module.scss
@@ -1,5 +1,12 @@
 /* Custom styles for Components on the Search page */
 
+/* Top Bar */
+.topBarFilters {
+    -webkit-box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
+    -moz-box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
+    box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
+}
+
 /* Search Result */
 .searchResult {
     height: 10.5rem;
diff --git a/src/redux-store/TaxonomicServiceSlice.ts b/src/redux-store/TaxonomicServiceSlice.ts
index 11c6c55..bf17005 100644
--- a/src/redux-store/TaxonomicServiceSlice.ts
+++ b/src/redux-store/TaxonomicServiceSlice.ts
@@ -25,6 +25,9 @@ export const TaxonomicServiceSlice = createSlice({
         },
         setTaxonomicServices: (state, action: PayloadAction<TaxonomicService[]>) => {
             state.taxonomicServices = action.payload;
+        },
+        concatToTaxonomicServices: (state, action: PayloadAction<TaxonomicService[]>) => {
+            state.taxonomicServices = state.taxonomicServices.concat(action.payload);
         }
     }
 })
@@ -32,7 +35,8 @@ export const TaxonomicServiceSlice = createSlice({
 /* Action Creators */
 export const {
     setTaxonomicService,
-    setTaxonomicServices
+    setTaxonomicServices,
+    concatToTaxonomicServices
 } = TaxonomicServiceSlice.actions;
 
 /* Connect with Root State */

From 666e7b0ef245d4efe24460270a4b6fef1f24fa5f Mon Sep 17 00:00:00 2001
From: TomDijkema <tom.dijkema@naturalis.nl>
Date: Wed, 15 May 2024 13:35:03 +0200
Subject: [PATCH 3/6] Make Taxonomic Service page compatible with mobile
 devices

Makes the taxonomic service page compatible with mobile devices
---
 src/App.css                                   |  2 +-
 .../search/components/SearchResult.tsx        |  2 +-
 .../taxonomicService/TaxonomicService.tsx     | 20 ++++++++++----
 .../components/DescriptionBlock.tsx           | 26 ++++++++++++-------
 .../taxonomicService/components/TopBar.tsx    | 11 +++++---
 .../taxonomicService.module.scss              | 12 +++++++--
 6 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7ff9f15..4d4241b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -102,7 +102,7 @@ p {
   }
 
   .fs-lg-default {
-    font-size: 1rem;
+    font-size: 1rem !important;
   }
   
   .fs-lg-3 {
diff --git a/src/components/search/components/SearchResult.tsx b/src/components/search/components/SearchResult.tsx
index 63e9e54..f2111de 100644
--- a/src/components/search/components/SearchResult.tsx
+++ b/src/components/search/components/SearchResult.tsx
@@ -71,7 +71,7 @@ const SearchResult = (props: Props) => {
                         {/* Title and language if image is not present */}
                         <Row>
                             <Col>
-                                <p className="fs-4 fs-lg-3 fs-lg-default fw-bold">{taxonomicService.taxonomicService['erp:name']}</p>
+                                <p className="fs-4 fs-lg-default fw-bold">{taxonomicService.taxonomicService['erp:name']}</p>
                                 <p className="fs-5 fs-lg-4 fst-italic">{taxonomicService.taxonomicService['cetaf:taxonomicScope']?.toString()}</p>
                             </Col>
                             {(!previewImage || window.innerWidth < 768) &&
diff --git a/src/components/taxonomicService/TaxonomicService.tsx b/src/components/taxonomicService/TaxonomicService.tsx
index ecb6270..e55cbfc 100644
--- a/src/components/taxonomicService/TaxonomicService.tsx
+++ b/src/components/taxonomicService/TaxonomicService.tsx
@@ -58,7 +58,7 @@ const TaxonomicService = () => {
             <Container fluid className="flex-grow-1 overflow-hidden">
                 <Row className="h-100">
                     <Col lg={{ span: 10, offset: 1 }}
-                        className="h-100 d-flex flex-column pt-5"
+                        className="h-100 d-flex flex-column pt-5 px-4 px-lg-3"
                     >
                         {/* If data is still being loaded after 1.5 seconds, display spinner */}
                         {fetch.loading &&
@@ -97,7 +97,9 @@ const TaxonomicService = () => {
                                         </Row>
                                         {/* Detail blocks */}
                                         <Row className={`${detailBlocksClass} mt-4`}>
-                                            <Col lg={{ span: 3 }}>
+                                            <Col xs={{ span: 12 }}
+                                                lg={{ span: 3 }}
+                                            >
                                                 <DetailsBlock name="Service Details"
                                                     properties={{
                                                         category: taxonomicService.taxonomicService['erp:category'],
@@ -109,7 +111,10 @@ const TaxonomicService = () => {
                                                     }}
                                                 />
                                             </Col>
-                                            <Col lg={{ span: 3 }}>
+                                            <Col xs={{ span: 12 }}
+                                                lg={{ span: 3 }}
+                                                className="mt-4 mt-lg-0"
+                                            >
                                                 <DetailsBlock name="Contact Information"
                                                     properties={{
                                                         helpdeskEmail: taxonomicService.taxonomicService['erp:helpdeskEmail'],
@@ -122,7 +127,10 @@ const TaxonomicService = () => {
                                             </Col>
                                             {/* Show software details if software object is present in taxonomic service */}
                                             {taxonomicService.taxonomicService['cetaf:software'] &&
-                                                <Col lg={{ span: 3 }}>
+                                                <Col xs={{ span: 12 }}
+                                                    lg={{ span: 3 }}
+                                                    className="mt-4 mt-lg-0"
+                                                >
                                                     <DetailsBlock name="Software"
                                                         properties={{
                                                             sourceUrl: taxonomicService.taxonomicService['cetaf:software']['cetaf:sourceUrl'],
@@ -135,7 +143,9 @@ const TaxonomicService = () => {
                                             }
                                             {/* Show multimedia block, if multimedia is present */}
                                             {taxonomicService.taxonomicService['erp:multimedia'] &&
-                                                <Col>
+                                                <Col xs={{ span: 12 }} lg
+                                                    className="mt-4 mt-lg-0"
+                                                >
                                                     <MultimediaBlock multimediaItems={taxonomicService.taxonomicService['erp:multimedia']} />
                                                 </Col>
                                             }
diff --git a/src/components/taxonomicService/components/DescriptionBlock.tsx b/src/components/taxonomicService/components/DescriptionBlock.tsx
index 7464c6c..dc39155 100644
--- a/src/components/taxonomicService/components/DescriptionBlock.tsx
+++ b/src/components/taxonomicService/components/DescriptionBlock.tsx
@@ -41,8 +41,8 @@ const DescriptionBlock = (props: Props) => {
             <Row className="h-100">
                 {/* Preview image, if available */}
                 {taxonomicService.taxonomicService['erp:multimedia']?.length &&
-                    <Col lg={{ span: 3 }}
-                        className="h-100 bgc-white me-3"
+                    <Col xs={{ span: 12 }} lg={{ span: 3 }}
+                        className="h-100 bgc-white me-3 mb-3 mb-lg-0"
                     >
                         <div className={`${styles.imageBackground} h-100 w-100 d-flex justify-content-center `}>
                             <img src={taxonomicService.taxonomicService['erp:multimedia'][0]['erp:multimediaUrl']}
@@ -57,28 +57,34 @@ const DescriptionBlock = (props: Props) => {
                     {/* Tyoe, taxonomic scope, language, publishing date and quality score */}
                     <Row className="justify-content-between">
                         {/* Type */}
-                        <Col className="col-lg-auto">
+                        <Col xs={{ span: 12 }} lg="auto">
                             <p className="fs-5 fw-bold">Taxonomic service type</p>
                             <p className="tc-primary fw-bold">{MakeReadableString(taxonomicService.taxonomicService['cetaf:taxonomicServiceType'])}</p>
                         </Col>
                         {/* Taxonomic scope */}
-                        <Col className="col-lg-auto">
+                        <Col xs={{ span: 12 }} lg="auto"
+                            className="mt-2 mt-lg-0"
+                        >
                             <p className="fs-5 fw-bold">Taxonomic scope</p>
                             <p>{taxonomicService.taxonomicService['cetaf:taxonomicScope']?.join(' / ')}</p>
                         </Col>
                         {/* Languages */}
-                        <Col className="col-lg-auto">
+                        <Col xs={{ span: 12 }} lg="auto"
+                            className="mt-2 mt-lg-0"
+                        >
                             <p className="fs-5 fw-bold">Supporting languages</p>
                             <p>{taxonomicService.taxonomicService['erp:languageAvailabilities'].join(' / ')}</p>
                         </Col>
                         {/* Publishing date */}
-                        <Col className="col-lg-auto">
+                        <Col xs={{ span: 12 }} lg="auto"
+                            className="mt-2 mt-lg-0"
+                        >
                             <p className="fs-5 fw-bold">Publishing date</p>
                             <p>{moment(taxonomicService.taxonomicService['ods:created']).format('MMM DD - YYYY')}</p>
                         </Col>
                         {/* Quality score */}
-                        <Col lg={{ span: 3 }}
-                            className="py-1"
+                        <Col xs={{ span: 12 }} lg={{ span: 3 }}
+                            className="mt-3 mt-lg-0 py-1"
                         >
                             <div className="position-relative h-100 d-flex align-items-center bgc-grey-light">
                                 <p className="position-relative w-100 text-center fs-4 fw-lightBold z-2">Quality score</p>
@@ -90,9 +96,9 @@ const DescriptionBlock = (props: Props) => {
                         </Col>
                     </Row>
                     {/* Description */}
-                    <Row className="flex-grow-1 mt-4">
+                    <Row className="flex-grow-1 mt-3 mt-lg-4">
                         <Col className="h-100 d-flex flex-column">
-                            <p className="fw-bold">Description</p>
+                            <p className="fs-4 fs-lg-default fw-bold">Description</p>
 
                             <div className="flex-grow-1 mt-1 overflow-scroll">
                                 <p className="fs-4">{taxonomicService.taxonomicService['erp:description']}</p>
diff --git a/src/components/taxonomicService/components/TopBar.tsx b/src/components/taxonomicService/components/TopBar.tsx
index fc86277..5bf5523 100644
--- a/src/components/taxonomicService/components/TopBar.tsx
+++ b/src/components/taxonomicService/components/TopBar.tsx
@@ -42,14 +42,17 @@ const TopBar = (props: Props) => {
     return (
         <Row>
             {/* State and Title */}
-            <Col>
-                <p className="fs-3">{stateTagLine}</p>
-                <h1 className="fs-2">{taxonomicService.taxonomicService['erp:name']}</h1>
+            <Col xs={{span: 12}} lg>
+                <p className="fs-4 fs-lg-3">{stateTagLine}</p>
+                <h1 className="fs-3 fs-lg-2">{taxonomicService.taxonomicService['erp:name']}</h1>
             </Col>
             {/* Apply for usage button */}
-            <Col className="col-lg-auto">
+            <Col xs lg="auto"
+                className="mt-3 mt-lg-0"
+            >
                 <Button type="button"
                     variant="primary"
+                    className="fs-5 fs-lg-4"
                     OnClick={() => {}}
                 >
                     Apply for usage
diff --git a/src/components/taxonomicService/taxonomicService.module.scss b/src/components/taxonomicService/taxonomicService.module.scss
index 9f871bb..96fd15c 100644
--- a/src/components/taxonomicService/taxonomicService.module.scss
+++ b/src/components/taxonomicService/taxonomicService.module.scss
@@ -7,9 +7,17 @@
             var(--grey) 20px);
 }
 
+@media only screen and (max-width: 768px) {
+    .imageBackground {
+        height: 10rem !important;
+    }
+}
+
 /* Description block */
-.descriptionBlock {
-    height: 13rem;
+@media only screen and (min-width: 768px) {
+    .descriptionBlock {
+        height: 13rem;
+    }
 }
 
 /* Multimedia block */

From 607002e83bea4327674adb1d73dac9c94977ff93 Mon Sep 17 00:00:00 2001
From: TomDijkema <tom.dijkema@naturalis.nl>
Date: Wed, 15 May 2024 14:05:45 +0200
Subject: [PATCH 4/6] Data model update and small fixes to existing components

Updates the data model with the latest information and fixes small issues and lacks with existing components
---
 src/app/types/TaxonomicService.d.ts           | 10 +++++++-
 .../general/header/header.module.scss         |  9 -------
 src/components/search/components/TopBar.tsx   |  4 ++--
 .../taxonomicService/TaxonomicService.tsx     | 24 +++++++++++++++----
 .../taxonomicService/components/TopBar.tsx    | 10 +++-----
 src/sources/dataModel/taxonomic_service.json  | 20 +++++++++++++---
 src/sources/mock/ReferenceCollection.json     |  2 +-
 .../mock/TaxonomicServiceAccepted.json        |  7 ++++--
 .../mock/TaxonomicServiceSuggested.json       |  2 +-
 9 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/app/types/TaxonomicService.d.ts b/src/app/types/TaxonomicService.d.ts
index d605681..e9dabd0 100644
--- a/src/app/types/TaxonomicService.d.ts
+++ b/src/app/types/TaxonomicService.d.ts
@@ -14,7 +14,7 @@ export interface TaxonomicService {
    */
   "erp:id": string;
   /**
-   * The timestamp that the object version was created in DiSSCo
+   * The timestamp that the object version was created
    */
   "ods:created": string;
   /**
@@ -137,6 +137,10 @@ export interface TaxonomicService {
      * Summary of the Resource features updated from the previous version.
      */
     "erp:changeLog"?: string;
+    /**
+     * List of programming lanugages used in the software
+     */
+    "cetaf:programmingLanguages"?: string[];
     [k: string]: unknown;
   };
   /**
@@ -147,6 +151,10 @@ export interface TaxonomicService {
      * Link to video, screenshots or slides showing details of the Resource.
      */
     "erp:multimediaUrl": string;
+    /**
+     * http://purl.org/dc/terms/license
+     */
+    "dcterms:license"?: string;
     [k: string]: unknown;
   }[];
   [k: string]: unknown;
diff --git a/src/components/general/header/header.module.scss b/src/components/general/header/header.module.scss
index a752590..e9e6cdc 100644
--- a/src/components/general/header/header.module.scss
+++ b/src/components/general/header/header.module.scss
@@ -1,13 +1,4 @@
 /* Custom styling for the Header component */
-@media only screen and (max-width: 768px) {
-    .header {
-        position: sticky;
-        -webkit-box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
-        -moz-box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
-        box-shadow: 1px 3px 25px -8px rgba(51, 51, 51, 1);
-    }
-}
-
 .CETAFLogo {
     height: 4rem;
 }
\ No newline at end of file
diff --git a/src/components/search/components/TopBar.tsx b/src/components/search/components/TopBar.tsx
index df6ed70..3d686d9 100644
--- a/src/components/search/components/TopBar.tsx
+++ b/src/components/search/components/TopBar.tsx
@@ -45,7 +45,7 @@ const TopBar = () => {
         <div className="position-relative">
             <Row>
                 <Col xs={{ span: 12 }} lg>
-                    <h1 className="fs-2 fs-lg-2 fw-lightBold">
+                    <h1 className="fs-3 fs-lg-2 fw-lightBold">
                         Browse the catalog
                     </h1>
                 </Col>
@@ -77,7 +77,7 @@ const TopBar = () => {
                     <Button type="button"
                         variant={searchParams.get('taxonomicServiceType') === 'referenceCollection' ? 'secondary' : 'primary'}
                         className="fs-5 fs-lg-4"
-                        OnClick={() => navigate('/ts/add')}
+                        OnClick={() => window.open('https://dissco.jitbit.com/helpdesk/User/Login', '_blank')}
                     >
                         Suggest a new service
                     </Button>
diff --git a/src/components/taxonomicService/TaxonomicService.tsx b/src/components/taxonomicService/TaxonomicService.tsx
index e55cbfc..a09226c 100644
--- a/src/components/taxonomicService/TaxonomicService.tsx
+++ b/src/components/taxonomicService/TaxonomicService.tsx
@@ -1,7 +1,7 @@
 /* Import Dependencies */
 import classNames from 'classnames';
 import moment from 'moment';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Container, Row, Col } from 'react-bootstrap';
 
 /* Import Hooks */
@@ -20,7 +20,7 @@ import DescriptionBlock from './components/DescriptionBlock';
 import DetailsBlock from './components/DetailsBlock';
 import MultimediaBlock from './components/MultimediaBlock';
 import Footer from 'components/general/footer/Footer';
-import { Spinner } from 'components/general/CustomComponents';
+import { Button, Spinner } from 'components/general/CustomComponents';
 
 /* Import API */
 import GetTaxonomicService from 'api/taxonomicService/GetTaxonomicService';
@@ -29,6 +29,7 @@ import GetTaxonomicService from 'api/taxonomicService/GetTaxonomicService';
 const TaxonomicService = () => {
     /* Hooks */
     const dispatch = useAppDispatch();
+    const navigate = useNavigate();
     const params = useParams();
     const fetch = useFetch();
 
@@ -58,7 +59,7 @@ const TaxonomicService = () => {
             <Container fluid className="flex-grow-1 overflow-hidden">
                 <Row className="h-100">
                     <Col lg={{ span: 10, offset: 1 }}
-                        className="h-100 d-flex flex-column pt-5 px-4 px-lg-3"
+                        className="h-100 d-flex flex-column pt-3 pt-lg-5 px-4 px-lg-3"
                     >
                         {/* If data is still being loaded after 1.5 seconds, display spinner */}
                         {fetch.loading &&
@@ -80,8 +81,20 @@ const TaxonomicService = () => {
                         {/* If taxonomic service is present */}
                         {taxonomicService &&
                             <>
+                                {/* MOBILE: Back to search button */}
+                                <Row className="d-lg-none">
+                                    <Col>
+                                        <Button type="button"
+                                            variant="blank"
+                                            className="px-0"
+                                            OnClick={() => navigate(-1)}
+                                        >
+                                            {`< Back to search`}
+                                        </Button>
+                                    </Col>
+                                </Row>
                                 {/* Top bar */}
-                                <Row>
+                                <Row className="mt-3 pt-lg-0">
                                     <Col>
                                         <TopBar taxonomicService={taxonomicService} />
                                     </Col>
@@ -136,7 +149,8 @@ const TaxonomicService = () => {
                                                             sourceUrl: taxonomicService.taxonomicService['cetaf:software']['cetaf:sourceUrl'],
                                                             requiredResources: taxonomicService.taxonomicService['cetaf:software']['erp:requiredResources'],
                                                             status: taxonomicService.taxonomicService['cetaf:software']['cetaf:deprecated'] ? 'Deprecated' : 'Maintained',
-                                                            changeLog: taxonomicService.taxonomicService['cetaf:software']['erp:changeLog']
+                                                            changeLog: taxonomicService.taxonomicService['cetaf:software']['erp:changeLog'],
+                                                            programmingLanguages: taxonomicService.taxonomicService['cetaf:software']['cetaf:programmingLanguages']
                                                         }}
                                                     />
                                                 </Col>
diff --git a/src/components/taxonomicService/components/TopBar.tsx b/src/components/taxonomicService/components/TopBar.tsx
index 5bf5523..4b11d15 100644
--- a/src/components/taxonomicService/components/TopBar.tsx
+++ b/src/components/taxonomicService/components/TopBar.tsx
@@ -25,16 +25,12 @@ const TopBar = (props: Props) => {
 
     /* Define the state tag line */
     switch(taxonomicService.taxonomicService['cetaf:state']) {
-        case 'accepted':
+        case 'published':
             stateTagLine = 'Published and visible';
 
-            break;
-        case 'rejected':
-            stateTagLine = 'Rejected and hidden'
-
             break;
         default:
-            stateTagLine = 'Proposed and hidden';
+            stateTagLine = 'Draft and hidden';
 
             break;
     }
@@ -53,7 +49,7 @@ const TopBar = (props: Props) => {
                 <Button type="button"
                     variant="primary"
                     className="fs-5 fs-lg-4"
-                    OnClick={() => {}}
+                    OnClick={() => window.open(`https://${taxonomicService.taxonomicService['erp:helpdeskPage']?.replace('http://', '').replace('https://', '')}`, '_blank')}
                 >
                     Apply for usage
                 </Button>
diff --git a/src/sources/dataModel/taxonomic_service.json b/src/sources/dataModel/taxonomic_service.json
index 6c37adb..5a55f81 100644
--- a/src/sources/dataModel/taxonomic_service.json
+++ b/src/sources/dataModel/taxonomic_service.json
@@ -41,9 +41,8 @@
             "type": "string",
             "description": "The current state of the object",
             "examples": [
-                "suggested",
-                "accepted",
-                "rejected"
+                "draft",
+                "published"
             ]
         },
         "erp:languageAvailabilities": {
@@ -253,6 +252,16 @@
                     "examples": [
                         "Upgrade of user interface. Correction of minor bugs."
                     ]
+                },
+                "cetaf:programmingLanguages": {
+                    "type": "array",
+                    "description": "List of programming lanugages used in the software",
+                    "items": {
+                        "type": "string"
+                    },
+                    "examples": [
+                        ["Java", "Python", "R"]
+                    ]
                 }
             },
             "required": [
@@ -268,6 +277,11 @@
                     "erp:multimediaUrl": {
                         "type": "string",
                         "description": "Link to video, screenshots or slides showing details of the Resource."
+                    },
+                    "dcterms:license": {
+                        "type": "string",
+                        "description": "http://purl.org/dc/terms/license",
+                        "$comment": "Determine available licenses"
                     }
                 },
                 "required": [
diff --git a/src/sources/mock/ReferenceCollection.json b/src/sources/mock/ReferenceCollection.json
index 4db62f2..30afffe 100644
--- a/src/sources/mock/ReferenceCollection.json
+++ b/src/sources/mock/ReferenceCollection.json
@@ -9,7 +9,7 @@
                 "dcterms:modified": "2024-05-01T11:31:26.038070Z",
                 "ods:type": "taxonomic_service",
                 "dcterms:license": "CC0",
-                "cetaf:state": "accepted",
+                "cetaf:state": "published",
                 "erp:languageAvailabilities": [
                     "en"
                 ],
diff --git a/src/sources/mock/TaxonomicServiceAccepted.json b/src/sources/mock/TaxonomicServiceAccepted.json
index 04ae95d..41ca989 100644
--- a/src/sources/mock/TaxonomicServiceAccepted.json
+++ b/src/sources/mock/TaxonomicServiceAccepted.json
@@ -9,7 +9,7 @@
                 "dcterms:modified": "2024-05-01T11:31:26.038070Z",
                 "ods:type": "taxonomic_service",
                 "dcterms:license": "CC0",
-                "cetaf:state": "accepted",
+                "cetaf:state": "published",
                 "erp:languageAvailabilities": [
                     "en"
                 ],
@@ -49,7 +49,10 @@
                         "Pollinator library"
                     ],
                     "cetaf:deprecated": false,
-                    "erp:changeLog": "Fixed a bug"
+                    "erp:changeLog": "Fixed a bug",
+                    "cetaf:programmingLanguages": [
+                        "JavaScript"
+                    ]
                 }
             }
         }
diff --git a/src/sources/mock/TaxonomicServiceSuggested.json b/src/sources/mock/TaxonomicServiceSuggested.json
index 81d57c1..0dff0a7 100644
--- a/src/sources/mock/TaxonomicServiceSuggested.json
+++ b/src/sources/mock/TaxonomicServiceSuggested.json
@@ -9,7 +9,7 @@
                 "dcterms:modified": "2024-05-01T11:31:26.038070Z",
                 "ods:type": "taxonomic_service",
                 "dcterms:license": "CC0",
-                "cetaf:state": "accepted",
+                "cetaf:state": "draft",
                 "erp:languageAvailabilities": [
                     "en"
                 ],

From 58585c74fd3c133ae74a35868cc95cc09bade210 Mon Sep 17 00:00:00 2001
From: TomDijkema <tom.dijkema@naturalis.nl>
Date: Wed, 15 May 2024 14:16:22 +0200
Subject: [PATCH 5/6] Sonar commit

Commit for resolving Sonar Cloud issues
---
 src/app/Hooks.ts                                |  2 +-
 src/app/Utilities.ts                            |  2 +-
 src/components/search/Search.tsx                |  6 ++----
 src/components/search/components/TopBar.tsx     |  5 ++---
 .../taxonomicService/components/TopBar.tsx      | 17 ++++++-----------
 5 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/app/Hooks.ts b/src/app/Hooks.ts
index ea000b5..3804154 100644
--- a/src/app/Hooks.ts
+++ b/src/app/Hooks.ts
@@ -1,5 +1,5 @@
 /* Import Dependencies */
-import { Ref, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
diff --git a/src/app/Utilities.ts b/src/app/Utilities.ts
index ea7ea56..ce78d7c 100644
--- a/src/app/Utilities.ts
+++ b/src/app/Utilities.ts
@@ -13,7 +13,7 @@ const Capitalize = (string: string) => {
 
 /** Function to replace capitals in a string with spaces to make a readable string */
 const MakeReadableString = (string: string) => {
-    const splitArray: RegExpMatchArray | null = string.match(/[A-Z]?[a-z]+|[0-9]+|[A-Z]+(?![a-z])/g);
+    const splitArray: RegExpMatchArray | null = string.match(/[A-Z]?[a-z]+|[/d]+|[A-Z]+(?![a-z])/g);
 
     return startCase(splitArray?.join(' ')) ?? startCase(string.split(/(?=[A-Z])/).join(' '));
 };
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
index 76fb896..490217e 100644
--- a/src/components/search/Search.tsx
+++ b/src/components/search/Search.tsx
@@ -4,10 +4,10 @@ import { Container, Row, Col } from 'react-bootstrap';
 import { useSearchParams } from 'react-router-dom';
 
 /* Import Hooks */
-import { usePaginator, useAppSelector, useAppDispatch } from 'app/Hooks';
+import { usePaginator, useAppDispatch } from 'app/Hooks';
 
 /* Import Store */
-import { getTaxonomicServices, setTaxonomicServices, concatToTaxonomicServices } from 'redux-store/TaxonomicServiceSlice';
+import { setTaxonomicServices, concatToTaxonomicServices } from 'redux-store/TaxonomicServiceSlice';
 
 /* Import Types */
 import { TaxonomicService } from 'app/Types';
@@ -34,8 +34,6 @@ const Search = () => {
     const [searchParams] = useSearchParams();
 
     /* Base variables */
-    const taxonomicServices = useAppSelector(getTaxonomicServices);
-
     const paginator = usePaginator({
         Initiate: () => dispatch(setTaxonomicServices([])),
         Method: GetTaxonomicServices,
diff --git a/src/components/search/components/TopBar.tsx b/src/components/search/components/TopBar.tsx
index 3d686d9..6f98593 100644
--- a/src/components/search/components/TopBar.tsx
+++ b/src/components/search/components/TopBar.tsx
@@ -2,7 +2,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { useState, useRef } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { Row, Col } from 'react-bootstrap';
 
 /* Import Hooks */
@@ -24,7 +24,6 @@ import { Button } from 'components/general/CustomComponents';
 */
 const TopBar = () => {
     /* Hooks */
-    const navigate = useNavigate();
     const [searchParams] = useSearchParams();
 
     /* Base variables */
@@ -32,7 +31,7 @@ const TopBar = () => {
 
     /* Create ref and focus for mobile filters */
     const filtersRef = useRef<HTMLDivElement>(null);
-    const filtersFocus = useFocus({ ref: filtersRef, OnFocusLose: () => setFiltersToggle(false) });
+    useFocus({ ref: filtersRef, OnFocusLose: () => setFiltersToggle(false) });
 
     /* Class Names */
     const filtersClass = classNames({
diff --git a/src/components/taxonomicService/components/TopBar.tsx b/src/components/taxonomicService/components/TopBar.tsx
index 4b11d15..2916331 100644
--- a/src/components/taxonomicService/components/TopBar.tsx
+++ b/src/components/taxonomicService/components/TopBar.tsx
@@ -24,21 +24,16 @@ const TopBar = (props: Props) => {
     let stateTagLine: string;
 
     /* Define the state tag line */
-    switch(taxonomicService.taxonomicService['cetaf:state']) {
-        case 'published':
-            stateTagLine = 'Published and visible';
-
-            break;
-        default:
-            stateTagLine = 'Draft and hidden';
-
-            break;
-    }
+    if (taxonomicService.taxonomicService['cetaf:state'] === 'published') {
+        stateTagLine = 'Published and visible';
+    } else {
+        stateTagLine = 'Draft and hidden';
+    };
 
     return (
         <Row>
             {/* State and Title */}
-            <Col xs={{span: 12}} lg>
+            <Col xs={{ span: 12 }} lg>
                 <p className="fs-4 fs-lg-3">{stateTagLine}</p>
                 <h1 className="fs-3 fs-lg-2">{taxonomicService.taxonomicService['erp:name']}</h1>
             </Col>

From 32426407c91a910d76bb5425e68adcc7835654db Mon Sep 17 00:00:00 2001
From: TomDijkema <tom.dijkema@naturalis.nl>
Date: Wed, 15 May 2024 14:19:50 +0200
Subject: [PATCH 6/6] Sonar Commit 2

Second commit for resolving Sonar Cloud issues
---
 src/components/search/components/TopBar.tsx           | 2 +-
 src/components/taxonomicService/components/TopBar.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/search/components/TopBar.tsx b/src/components/search/components/TopBar.tsx
index 6f98593..e30c91f 100644
--- a/src/components/search/components/TopBar.tsx
+++ b/src/components/search/components/TopBar.tsx
@@ -76,7 +76,7 @@ const TopBar = () => {
                     <Button type="button"
                         variant={searchParams.get('taxonomicServiceType') === 'referenceCollection' ? 'secondary' : 'primary'}
                         className="fs-5 fs-lg-4"
-                        OnClick={() => window.open('https://dissco.jitbit.com/helpdesk/User/Login', '_blank')}
+                        OnClick={() => window.open('https://dissco.jitbit.com/helpdesk/User/Login', '_blank', 'noopener')}
                     >
                         Suggest a new service
                     </Button>
diff --git a/src/components/taxonomicService/components/TopBar.tsx b/src/components/taxonomicService/components/TopBar.tsx
index 2916331..3322418 100644
--- a/src/components/taxonomicService/components/TopBar.tsx
+++ b/src/components/taxonomicService/components/TopBar.tsx
@@ -44,7 +44,7 @@ const TopBar = (props: Props) => {
                 <Button type="button"
                     variant="primary"
                     className="fs-5 fs-lg-4"
-                    OnClick={() => window.open(`https://${taxonomicService.taxonomicService['erp:helpdeskPage']?.replace('http://', '').replace('https://', '')}`, '_blank')}
+                    OnClick={() => window.open(`https://${taxonomicService.taxonomicService['erp:helpdeskPage']?.replace('http://', '').replace('https://', '')}`, '_blank', 'noopener')}
                 >
                     Apply for usage
                 </Button>