Merge pull request #6 from DiSSCo/MobileVersion

Mobile version
DiSSCo · May 21, 2024 · 1d16158 · 1d16158
2 parents 1fd7663 + 3242640
commit 1d16158
Show file tree

Hide file tree

Showing 26 changed files with 580 additions and 208 deletions.
diff --git 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,58 @@ 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-default {
+    font-size: 1rem !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 +246,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 +265,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/Hooks.ts b/src/app/Hooks.ts
@@ -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
 }
diff --git 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]+|[/d]+|[A-Z]+(?![a-z])/g);
 
-    return Capitalize(splitArray.join(' '));
-}
+    return startCase(splitArray?.join(' ')) ?? startCase(string.split(/(?=[A-Z])/).join(' '));
+};
 
 
 export {

diff --git 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/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
 };
@@ -28,15 +28,16 @@ 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}
+            {children ?? ''}
         </button>
     );
 };

diff --git 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;
 }