From b908e8420c89aa2613aac8bc1122aecb02406b74 Mon Sep 17 00:00:00 2001 From: SevLG Date: Thu, 1 Feb 2024 13:13:24 +0100 Subject: [PATCH 01/14] Generalizing CardComponent for different uses, had to make changes to HomePage and other files to make it work. Better organized now imo --- react-app/src/components/CardComponent.tsx | 23 +++--- react-app/src/components/FooterComponent.tsx | 2 +- react-app/src/constants.ts | 2 +- react-app/src/interfaces/types.ts | 16 +++++ react-app/src/pages/AboutPage.tsx | 73 +++++++++++++++++++- react-app/src/pages/HomePage.tsx | 65 +++++++++++++---- react-app/src/pages/PrivacyPage.tsx | 4 +- 7 files changed, 156 insertions(+), 29 deletions(-) diff --git a/react-app/src/components/CardComponent.tsx b/react-app/src/components/CardComponent.tsx index 498595b..dbe4332 100644 --- a/react-app/src/components/CardComponent.tsx +++ b/react-app/src/components/CardComponent.tsx @@ -1,22 +1,29 @@ import { ReactElement } from "react"; +import { ICardConfig, ICardContent } from "../interfaces/types"; -export default function CardComponent(prop: { classes: string, title: string, text: string, button: string, buttonClasses: string }): ReactElement { +export default function CardComponent(prop: { CardConfig: ICardConfig, CardContent: ICardContent }): ReactElement { const title: ReactElement = ( -

{prop.title}

+

{prop.CardContent.title}

); + const image: ReactElement = ( +
{prop.CardContent.imageAlt}
+ ); + + var buttonClasses: string = "card-actions " + prop.CardConfig.buttonPlacement; const button: ReactElement = ( -
- +
+
); return ( -
+
+ {prop.CardContent.imageSrc && image}
- {prop.title && title} -

{prop.text}

- {prop.button && button} + {prop.CardContent.title && title} +

{prop.CardContent.text}

+ {prop.CardContent.buttonText && button}
); diff --git a/react-app/src/components/FooterComponent.tsx b/react-app/src/components/FooterComponent.tsx index 38c5ea2..14e1af3 100644 --- a/react-app/src/components/FooterComponent.tsx +++ b/react-app/src/components/FooterComponent.tsx @@ -13,7 +13,7 @@ export default function FooterComponent(): ReactElement { }; var linksCol2: { [id: string] : ILink; } = { - 'l1': { text: 'About us', classes: LINK_CLASSES, link: '/' }, + 'l1': { text: 'About us', classes: LINK_CLASSES, link: '/about' }, 'l2': { text: 'Contact', classes: LINK_CLASSES, link: '/' }, 'l3': { text: 'Open Source Contribution', classes: LINK_CLASSES, link: '/' }, 'l4': { text: 'Privacy Policy', classes: LINK_CLASSES, link: '/privacy' }, diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts index 55678fc..14ed866 100644 --- a/react-app/src/constants.ts +++ b/react-app/src/constants.ts @@ -1,5 +1,5 @@ // reused tailwind classes -export const HEADER_ONE: string = "text-left text-black text-[40px] font-semibold"; +export const H_1: string = "text-left text-black text-[40px] font-semibold"; export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold p-6"; diff --git a/react-app/src/interfaces/types.ts b/react-app/src/interfaces/types.ts index 3828093..c2cdd50 100644 --- a/react-app/src/interfaces/types.ts +++ b/react-app/src/interfaces/types.ts @@ -12,4 +12,20 @@ export interface ISVG { viewBox: string; classes: string; svg: string; +}; + +export interface ICardConfig { + cardClasses: string; + titleClasses: string; + textClasses: string; + buttonClasses: string; + buttonPlacement: string; +}; + +export interface ICardContent { + title: string; + text: string; + buttonText: string; + imageSrc: string; + imageAlt: string; }; \ No newline at end of file diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index e0bb5a6..bcaf4c6 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -1,5 +1,14 @@ import React, { ReactElement } from 'react'; import { useMatomo } from '@jonkoops/matomo-tracker-react'; +import TextBarComponent from '../components/TextBarComponent'; +import { + BODY_CLASSES, + H_1, + PAGE_DESCRIPTION_TEXT_BAR_CLASSES, +} from '../constants'; +import { Link } from 'react-router-dom'; +import { ILink, ICardConfig, ICardContent } from '../interfaces/types'; +import CardComponent from '../components/CardComponent'; export default function AboutPage(): ReactElement { const { trackPageView,} = useMatomo() @@ -9,9 +18,67 @@ export default function AboutPage(): ReactElement { trackPageView() }, []) + var pageTitle: string = "About Us"; + var textBarContent: string = "Get to know about the team behind the [product name] and our mission to connect you with the data you need."; + var PMDDescription: string = ` + Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. + Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, + eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, + pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. + Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, + eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, + pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. + Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. + Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, + eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. + `; + + var cardConfig: { [id: string] : ICardConfig; } = { + 'teamCard': { + cardClasses: "card w-96 bg-base-100 shadow-xl", + titleClasses: "card-title", + textClasses: "", + buttonClasses: "btn btn-primary", + buttonPlacement: "justify-end", + }, + }; + + var cardContent: { [id: string] : ICardContent } = { + 'teamCard1': { + title: "Shoes!", + text: "If a dog chews shoes whose shoes does he choose?", + buttonText: "Buy Now", + imageSrc: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", + imageAlt: "Shoes", + }, + }; + + var breadcrumbs: { [id: string] : ILink; } = { + 'l1': { text: 'Home', classes: '', link: '/' }, + 'l2': { text: 'About', classes: '', link: '' }, + }; + + var dividers: string[] = ['Default', 'Default', 'Default', 'Default']; + return ( -
-

About page under construction

-
+ <> + +
+
+
    + {Object.keys(breadcrumbs).map( key => ( +
  • {breadcrumbs[key].link ? {breadcrumbs[key].text} : <>{breadcrumbs[key].text}}
    • + ))} +
+
+
{pageTitle}
+
{dividers[0]}
+

{PMDDescription}

+
{dividers[1]}
+ +
{dividers[2]}
+
{dividers[3]}
+
+ ); } \ No newline at end of file diff --git a/react-app/src/pages/HomePage.tsx b/react-app/src/pages/HomePage.tsx index 2e3af9e..04d633a 100644 --- a/react-app/src/pages/HomePage.tsx +++ b/react-app/src/pages/HomePage.tsx @@ -3,7 +3,8 @@ import { useMatomo } from '@jonkoops/matomo-tracker-react'; import CardComponent from "../components/CardComponent"; import ImageCarouselComponent from "../components/ImageCarouselComponent"; import TextBarComponent from "../components/TextBarComponent"; -import { BODY_CLASSES, BUTTON_TYPE_ONE, HEADER_ONE, PAGE_DESCRIPTION_TEXT_BAR_CLASSES } from '../constants'; +import { BODY_CLASSES, BUTTON_TYPE_ONE, H_1, PAGE_DESCRIPTION_TEXT_BAR_CLASSES } from '../constants'; +import { ICardConfig, ICardContent } from '../interfaces/types'; export default function HomePage(): ReactElement { @@ -14,8 +15,44 @@ export default function HomePage(): ReactElement { trackPageView() }, []) - var whiteTextCardClasses: string = "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300"; - var blackCardClasses: string = "bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2"; + var cardTitleClasses: string = "text-center text-white text-xl font-semibold"; + var cardTextClasses: string = "text-center"; + + var cardConfig: { [id: string] : ICardConfig; } = { + 'whiteCard': { + cardClasses: "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300", + titleClasses: cardTitleClasses, + textClasses: cardTextClasses, + buttonClasses: "", + buttonPlacement: "", + }, + 'blackCard': { + cardClasses: "bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2", + titleClasses: cardTitleClasses, + textClasses: cardTextClasses, + buttonClasses: BUTTON_TYPE_ONE, + buttonPlacement: "justify-center", + } + }; + + var cardContent: { [id: string] : ICardContent } = { + 'whiteCard1': { + title: "", + text: "If a dog chews shoes whose shoes does he choose?", + buttonText: "", + imageSrc: "", + imageAlt: "", + }, + 'blackCard1': { + title: "Data Search", + text: "Some text; under development", + buttonText: "Sign In", + imageSrc: "", + imageAlt: "", + }, + + }; + var textBarContent: string = "UNDER CONSTRUCTION - Web portal by DDLS Data Science Node"; return ( @@ -25,22 +62,22 @@ export default function HomePage(): ReactElement {
-

Latest News

- - - - +

Latest News

+ + + +
-

Upcoming Events

- - - +

Upcoming Events

+ + +
- - + +
diff --git a/react-app/src/pages/PrivacyPage.tsx b/react-app/src/pages/PrivacyPage.tsx index da9e563..ecfa26c 100644 --- a/react-app/src/pages/PrivacyPage.tsx +++ b/react-app/src/pages/PrivacyPage.tsx @@ -5,7 +5,7 @@ import { BODY_CLASSES, BUTTON_TYPE_ONE, BUTTON_TYPE_TWO, - HEADER_ONE, + H_1, PAGE_DESCRIPTION_TEXT_BAR_CLASSES, } from '../constants'; import { Link } from 'react-router-dom'; @@ -61,7 +61,7 @@ export default function PrivacyPage(): ReactElement { ))} -
Privacy Policy
+
Privacy Policy
{dividers[0]}

{privacyDescription}

{dividers[1]}
From fdd56d489a9d717586a7a9821bbe91c6f727fba0 Mon Sep 17 00:00:00 2001 From: SevLG Date: Thu, 1 Feb 2024 13:31:27 +0100 Subject: [PATCH 02/14] Cards now working as intended on both HomePage and AboutPage --- react-app/src/components/CardComponent.tsx | 20 +++++------ react-app/src/pages/AboutPage.tsx | 39 ++++++++++++++++++++-- react-app/src/pages/HomePage.tsx | 34 +++++++++---------- 3 files changed, 64 insertions(+), 29 deletions(-) diff --git a/react-app/src/components/CardComponent.tsx b/react-app/src/components/CardComponent.tsx index dbe4332..609aa6f 100644 --- a/react-app/src/components/CardComponent.tsx +++ b/react-app/src/components/CardComponent.tsx @@ -1,29 +1,29 @@ import { ReactElement } from "react"; import { ICardConfig, ICardContent } from "../interfaces/types"; -export default function CardComponent(prop: { CardConfig: ICardConfig, CardContent: ICardContent }): ReactElement { +export default function CardComponent(prop: { cardConfig: ICardConfig, cardContent: ICardContent }): ReactElement { const title: ReactElement = ( -

{prop.CardContent.title}

+

{prop.cardContent.title}

); const image: ReactElement = ( -
{prop.CardContent.imageAlt}
+
{prop.cardContent.imageAlt}
); - var buttonClasses: string = "card-actions " + prop.CardConfig.buttonPlacement; + var buttonClasses: string = "card-actions " + prop.cardConfig.buttonPlacement; const button: ReactElement = (
- +
); return ( -
- {prop.CardContent.imageSrc && image} +
+ {prop.cardContent.imageSrc && image}
- {prop.CardContent.title && title} -

{prop.CardContent.text}

- {prop.CardContent.buttonText && button} + {prop.cardContent.title && title} +

{prop.cardContent.text}

+ {prop.cardContent.buttonText && button}
); diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index bcaf4c6..c99f762 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -41,6 +41,13 @@ export default function AboutPage(): ReactElement { buttonClasses: "btn btn-primary", buttonPlacement: "justify-end", }, + 'fundersAndPartnersCard': { + cardClasses: "card lg:card-side bg-base-100 shadow-xl", + titleClasses: "card-title", + textClasses: "", + buttonClasses: "btn btn-primary", + buttonPlacement: "justify-end", + }, }; var cardContent: { [id: string] : ICardContent } = { @@ -51,6 +58,13 @@ export default function AboutPage(): ReactElement { imageSrc: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", imageAlt: "Shoes", }, + 'fundersAndPartnersCard1': { + title: "New album is released!", + text: "Click the button to listen on Spotiwhy app.", + buttonText: "Listen", + imageSrc: "https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg", + imageAlt: "Album", + }, }; var breadcrumbs: { [id: string] : ILink; } = { @@ -58,7 +72,7 @@ export default function AboutPage(): ReactElement { 'l2': { text: 'About', classes: '', link: '' }, }; - var dividers: string[] = ['Default', 'Default', 'Default', 'Default']; + var dividers: string[] = ['Default', 'Default', 'Default', 'Default', 'Default']; return ( <> @@ -75,9 +89,30 @@ export default function AboutPage(): ReactElement {
{dividers[0]}

{PMDDescription}

{dividers[1]}
- +
+
+ + +
+
+ + +
+
+ +
+
{dividers[2]}
{dividers[3]}
+
+ + +
+
{dividers[4]}
+
+ + +
); diff --git a/react-app/src/pages/HomePage.tsx b/react-app/src/pages/HomePage.tsx index 04d633a..7c79706 100644 --- a/react-app/src/pages/HomePage.tsx +++ b/react-app/src/pages/HomePage.tsx @@ -59,25 +59,25 @@ export default function HomePage(): ReactElement {
- -
-
-

Latest News

- - - - + +
+
+

Latest News

+ + + + +
+
+

Upcoming Events

+ + + +
-
-

Upcoming Events

- - - -
-
- - + +
From a014482c426dd17c125d4e368c4517dc8f32c9c6 Mon Sep 17 00:00:00 2001 From: SevLG Date: Thu, 1 Feb 2024 13:57:35 +0100 Subject: [PATCH 03/14] Using more simple flex rows instead of grids + rows for AboutPage --- react-app/src/constants.ts | 4 +++- react-app/src/pages/AboutPage.tsx | 24 ++++++++++++------------ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts index 14ed866..0e5845d 100644 --- a/react-app/src/constants.ts +++ b/react-app/src/constants.ts @@ -8,4 +8,6 @@ export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray export const BODY_CLASSES: string = "bg-white space-y-4 py-4 px-12"; -export const LINK_CLASSES: string = 'link link-hover'; \ No newline at end of file +export const LINK_CLASSES: string = 'link link-hover'; + +export const FLEX_ROW_CLASS_BASE: string = "flex flex-row space-x-"; \ No newline at end of file diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index c99f762..7355e91 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -3,6 +3,7 @@ import { useMatomo } from '@jonkoops/matomo-tracker-react'; import TextBarComponent from '../components/TextBarComponent'; import { BODY_CLASSES, + FLEX_ROW_CLASS_BASE, H_1, PAGE_DESCRIPTION_TEXT_BAR_CLASSES, } from '../constants'; @@ -45,8 +46,8 @@ export default function AboutPage(): ReactElement { cardClasses: "card lg:card-side bg-base-100 shadow-xl", titleClasses: "card-title", textClasses: "", - buttonClasses: "btn btn-primary", - buttonPlacement: "justify-end", + buttonClasses: "", + buttonPlacement: "", }, }; @@ -61,12 +62,15 @@ export default function AboutPage(): ReactElement { 'fundersAndPartnersCard1': { title: "New album is released!", text: "Click the button to listen on Spotiwhy app.", - buttonText: "Listen", + buttonText: "", imageSrc: "https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg", imageAlt: "Album", }, }; + var teamCardsSpacing: number = 24; + var fundersAndPartnersCardsSpacing: number = 8; + var breadcrumbs: { [id: string] : ILink; } = { 'l1': { text: 'Home', classes: '', link: '/' }, 'l2': { text: 'About', classes: '', link: '' }, @@ -89,27 +93,23 @@ export default function AboutPage(): ReactElement {
{dividers[0]}

{PMDDescription}

{dividers[1]}
-
-
+
-
-
-
-
+
+
-
{dividers[2]}
{dividers[3]}
-
+
{dividers[4]}
-
+
From 6a66cc8f0d9fe0cc994d17128a0fa1a5a806aef2 Mon Sep 17 00:00:00 2001 From: SevLG Date: Thu, 1 Feb 2024 14:54:44 +0100 Subject: [PATCH 04/14] Some polishing of the index page and related elements --- react-app/src/constants.ts | 2 +- react-app/src/pages/HomePage.tsx | 13 ++++++------- react-app/src/pages/PrivacyPage.tsx | 2 +- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts index 0e5845d..6aac119 100644 --- a/react-app/src/constants.ts +++ b/react-app/src/constants.ts @@ -1,7 +1,7 @@ // reused tailwind classes export const H_1: string = "text-left text-black text-[40px] font-semibold"; -export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold p-6"; +export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-5xl leading-snug font-bold p-6"; export const BUTTON_TYPE_ONE: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300'; export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray-800 active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-300'; diff --git a/react-app/src/pages/HomePage.tsx b/react-app/src/pages/HomePage.tsx index 7c79706..747c75e 100644 --- a/react-app/src/pages/HomePage.tsx +++ b/react-app/src/pages/HomePage.tsx @@ -20,7 +20,7 @@ export default function HomePage(): ReactElement { var cardConfig: { [id: string] : ICardConfig; } = { 'whiteCard': { - cardClasses: "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300", + cardClasses: "w-[55rem] bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300", titleClasses: cardTitleClasses, textClasses: cardTextClasses, buttonClasses: "", @@ -60,25 +60,24 @@ export default function HomePage(): ReactElement {
-
+

Latest News

+
-

Upcoming Events

+

Latest News

+ +
-
- - -
); diff --git a/react-app/src/pages/PrivacyPage.tsx b/react-app/src/pages/PrivacyPage.tsx index ecfa26c..465a453 100644 --- a/react-app/src/pages/PrivacyPage.tsx +++ b/react-app/src/pages/PrivacyPage.tsx @@ -66,7 +66,7 @@ export default function PrivacyPage(): ReactElement {

{privacyDescription}

{dividers[1]}

{trackingMessage}

-
+
{alertMessage}
From 622a56b90a06c4f7b5b3e1c4125f66c72be89149 Mon Sep 17 00:00:00 2001 From: SevLG Date: Thu, 1 Feb 2024 16:41:21 +0100 Subject: [PATCH 05/14] After looking it up, it appears concatenating strings for tailwind classes is problematic, keep hardcoding --- react-app/src/pages/AboutPage.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index 7355e91..9a96174 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -68,8 +68,10 @@ export default function AboutPage(): ReactElement { }, }; - var teamCardsSpacing: number = 24; - var fundersAndPartnersCardsSpacing: number = 8; + // apparently concatenating strings for tailwind classes does not work for some reason, leave hardcoding + var teamCardsSpacing: string = "flex flex-row space-x-24"; + var fundersAndPartnersSpacing: string = "flex flex-row space-x-8"; + var breadcrumbs: { [id: string] : ILink; } = { 'l1': { text: 'Home', classes: '', link: '/' }, @@ -93,7 +95,7 @@ export default function AboutPage(): ReactElement {
{dividers[0]}

{PMDDescription}

{dividers[1]}
-
+
@@ -104,12 +106,12 @@ export default function AboutPage(): ReactElement {
{dividers[2]}
{dividers[3]}
-
+
{dividers[4]}
-
+
From fe3fd1b2a7049d5837a7b93a19624b3a235159d3 Mon Sep 17 00:00:00 2001 From: SevLG Date: Thu, 1 Feb 2024 16:45:23 +0100 Subject: [PATCH 06/14] Fixed scaling of index page to look good on my laptop, need to make it responsive to different screen sizes --- react-app/src/pages/HomePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-app/src/pages/HomePage.tsx b/react-app/src/pages/HomePage.tsx index 747c75e..756a56d 100644 --- a/react-app/src/pages/HomePage.tsx +++ b/react-app/src/pages/HomePage.tsx @@ -20,7 +20,7 @@ export default function HomePage(): ReactElement { var cardConfig: { [id: string] : ICardConfig; } = { 'whiteCard': { - cardClasses: "w-[55rem] bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300", + cardClasses: "w-[40rem] bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300", titleClasses: cardTitleClasses, textClasses: cardTextClasses, buttonClasses: "", From fafb99bf288fb4b8d5adbe0f632a9077fa2fefc9 Mon Sep 17 00:00:00 2001 From: SevLG Date: Fri, 2 Feb 2024 16:57:27 +0100 Subject: [PATCH 07/14] Fiddled with cols and rows for card placement, started working on FAQ accordion --- .../src/components/AccordionComponent.tsx | 36 +++++++++++++++++++ react-app/src/constants.ts | 4 +-- react-app/src/pages/AboutPage.tsx | 27 +++++++------- 3 files changed, 51 insertions(+), 16 deletions(-) create mode 100644 react-app/src/components/AccordionComponent.tsx diff --git a/react-app/src/components/AccordionComponent.tsx b/react-app/src/components/AccordionComponent.tsx new file mode 100644 index 0000000..e8b04ba --- /dev/null +++ b/react-app/src/components/AccordionComponent.tsx @@ -0,0 +1,36 @@ +import { ReactElement } from 'react' + +export default function AccordionComponent(): ReactElement { + + return ( + <> +
+ +
+ Click to open this one and close others +
+
+

hello

+
+
+
+ +
+ Click to open this one and close others +
+
+

hello

+
+
+
+ +
+ Click to open this one and close others +
+
+

hello

+
+
+ + ); +} \ No newline at end of file diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts index 6aac119..ce92e41 100644 --- a/react-app/src/constants.ts +++ b/react-app/src/constants.ts @@ -8,6 +8,4 @@ export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray export const BODY_CLASSES: string = "bg-white space-y-4 py-4 px-12"; -export const LINK_CLASSES: string = 'link link-hover'; - -export const FLEX_ROW_CLASS_BASE: string = "flex flex-row space-x-"; \ No newline at end of file +export const LINK_CLASSES: string = 'link link-hover'; \ No newline at end of file diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index 9a96174..a1d7b84 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -3,13 +3,13 @@ import { useMatomo } from '@jonkoops/matomo-tracker-react'; import TextBarComponent from '../components/TextBarComponent'; import { BODY_CLASSES, - FLEX_ROW_CLASS_BASE, H_1, PAGE_DESCRIPTION_TEXT_BAR_CLASSES, } from '../constants'; import { Link } from 'react-router-dom'; import { ILink, ICardConfig, ICardContent } from '../interfaces/types'; import CardComponent from '../components/CardComponent'; +import AccordionComponent from '../components/AccordionComponent'; export default function AboutPage(): ReactElement { const { trackPageView,} = useMatomo() @@ -39,8 +39,8 @@ export default function AboutPage(): ReactElement { cardClasses: "card w-96 bg-base-100 shadow-xl", titleClasses: "card-title", textClasses: "", - buttonClasses: "btn btn-primary", - buttonPlacement: "justify-end", + buttonClasses: "", + buttonPlacement: "", }, 'fundersAndPartnersCard': { cardClasses: "card lg:card-side bg-base-100 shadow-xl", @@ -55,7 +55,7 @@ export default function AboutPage(): ReactElement { 'teamCard1': { title: "Shoes!", text: "If a dog chews shoes whose shoes does he choose?", - buttonText: "Buy Now", + buttonText: "", imageSrc: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", imageAlt: "Shoes", }, @@ -68,10 +68,6 @@ export default function AboutPage(): ReactElement { }, }; - // apparently concatenating strings for tailwind classes does not work for some reason, leave hardcoding - var teamCardsSpacing: string = "flex flex-row space-x-24"; - var fundersAndPartnersSpacing: string = "flex flex-row space-x-8"; - var breadcrumbs: { [id: string] : ILink; } = { 'l1': { text: 'Home', classes: '', link: '/' }, @@ -95,23 +91,28 @@ export default function AboutPage(): ReactElement {
{dividers[0]}

{PMDDescription}

{dividers[1]}
-
- +
+
-
+
+ +
+
+
{dividers[2]}
+
{dividers[3]}
-
+
{dividers[4]}
-
+
From 69a8104a19e0e7531f80346da814c4342cc43a00 Mon Sep 17 00:00:00 2001 From: SevLG Date: Mon, 5 Feb 2024 11:27:01 +0100 Subject: [PATCH 08/14] Assumed I had to write a function for accordion component, but just setting checked={true} for all made it work. Assume DaisyUI already has a function doing that in the background? --- react-app/src/components/AccordionComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react-app/src/components/AccordionComponent.tsx b/react-app/src/components/AccordionComponent.tsx index e8b04ba..e4a1575 100644 --- a/react-app/src/components/AccordionComponent.tsx +++ b/react-app/src/components/AccordionComponent.tsx @@ -14,7 +14,7 @@ export default function AccordionComponent(): ReactElement {
- +
Click to open this one and close others
@@ -23,7 +23,7 @@ export default function AccordionComponent(): ReactElement {
- +
Click to open this one and close others
From 507a4867706a130ad7017ee57e51f8d95f2eedaf Mon Sep 17 00:00:00 2001 From: SevLG Date: Mon, 5 Feb 2024 11:41:21 +0100 Subject: [PATCH 09/14] Separated AboutPage's different sections in preparation to make them tabs on About page --- react-app/src/pages/AboutFAQPage.tsx | 19 +++++++ react-app/src/pages/AboutPage.tsx | 5 ++ react-app/src/pages/AboutPartnersPage.tsx | 49 +++++++++++++++++ react-app/src/pages/AboutProductPage.tsx | 67 +++++++++++++++++++++++ 4 files changed, 140 insertions(+) create mode 100644 react-app/src/pages/AboutFAQPage.tsx create mode 100644 react-app/src/pages/AboutPartnersPage.tsx create mode 100644 react-app/src/pages/AboutProductPage.tsx diff --git a/react-app/src/pages/AboutFAQPage.tsx b/react-app/src/pages/AboutFAQPage.tsx new file mode 100644 index 0000000..8c73edd --- /dev/null +++ b/react-app/src/pages/AboutFAQPage.tsx @@ -0,0 +1,19 @@ +import React, { ReactElement } from 'react'; +import { useMatomo } from '@jonkoops/matomo-tracker-react'; +import AccordionComponent from '../components/AccordionComponent'; + +export default function AboutFAQPage(): ReactElement { + const { trackPageView,} = useMatomo() + + // Track page view + React.useEffect(() => { + trackPageView() + }, []) + + return ( + <> +
FAQ
+ + + ); +} \ No newline at end of file diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index a1d7b84..68a46f1 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -88,6 +88,11 @@ export default function AboutPage(): ReactElement {
{pageTitle}
+
+ Product + FAQ + Partners +
{dividers[0]}

{PMDDescription}

{dividers[1]}
diff --git a/react-app/src/pages/AboutPartnersPage.tsx b/react-app/src/pages/AboutPartnersPage.tsx new file mode 100644 index 0000000..d8bf671 --- /dev/null +++ b/react-app/src/pages/AboutPartnersPage.tsx @@ -0,0 +1,49 @@ +import React, { ReactElement } from 'react'; +import { useMatomo } from '@jonkoops/matomo-tracker-react'; +import { ICardConfig, ICardContent } from '../interfaces/types'; +import CardComponent from '../components/CardComponent'; + +export default function AboutPartnersPage(): ReactElement { + const { trackPageView,} = useMatomo() + + // Track page view + React.useEffect(() => { + trackPageView() + }, []) + + var cardConfig: { [id: string] : ICardConfig; } = { + 'fundersAndPartnersCard': { + cardClasses: "card lg:card-side bg-base-100 shadow-xl", + titleClasses: "card-title", + textClasses: "", + buttonClasses: "", + buttonPlacement: "", + }, + }; + + var cardContent: { [id: string] : ICardContent } = { + 'fundersAndPartnersCard1': { + title: "New album is released!", + text: "Click the button to listen on Spotiwhy app.", + buttonText: "", + imageSrc: "https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg", + imageAlt: "Album", + }, + }; + + + return ( + <> +
Funders
+
+ + +
+
Partners
+
+ + +
+ + ); +} \ No newline at end of file diff --git a/react-app/src/pages/AboutProductPage.tsx b/react-app/src/pages/AboutProductPage.tsx new file mode 100644 index 0000000..ba87606 --- /dev/null +++ b/react-app/src/pages/AboutProductPage.tsx @@ -0,0 +1,67 @@ +import React, { ReactElement } from 'react'; +import { useMatomo } from '@jonkoops/matomo-tracker-react'; +import { ICardConfig, ICardContent } from '../interfaces/types'; +import CardComponent from '../components/CardComponent'; + +export default function AboutProductPage(): ReactElement { + const { trackPageView,} = useMatomo() + + // Track page view + React.useEffect(() => { + trackPageView() + }, []) + + var PMDDescription: string = ` + Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. + Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, + eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, + pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. + Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, + eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, + pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. + Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. + Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, + eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. + `; + + var cardConfig: { [id: string] : ICardConfig; } = { + 'teamCard': { + cardClasses: "card w-96 bg-base-100 shadow-xl", + titleClasses: "card-title", + textClasses: "", + buttonClasses: "", + buttonPlacement: "", + }, + }; + + var cardContent: { [id: string] : ICardContent } = { + 'teamCard1': { + title: "Shoes!", + text: "If a dog chews shoes whose shoes does he choose?", + buttonText: "", + imageSrc: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", + imageAlt: "Shoes", + }, + }; + + return ( + <> +
Product
+

{PMDDescription}

+
Team
+
+
+ + +
+
+ + +
+
+ +
+
+ + ); +} \ No newline at end of file From 04da8a2231a338e64f2bf07190a599d828e8490c Mon Sep 17 00:00:00 2001 From: SevLG Date: Mon, 5 Feb 2024 14:40:16 +0100 Subject: [PATCH 10/14] Fixed routing from clicking tabs to AboutPage's child elements --- react-app/src/components/Routes.tsx | 29 +++++++++++++++++++-- react-app/src/pages/AboutPage.tsx | 39 ++++------------------------- 2 files changed, 32 insertions(+), 36 deletions(-) diff --git a/react-app/src/components/Routes.tsx b/react-app/src/components/Routes.tsx index 923d901..3912bc6 100644 --- a/react-app/src/components/Routes.tsx +++ b/react-app/src/components/Routes.tsx @@ -1,5 +1,5 @@ import { ReactElement } from 'react'; -import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import { createBrowserRouter, redirect, RouterProvider } from 'react-router-dom'; import App from '../App'; import HomePage from '../pages/HomePage'; import AboutPage from '../pages/AboutPage'; @@ -8,6 +8,9 @@ import DataPage from '../pages/DataPage'; import EventsAndNewsPage from '../pages/EventsAndNewsPage'; import SignInPage from '../pages/SignInPage'; import PrivacyPage from '../pages/PrivacyPage'; +import AboutProductPage from '../pages/AboutProductPage'; +import AboutFAQPage from '../pages/AboutFAQPage'; +import AboutPartnersPage from '../pages/AboutPartnersPage'; const router = createBrowserRouter([ { @@ -21,6 +24,24 @@ const router = createBrowserRouter([ { path: 'about', element: , + children: [ + { + index: true, + loader: async () => redirect('product') + }, + { + path: 'product', + element: , + }, + { + path: 'faq', + element: , + }, + { + path: 'partners', + element: , + }, + ] }, { path: 'contact', @@ -48,4 +69,8 @@ const router = createBrowserRouter([ export default function Routes(): ReactElement { return ; -} \ No newline at end of file +} + +function async(): import("react-router-dom").LoaderFunction | undefined { + throw new Error('Function not implemented.'); +} diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index 68a46f1..7dee379 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -6,10 +6,8 @@ import { H_1, PAGE_DESCRIPTION_TEXT_BAR_CLASSES, } from '../constants'; -import { Link } from 'react-router-dom'; +import { Link, NavLink, Outlet } from 'react-router-dom'; import { ILink, ICardConfig, ICardContent } from '../interfaces/types'; -import CardComponent from '../components/CardComponent'; -import AccordionComponent from '../components/AccordionComponent'; export default function AboutPage(): ReactElement { const { trackPageView,} = useMatomo() @@ -89,38 +87,11 @@ export default function AboutPage(): ReactElement {
{pageTitle}
- Product - FAQ - Partners -
-
{dividers[0]}
-

{PMDDescription}

-
{dividers[1]}
-
-
- - -
-
- - -
-
- -
-
-
{dividers[2]}
- -
{dividers[3]}
-
- - -
-
{dividers[4]}
-
- - + `tab ${ isActive ? 'tab-active' : ''}`}>Product + `tab ${ isActive ? 'tab-active' : ''}`}>FAQ + `tab ${ isActive ? 'tab-active' : ''}`}>Partners
+
); From 76763877c1b30922bb8bb9be1709bff09e746caf Mon Sep 17 00:00:00 2001 From: SevLG Date: Mon, 5 Feb 2024 15:25:43 +0100 Subject: [PATCH 11/14] Adding some padding to give some space to the about page elements and children --- react-app/src/constants.ts | 2 +- react-app/src/pages/AboutPage.tsx | 2 +- react-app/src/pages/AboutPartnersPage.tsx | 2 +- react-app/src/pages/AboutProductPage.tsx | 8 ++++---- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts index ce92e41..409d8b8 100644 --- a/react-app/src/constants.ts +++ b/react-app/src/constants.ts @@ -6,6 +6,6 @@ export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from- export const BUTTON_TYPE_ONE: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300'; export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray-800 active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-300'; -export const BODY_CLASSES: string = "bg-white space-y-4 py-4 px-12"; +export const BODY_CLASSES: string = "bg-white space-y-8 py-4 px-12 pb-60"; export const LINK_CLASSES: string = 'link link-hover'; \ No newline at end of file diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index 7dee379..e39fa5f 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -86,7 +86,7 @@ export default function AboutPage(): ReactElement {
{pageTitle}
-
+
`tab ${ isActive ? 'tab-active' : ''}`}>Product `tab ${ isActive ? 'tab-active' : ''}`}>FAQ `tab ${ isActive ? 'tab-active' : ''}`}>Partners diff --git a/react-app/src/pages/AboutPartnersPage.tsx b/react-app/src/pages/AboutPartnersPage.tsx index d8bf671..6f95bb2 100644 --- a/react-app/src/pages/AboutPartnersPage.tsx +++ b/react-app/src/pages/AboutPartnersPage.tsx @@ -39,7 +39,7 @@ export default function AboutPartnersPage(): ReactElement {
-
Partners
+
Partners
diff --git a/react-app/src/pages/AboutProductPage.tsx b/react-app/src/pages/AboutProductPage.tsx index ba87606..2368907 100644 --- a/react-app/src/pages/AboutProductPage.tsx +++ b/react-app/src/pages/AboutProductPage.tsx @@ -48,17 +48,17 @@ export default function AboutProductPage(): ReactElement { <>
Product

{PMDDescription}

-
Team
+
Team & Contributions
-
+
-
+
-
+
From a56da2dd12f8fe6fdf742e3bf1035a94c9349eae Mon Sep 17 00:00:00 2001 From: SevLG Date: Tue, 6 Feb 2024 13:36:17 +0100 Subject: [PATCH 12/14] Added content from NextCloud to public folder, nothing to do with AboutPage but accidentally added it in this active branch --- react-app/public/content/Contact_page.rtf | 30 ++++++++++ react-app/public/content/Index_page.rtf | 48 +++++++++++++++ react-app/public/content/Privacy_page.rtf | 73 +++++++++++++++++++++++ 3 files changed, 151 insertions(+) create mode 100644 react-app/public/content/Contact_page.rtf create mode 100644 react-app/public/content/Index_page.rtf create mode 100644 react-app/public/content/Privacy_page.rtf diff --git a/react-app/public/content/Contact_page.rtf b/react-app/public/content/Contact_page.rtf new file mode 100644 index 0000000..6267785 --- /dev/null +++ b/react-app/public/content/Contact_page.rtf @@ -0,0 +1,30 @@ +{\rtf1\ansi\ansicpg1252\cocoartf2709 +\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fswiss\fcharset0 Helvetica-Oblique;} +{\colortbl;\red255\green255\blue255;\red25\green28\blue31;\red56\green90\blue161;} +{\*\expandedcolortbl;;\cssrgb\c12941\c14510\c16078;\cssrgb\c27843\c43922\c69412;} +\paperw11900\paperh16840\margl1440\margr1440\vieww12740\viewh10840\viewkind0 +\deftab720 +\pard\pardeftab720\partightenfactor0 + +\f0\fs80 \cf2 \expnd0\expndtw0\kerning0 +#Contact form\ +\pard\pardeftab720\partightenfactor0 + +\fs32 \cf2 Please fill out this form if you need to contact us at the +\f1\i Swedish Precision Medicine Portal. +\f0\i0 Please provide your contact information and we should get back to you within a week\'92s time. \ +\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs56 \cf2 ##Personal data policy\ +\pard\pardeftab720\sa320\partightenfactor0 + +\fs32 \cf2 The personal data you provide in this form, your name and email address, will be used to process your suggestion of added resource to the\uc0\u8239 \cf3 Swedish Precision Medicine Portal. \cf2 It is a service run by the SciLifeLab Data Centre on assignment from the \'85 It serves to address\'85 \ +The information you provide will be processed for research purposes, i.e. using the lawful basis of public interest and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016, the General Data Protection Regulation.\ +The following parties will have access to processing your personal data: SciLifeLab Data Centre, Uppsala University. Your personal data will be deleted when no longer needed, or when stipulated by the archival rules for the university as a government authority. If you want to update or remove your personal data please contact\uc0\u8239 the controller SciLifeLab Data Centre at Uppsala University using datacentre@scilifelab.se.\ +\pard\pardeftab720\partightenfactor0 + +\fs80 \cf2 \ +\pard\pardeftab720\sa160\partightenfactor0 +\cf2 \ +} \ No newline at end of file diff --git a/react-app/public/content/Index_page.rtf b/react-app/public/content/Index_page.rtf new file mode 100644 index 0000000..90757d3 --- /dev/null +++ b/react-app/public/content/Index_page.rtf @@ -0,0 +1,48 @@ +{\rtf1\ansi\ansicpg1252\cocoartf2709 +\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red25\green28\blue31;} +{\*\expandedcolortbl;;\cssrgb\c12941\c14510\c16078;} +\paperw11900\paperh16840\margl1440\margr1440\vieww16820\viewh11860\viewkind0 +\deftab720 +\pard\pardeftab720\sa80\partightenfactor0 + +\f0\fs48 \cf2 \expnd0\expndtw0\kerning0 +Welcome to the newly launched Swedish Precision Medicine Portal\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs28 \cf2 This portal aims to offer a data catalogue where you can search and gain access to Swedish Precision Medicine datasets. We are currently conducting a pilot project with BrainChild (link) to fill the important need of sharing data within childhood cancer to researchers and clinicians. Stay tuned!\ + +\fs48 \ +\pard\pardeftab720\sa80\partightenfactor0 +\cf2 Find your repository\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs28 \cf2 Links to area-specific data repositories and tools that could be used in your Precision Medicine research \ + +\fs48 \ +\pard\pardeftab720\sa80\partightenfactor0 +\cf2 Latest news\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs28 \cf2 Latest news in the Precision Medicine field and new functionalities on the platform +\fs48 \ +\ +\pard\pardeftab720\sa80\partightenfactor0 +\cf2 Upcoming events\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs28 \cf2 Find bioinformatics, GDPR and other types of training, as well as Precision Medicine events in Europe\ +\ +\pard\pardeftab720\sa80\partightenfactor0 + +\fs48 \cf2 Data platform\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs28 \cf2 Our Precision Medicine data catalogue is still under development \ +\ +\pard\pardeftab720\sa80\partightenfactor0 + +\fs48 \cf2 Trusted Research Environment \ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs28 \cf2 Our Precision Medicine TRE is still under development. Our aim is to offer a centralised place for storage, analysis and sharing.} \ No newline at end of file diff --git a/react-app/public/content/Privacy_page.rtf b/react-app/public/content/Privacy_page.rtf new file mode 100644 index 0000000..304c356 --- /dev/null +++ b/react-app/public/content/Privacy_page.rtf @@ -0,0 +1,73 @@ +{\rtf1\ansi\ansicpg1252\cocoartf2709 +\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fswiss\fcharset0 Helvetica-Bold;} +{\colortbl;\red255\green255\blue255;\red25\green28\blue31;\red89\green98\blue106;\red251\green0\blue7; +\red56\green90\blue161;} +{\*\expandedcolortbl;;\cssrgb\c12941\c14510\c16078;\cssrgb\c42353\c45882\c49020;\cssrgb\c100000\c0\c0; +\cssrgb\c27843\c43922\c69412;} +\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0 +\deftab720 +\pard\pardeftab720\sa160\partightenfactor0 + +\f0\fs77 \cf2 \expnd0\expndtw0\kerning0 +#Privacy Policy +\fs25\fsmilli12800 \cf3 \ +\pard\pardeftab720\sa320\partightenfactor0 + +\fs32 \cf2 SciLifeLab operates the Swedish Precision Medicine Portal, which provides the +\f1\b \cf2 Service +\f0\b0 \cf2 .\ +This page is used to inform website visitors regarding our personal data processing policy. If you choose to use our +\f1\b \cf2 Service +\f0\b0 \cf2 , then your personal data will be processed in accordance with this policy.\ +The personal information that we collect is used for providing and improving the +\f1\b \cf2 Service +\f0\b0 \cf2 . We will not use or share your information with anyone except as described in this policy. All collected personal information will be processed for research purposes, i.e. using the lawful basis of public interest and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016, the General Data Protection Regulation.\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs62\fsmilli31073 \cf2 ##Visitor statistics\ +\pard\pardeftab720\sa320\partightenfactor0 + +\fs32 \cf2 We want to inform you that whenever you visit our +\f1\b \cf2 Service +\f0\b0 \cf2 , we collect the information that your browser sends to us, which is called \'92log data\'92. Log data may include: the website that you visited us from, the parts of our +\f1\b \cf2 Service +\f0\b0 \cf2 you visit, the date and duration of your visit, your anonymised IP address, information from the device that you used during your visit (device type, operating system, screen resolution, language, country you are located in, and web browser type), and more. We process this usage data in Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab) for statistical purposes, to improve our +\f1\b \cf2 Service +\f0\b0 \cf2 , and to recognise and stop any misuse.\ +You can opt out of your statistics being collected below:\ +\pard\pardeftab720\sa320\partightenfactor0 + +\f1\b \cf4 The tracking opt-out feature requires cookies to be enabled.\ +\pard\pardeftab720\partightenfactor0 + +\f0\b0 \cf0 \ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs62\fsmilli31073 \cf2 ##Forms\ +\pard\pardeftab720\sa320\partightenfactor0 + +\fs32 \cf2 Our +\f1\b \cf2 Service +\f0\b0 \cf2 contains a number of forms that visitors can use to contact us or send us suggestions. The website visitors may choose to provide their personal information such as their name and e-mail address through these forms.\ +The following parties will have access to processing the personal data provided through the forms; SciLifeLab Data Centre, Uppsala University, Kungliga Tekniska h\'f6gskolan (KTH). Your personal data will be deleted when no longer needed, or when stipulated by the archival rules for the university as a government authority. If you want to update or remove your personal data, please contact\uc0\u8239 the controller SciLifeLab Data Centre at Uppsala University using \cf5 x@scilifelab.se\cf2 \ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs62\fsmilli31073 \cf2 ##Links to Other Sites\ +\pard\pardeftab720\sa320\partightenfactor0 + +\fs32 \cf2 Our +\f1\b \cf2 Service +\f0\b0 \cf2 may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by us. Therefore, we strongly advise you to review the privacy policy of these websites. We have no control over, and assume no responsibility for, the content, privacy policies, or practices of any third-party sites or services.\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs62\fsmilli31073 \cf2 ##Changes to This Privacy Policy\ +\pard\pardeftab720\sa320\partightenfactor0 + +\fs32 \cf2 We may update our privacy policy from time to time. Thus, we advise you to review this page periodically for any changes. We will notify you of any changes by posting the new privacy policy on this page. These changes posted on this page are effective immediately.\ +\pard\pardeftab720\sa160\partightenfactor0 + +\fs62\fsmilli31073 \cf2 ##Contact Us\ +\pard\pardeftab720\sa320\partightenfactor0 + +\fs32 \cf2 If you have any questions or suggestions about our privacy policy, do not hesitate to contact us (link to contact page).\ +} \ No newline at end of file From cafa2334df4ca1156f341ab37bad42e0817fd21e Mon Sep 17 00:00:00 2001 From: SevLG Date: Tue, 6 Feb 2024 16:10:18 +0100 Subject: [PATCH 13/14] Adding text content to privacy page. Currently hardcoded manually, should work on a more dynamic solution that can extract text from file as it will be written in markdown format by Natashia. --- react-app/public/content/Privacy_page.md | 18 +++++ react-app/public/content/Privacy_page.rtf | 73 -------------------- react-app/src/pages/PrivacyPage.tsx | 83 +++++++++++++++++------ 3 files changed, 80 insertions(+), 94 deletions(-) create mode 100644 react-app/public/content/Privacy_page.md delete mode 100644 react-app/public/content/Privacy_page.rtf diff --git a/react-app/public/content/Privacy_page.md b/react-app/public/content/Privacy_page.md new file mode 100644 index 0000000..4ac6c36 --- /dev/null +++ b/react-app/public/content/Privacy_page.md @@ -0,0 +1,18 @@ +#Privacy Policy +SciLifeLab operates the Swedish Precision Medicine Portal, which provides the Service. +This page is used to inform website visitors regarding our personal data processing policy. If you choose to use our Service, then your personal data will be processed in accordance with this policy. +The personal information that we collect is used for providing and improving the Service. We will not use or share your information with anyone except as described in this policy. All collected personal information will be processed for research purposes, i.e. using the lawful basis of public interest and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016, the General Data Protection Regulation. +##Visitor statistics +We want to inform you that whenever you visit our Service, we collect the information that your browser sends to us, which is called ’log data’. Log data may include: the website that you visited us from, the parts of our Service you visit, the date and duration of your visit, your anonymised IP address, information from the device that you used during your visit (device type, operating system, screen resolution, language, country you are located in, and web browser type), and more. We process this usage data in Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab) for statistical purposes, to improve our Service, and to recognise and stop any misuse. +You can opt out of your statistics being collected below: +The tracking opt-out feature requires cookies to be enabled. + +##Forms +Our Service contains a number of forms that visitors can use to contact us or send us suggestions. The website visitors may choose to provide their personal information such as their name and e-mail address through these forms. +The following parties will have access to processing the personal data provided through the forms; SciLifeLab Data Centre, Uppsala University, Kungliga Tekniska högskolan (KTH). Your personal data will be deleted when no longer needed, or when stipulated by the archival rules for the university as a government authority. If you want to update or remove your personal data, please contact the controller SciLifeLab Data Centre at Uppsala University using x@scilifelab.se +##Links to Other Sites +Our Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by us. Therefore, we strongly advise you to review the privacy policy of these websites. We have no control over, and assume no responsibility for, the content, privacy policies, or practices of any third-party sites or services. +##Changes to This Privacy Policy +We may update our privacy policy from time to time. Thus, we advise you to review this page periodically for any changes. We will notify you of any changes by posting the new privacy policy on this page. These changes posted on this page are effective immediately. +##Contact Us +If you have any questions or suggestions about our privacy policy, do not hesitate to contact us (link to contact page). diff --git a/react-app/public/content/Privacy_page.rtf b/react-app/public/content/Privacy_page.rtf deleted file mode 100644 index 304c356..0000000 --- a/react-app/public/content/Privacy_page.rtf +++ /dev/null @@ -1,73 +0,0 @@ -{\rtf1\ansi\ansicpg1252\cocoartf2709 -\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fswiss\fcharset0 Helvetica-Bold;} -{\colortbl;\red255\green255\blue255;\red25\green28\blue31;\red89\green98\blue106;\red251\green0\blue7; -\red56\green90\blue161;} -{\*\expandedcolortbl;;\cssrgb\c12941\c14510\c16078;\cssrgb\c42353\c45882\c49020;\cssrgb\c100000\c0\c0; -\cssrgb\c27843\c43922\c69412;} -\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0 -\deftab720 -\pard\pardeftab720\sa160\partightenfactor0 - -\f0\fs77 \cf2 \expnd0\expndtw0\kerning0 -#Privacy Policy -\fs25\fsmilli12800 \cf3 \ -\pard\pardeftab720\sa320\partightenfactor0 - -\fs32 \cf2 SciLifeLab operates the Swedish Precision Medicine Portal, which provides the -\f1\b \cf2 Service -\f0\b0 \cf2 .\ -This page is used to inform website visitors regarding our personal data processing policy. If you choose to use our -\f1\b \cf2 Service -\f0\b0 \cf2 , then your personal data will be processed in accordance with this policy.\ -The personal information that we collect is used for providing and improving the -\f1\b \cf2 Service -\f0\b0 \cf2 . We will not use or share your information with anyone except as described in this policy. All collected personal information will be processed for research purposes, i.e. using the lawful basis of public interest and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016, the General Data Protection Regulation.\ -\pard\pardeftab720\sa160\partightenfactor0 - -\fs62\fsmilli31073 \cf2 ##Visitor statistics\ -\pard\pardeftab720\sa320\partightenfactor0 - -\fs32 \cf2 We want to inform you that whenever you visit our -\f1\b \cf2 Service -\f0\b0 \cf2 , we collect the information that your browser sends to us, which is called \'92log data\'92. Log data may include: the website that you visited us from, the parts of our -\f1\b \cf2 Service -\f0\b0 \cf2 you visit, the date and duration of your visit, your anonymised IP address, information from the device that you used during your visit (device type, operating system, screen resolution, language, country you are located in, and web browser type), and more. We process this usage data in Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab) for statistical purposes, to improve our -\f1\b \cf2 Service -\f0\b0 \cf2 , and to recognise and stop any misuse.\ -You can opt out of your statistics being collected below:\ -\pard\pardeftab720\sa320\partightenfactor0 - -\f1\b \cf4 The tracking opt-out feature requires cookies to be enabled.\ -\pard\pardeftab720\partightenfactor0 - -\f0\b0 \cf0 \ -\pard\pardeftab720\sa160\partightenfactor0 - -\fs62\fsmilli31073 \cf2 ##Forms\ -\pard\pardeftab720\sa320\partightenfactor0 - -\fs32 \cf2 Our -\f1\b \cf2 Service -\f0\b0 \cf2 contains a number of forms that visitors can use to contact us or send us suggestions. The website visitors may choose to provide their personal information such as their name and e-mail address through these forms.\ -The following parties will have access to processing the personal data provided through the forms; SciLifeLab Data Centre, Uppsala University, Kungliga Tekniska h\'f6gskolan (KTH). Your personal data will be deleted when no longer needed, or when stipulated by the archival rules for the university as a government authority. If you want to update or remove your personal data, please contact\uc0\u8239 the controller SciLifeLab Data Centre at Uppsala University using \cf5 x@scilifelab.se\cf2 \ -\pard\pardeftab720\sa160\partightenfactor0 - -\fs62\fsmilli31073 \cf2 ##Links to Other Sites\ -\pard\pardeftab720\sa320\partightenfactor0 - -\fs32 \cf2 Our -\f1\b \cf2 Service -\f0\b0 \cf2 may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by us. Therefore, we strongly advise you to review the privacy policy of these websites. We have no control over, and assume no responsibility for, the content, privacy policies, or practices of any third-party sites or services.\ -\pard\pardeftab720\sa160\partightenfactor0 - -\fs62\fsmilli31073 \cf2 ##Changes to This Privacy Policy\ -\pard\pardeftab720\sa320\partightenfactor0 - -\fs32 \cf2 We may update our privacy policy from time to time. Thus, we advise you to review this page periodically for any changes. We will notify you of any changes by posting the new privacy policy on this page. These changes posted on this page are effective immediately.\ -\pard\pardeftab720\sa160\partightenfactor0 - -\fs62\fsmilli31073 \cf2 ##Contact Us\ -\pard\pardeftab720\sa320\partightenfactor0 - -\fs32 \cf2 If you have any questions or suggestions about our privacy policy, do not hesitate to contact us (link to contact page).\ -} \ No newline at end of file diff --git a/react-app/src/pages/PrivacyPage.tsx b/react-app/src/pages/PrivacyPage.tsx index 465a453..b981760 100644 --- a/react-app/src/pages/PrivacyPage.tsx +++ b/react-app/src/pages/PrivacyPage.tsx @@ -20,33 +20,66 @@ export default function PrivacyPage(): ReactElement { }, []) var textBarContent: string = "Transparency is one of our guiding principles. Get acquainted with how we're creating a secure space for you."; - var privacyDescription: string = ` - Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. - Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, - eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, - pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. - Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, - eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, - pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. - Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. - Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, - eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. + var policyText: string = ` + SciLifeLab operates the Swedish Precision Medicine Portal, which provides the Service. This page is + used to inform website visitors regarding our personal data processing policy. If you choose to use + our Service, then your personal data will be processed in accordance with this policy. The personal + information that we collect is used for providing and improving the Service. We will not use + or share your information with anyone except as described in this policy. All collected personal + information will be processed for research purposes, i.e. using the lawful basis of public interest + and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of + 27 April 2016, the General Data Protection Regulation. `; - var trackingMessage: string = ` - We want to inform you that whenever you visit this website, we collect information that - your browser sends to us which includes: the website from which you visited us from, - the parts of the website you visit, the date and duration of your visit, your anonymised IP address, - information from the device (device type, operating system, screen resolution, language, country you are located in, and web browser type) - you used during your visit, and more. We process this usage data in Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab) - for statistical purposes, to improve the product and to recognize and stop any misuse. + var visitorStatisticsText: string = ` + We want to inform you that whenever you visit our Service, we collect the information that your + browser sends to us, which is called "log data". Log data may include: the website that you + visited us from, the parts of our Service you visit, the date and duration of your visit, + your anonymised IP address, information from the device that you used during your visit (device + type, operating system, screen resolution, language, country you are located in, and + web browser type), and more. We process this usage data in Matomo Analytics (hosted on + SciLifeLab servers and operated solely by SciLifeLab) for statistical purposes, to + improve our Service, and to recognise and stop any misuse. You can opt out of your + statistics being collected below:\n\nThe tracking opt-out feature requires cookies to be enabled. + `; + var formsText: string = ` + Our Service contains a number of forms that visitors can use to contact us or send us suggestions. + The website visitors may choose to provide their personal information such as their name and e-mail + address through these forms. The following parties will have access to processing the personal data + provided through the forms; SciLifeLab Data Centre, Uppsala University, Kungliga Tekniska högskolan + (KTH). Your personal data will be deleted when no longer needed, or when stipulated by the archival + rules for the university as a government authority. If you want to update or remove your personal data, + please contact the controller SciLifeLab Data Centre at Uppsala University using x@scilifelab.se `; + var linksToOtherSitesText: string = ` + Our Service may contain links to other sites. If you click on a third-party link, you will be + directed to that site. Note that these external sites are not operated by us. Therefore, we + strongly advise you to review the privacy policy of these websites. We have no control over, + and assume no responsibility for, the content, privacy policies, or practices of any third-party + sites or services. + `; + var changeToPrivacyText: string = ` + We may update our privacy policy from time to time. Thus, we advise you to review this page + periodically for any changes. We will notify you of any changes by posting the new privacy policy + on this page. These changes posted on this page are effective immediately. + `; + var contactUsText: string = ` + If you have any questions or suggestions about our privacy policy, do not hesitate to contact + us (link to contact page). + `; var breadcrumbs: { [id: string] : ILink; } = { 'l1': { text: 'Home', classes: '', link: '/' }, 'l2': { text: 'Privacy', classes: '', link: '' }, }; - var dividers: string[] = ['Default', 'Default']; + var dividers: string[] = [ + 'Privacy Policy', + 'Visitor statistics', + 'Forms', + 'Links to Other Sites', + 'Changes to This Privacy Policy', + 'Contact Us', + ]; var alertMessage: string = "we use cookies for no reason."; @@ -63,9 +96,9 @@ export default function PrivacyPage(): ReactElement {
Privacy Policy
{dividers[0]}
-

{privacyDescription}

+

{policyText}

{dividers[1]}
-

{trackingMessage}

+

{visitorStatisticsText}

{alertMessage} @@ -74,6 +107,14 @@ export default function PrivacyPage(): ReactElement {
+
{dividers[2]}
+

{formsText}

+
{dividers[3]}
+

{linksToOtherSitesText}

+
{dividers[4]}
+

{changeToPrivacyText}

+
{dividers[5]}
+

{contactUsText}

); From 9679ed40c20c43691a39410819c369df83568418 Mon Sep 17 00:00:00 2001 From: SevLG Date: Tue, 6 Feb 2024 16:33:06 +0100 Subject: [PATCH 14/14] Removed some unused variables that had been moved to About pages children --- react-app/src/pages/AboutPage.tsx | 51 +------------------------------ 1 file changed, 1 insertion(+), 50 deletions(-) diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx index e39fa5f..83101b8 100644 --- a/react-app/src/pages/AboutPage.tsx +++ b/react-app/src/pages/AboutPage.tsx @@ -7,7 +7,7 @@ import { PAGE_DESCRIPTION_TEXT_BAR_CLASSES, } from '../constants'; import { Link, NavLink, Outlet } from 'react-router-dom'; -import { ILink, ICardConfig, ICardContent } from '../interfaces/types'; +import { ILink, } from '../interfaces/types'; export default function AboutPage(): ReactElement { const { trackPageView,} = useMatomo() @@ -19,60 +19,11 @@ export default function AboutPage(): ReactElement { var pageTitle: string = "About Us"; var textBarContent: string = "Get to know about the team behind the [product name] and our mission to connect you with the data you need."; - var PMDDescription: string = ` - Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. - Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, - eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, - pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. - Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, - eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, - pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. - Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. - Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, - eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. - `; - - var cardConfig: { [id: string] : ICardConfig; } = { - 'teamCard': { - cardClasses: "card w-96 bg-base-100 shadow-xl", - titleClasses: "card-title", - textClasses: "", - buttonClasses: "", - buttonPlacement: "", - }, - 'fundersAndPartnersCard': { - cardClasses: "card lg:card-side bg-base-100 shadow-xl", - titleClasses: "card-title", - textClasses: "", - buttonClasses: "", - buttonPlacement: "", - }, - }; - - var cardContent: { [id: string] : ICardContent } = { - 'teamCard1': { - title: "Shoes!", - text: "If a dog chews shoes whose shoes does he choose?", - buttonText: "", - imageSrc: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", - imageAlt: "Shoes", - }, - 'fundersAndPartnersCard1': { - title: "New album is released!", - text: "Click the button to listen on Spotiwhy app.", - buttonText: "", - imageSrc: "https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg", - imageAlt: "Album", - }, - }; - var breadcrumbs: { [id: string] : ILink; } = { 'l1': { text: 'Home', classes: '', link: '/' }, 'l2': { text: 'About', classes: '', link: '' }, }; - - var dividers: string[] = ['Default', 'Default', 'Default', 'Default', 'Default']; return ( <>