From 4a93ac4552950bac5514d5c46415a2b8fefeff49 Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Sat, 13 Jan 2024 16:09:34 +0100
Subject: [PATCH] :iphone: made more responsive

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 frontend/src/app.css                           |  4 ++++
 frontend/src/app.html                          |  1 +
 .../src/components/form/footer/Footer.svelte   |  6 +++---
 .../components/form/header/FormHeader.svelte   | 10 +++++-----
 .../components/userform/UserFormInput.svelte   |  4 ++--
 .../userform/inputs/RadioButtons.svelte        |  2 +-
 .../components/userform/inputs/Select.svelte   |  2 +-
 frontend/src/routes/+layout.svelte             |  2 +-
 frontend/src/routes/+page.svelte               | 18 +++++++++---------
 frontend/src/routes/evaluation/+page.svelte    |  8 ++++----
 frontend/src/routes/form/[slug]/+page.svelte   |  4 ++--
 frontend/src/routes/personvern/+page.svelte    |  4 ++--
 frontend/src/routes/userform/+page.svelte      | 14 +++++++-------
 13 files changed, 42 insertions(+), 37 deletions(-)
diff --git a/frontend/src/app.css b/frontend/src/app.css
index b5c61c9..e1f0672 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+	background: #eef0f3;
+}
diff --git a/frontend/src/app.html b/frontend/src/app.html
index cfc9c84..e1d944e 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="stylesheet" href="./app.css" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/frontend/src/components/form/footer/Footer.svelte b/frontend/src/components/form/footer/Footer.svelte
index 359d525..88a6f09 100644
--- a/frontend/src/components/form/footer/Footer.svelte
+++ b/frontend/src/components/form/footer/Footer.svelte
@@ -27,16 +27,16 @@
 
 </script>
 
-<div class="flex justify-center items-center gap-8">
+<div class="flex justify-center items-center gap-8 mt-8 md:mt-0">
     <button disabled={questionNum == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum == 0 && "opacity-50"}`} on:click={() => gotoPrevPage(questionNum)}>
         <ArrowChevron width=16 direction="left"/>
         Forrige spørsmål
     </button>
     <button disabled={questionNum == 0 || questionNum % 4 != 0} on:click={handleFormSubmit}
-    class={`${(questionNum == 0 || questionNum % 4 != 0) || (questionNum % 4 == 0 && !answeredAll) ?  "hidden" : "bg-primary text-bg hover:bg-bg hover:text-primary"} font-bold uppercase border-primary border-2 rounded-full px-8 py-3`}>
+    class={`${(questionNum == 0 || questionNum % 4 != 0) || (questionNum % 4 == 0 && !answeredAll) ?  "hidden" : "bg-primary text-bg hover:bg-bg hover:text-primary"} font-bold uppercase border-primary border-2 rounded-full px-2 md:px-8 py-3`}>
             Send inn svar
     </button>
-    <button disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`flex items-center gap-2 text-primary font-semibold ${(questionNum != 0 && questionNum % 4 == 0) || !answeredAll && "opacity-50"} ${questionNum % 4 == 0 && "opacity-50"} `} on:click={() => gotoNextPage(questionNum)}>
+    <button disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`flex items-center gap-2 text-primary font-semibold ${(questionNum != 0 && questionNum % 4 == 0) || !answeredAll && "opacity-50"} ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"} ${questionNum % 4 == 0 && questionNum != 0 &&  answeredAll && "hidden"}`} on:click={() => gotoNextPage(questionNum)}>
         Neste spørsmål
         <ArrowChevron width=16 direction="right"/>
     </button>
diff --git a/frontend/src/components/form/header/FormHeader.svelte b/frontend/src/components/form/header/FormHeader.svelte
index a32f7c9..ed2bf18 100644
--- a/frontend/src/components/form/header/FormHeader.svelte
+++ b/frontend/src/components/form/header/FormHeader.svelte
@@ -5,14 +5,14 @@
     export let questionNum:number
 </script>
 
-<div class="flex justify-center items-center h-20">
-    <div class="w-1/3"/>
-    <div class="flex justify-center items-center w-2/3 gap-4">
+<div class="flex justify-center items-center md:h-20">
+    <div class="hidden md:flex w-1/3"/>
+    <div class="flex md:justify-center items-center md:w-2/3 gap-4">
         <h1 class="text-xl text-primary font-bold text-center">Spørsmål {Number(questionNum) + 1}</h1>
-        <div class="border-r-2 border-primary h-24"></div>
+        <div class="border-r-2 border-primary min-h-24 h-full"></div>
         <p class="text-sm">{formQuestion}</p>
     </div>
-    <div class="flex justify-end pr-20 items-center w-1/3">
+    <div class="hidden md:flex justify-end pr-20 items-center w-1/3">
         <a class="-" href="/reportbug">
             <CircleExclamation width="16" height="16" />    
         </a>
diff --git a/frontend/src/components/userform/UserFormInput.svelte b/frontend/src/components/userform/UserFormInput.svelte
index 42c3244..54b8cf0 100644
--- a/frontend/src/components/userform/UserFormInput.svelte
+++ b/frontend/src/components/userform/UserFormInput.svelte
@@ -14,8 +14,8 @@
     import Select from "./inputs/Select.svelte";
 </script>
 
-<div class="flex justify-start items-center h-1/4 w-full ">
-    <p class="text-primary font-bold w-1/5">{label}:</p>
+<div class="flex flex-col md:flex-row justify-between md:justify-start items-start gap-3 md:gap-0 md:h-1/4 w-full">
+    <p class="text-primary font-bold w-auto">{label}:</p>
     {#if inputType == "radio"}
         <RadioButtons on:update={(e) => handleFormChange(e.detail)} selected={formData} options={options}/>
     {/if}
diff --git a/frontend/src/components/userform/inputs/RadioButtons.svelte b/frontend/src/components/userform/inputs/RadioButtons.svelte
index be56232..908e505 100644
--- a/frontend/src/components/userform/inputs/RadioButtons.svelte
+++ b/frontend/src/components/userform/inputs/RadioButtons.svelte
@@ -9,7 +9,7 @@
     export let selected: string
 </script>
 
-<div class="flex justify-between w-full">
+<div class="flex justify-between w-full md:pl-5">
 {#each options as data, index (data)}
     <button name={data} on:click={() => handleButtonClick(data)} class="flex flex-col justify-start items-center w-12 text-center hover:cursor-pointer">
         <div class={`${selected == data && "bg-primary"} flex justify-center items-center h-6 w-6 rounded-full border-2 border-primary hover:bg-primary`}>
diff --git a/frontend/src/components/userform/inputs/Select.svelte b/frontend/src/components/userform/inputs/Select.svelte
index d04d62c..7488eb1 100644
--- a/frontend/src/components/userform/inputs/Select.svelte
+++ b/frontend/src/components/userform/inputs/Select.svelte
@@ -7,7 +7,7 @@
     export let options:string[]
 </script>
 
-<select class="ml-6 pl-2 pr-16 py-2 rounded-xl text-primary border-primary border-2 text-start hover:cursor-pointer ">
+<select class="md:ml-6 pl-2 pr-16 py-2 rounded-xl text-primary border-primary border-2 text-start hover:cursor-pointer ">
     {#each options as data, index (data)}
         <option on:click={() => handleButtonClick(data)} id={data}>{data}</option>
     {/each}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 92bbd07..5c17696 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -2,6 +2,6 @@
     import "../app.css";
 </script>
 
-<div class="bg-bg w-screen h-screen px-28 py-6">
+<div class="bg-bg w-screen h-full px-8 md:px-28 py-6">
     <slot />
 </div>
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 800c6a0..67f38e9 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,29 +1,29 @@
 <script>
 	import ButtonComponent from "../components/userform/inputs/ButtonComponent.svelte";
 </script>
-<div class="flex flex-col justify-between items-center h-full">
-    <div class="flex h-full items-center">
-        <div class="flex flex-col w-3/5 gap-4 px-32">
-            <h1 class="text-7xl text-primary font-bold">Helseveileder</h1>
+<div class="flex flex-col justify-between items-center h-full w-full">
+    <div class="flex flex-col md:flex-row h-full w-full items-center">
+        <div class="flex flex-col w-11/12 md:w-3/5 gap-2 md:gap-4 md:px-32">
+            <h1 class="text-5xl md:text-7xl text-primary font-bold pb-2">Helseveileder</h1>
             <p>Vi utfører en undersøkelse om kunstig intelligens (AI) i medisin. Vi ønsker å forstå hvordan AI kan fungere som en copilot for leger og pasienter.</p>
             <p>Undersøkelsen er helt anonym.</p>
             <ul>
-                <p>I denne undersøkelsen vil vi at du skal vurdere empati, kunnskap og hjelpsomhet i ulike svar på medisinske spørsmål.</p>
+                <p class="mb-4">I denne undersøkelsen vil vi at du skal vurdere empati, kunnskap og hjelpsomhet i ulike svar på medisinske spørsmål.</p>
                 <li><strong>Empati:</strong> Evnen til å oppdage og erkjenne andres følelser og tanker.</li>
                 <li><strong>Kunnskap:</strong> Nøyaktighet og relevans av den medisinske informasjonen gitt.</li>
                 <li><strong>Hjelpsomhet:</strong> Evnen til å gi nyttig og praktisk råd eller støtte.</li>
             </ul>               
         
         </div>
-        <div class="flex justify-center items-center w-2/5">
+        <div class="flex justify-center items-center md:w-2/5 mt-8 md:mt-0">
             <a href="/userform">
                 <ButtonComponent text="Start undersøkelse" filled={false} />
             </a>
         </div>
     </div>
-    <div class="flex justify-center items-center gap-8 text-primary font-bold">
-        <button><a href="/personvern">Personvern</a></button>
-        <button><a href="/info">Mer info</a></button>
+    <div class="flex justify-center items-center gap-20 md:gap-20 text-primary font-bold mt-10 md:mt-0">
+        <button class="w-20"><a href="/personvern">Personvern</a></button>
+        <button class="w-20"><a href="/info">Mer info</a></button>
     </div>
 </div>
 
diff --git a/frontend/src/routes/evaluation/+page.svelte b/frontend/src/routes/evaluation/+page.svelte
index 5df36d5..4fccf01 100644
--- a/frontend/src/routes/evaluation/+page.svelte
+++ b/frontend/src/routes/evaluation/+page.svelte
@@ -15,15 +15,15 @@
 </script>
 
 <div class="flex flex-col justify-between items-center h-full">
-    <div class="flex flex-col gap-8 h-full mt-8">
-        <div class="flex flex-col gap-4 px-96 items-center">
+    <div class="flex flex-col gap-14 md:gap-8 h-full mt-8">
+        <div class="flex flex-col gap-4 md:px-96 items-center">
             <h1 class="text-3xl text-primary font-bold">Takk for at du tok deg tid!</h1>
             <p>Tusen takk for hjelpen i denne undersøkelsen! Vi setter stor pris på det og håper du får en fin dag videre.</p>
             <p>Har du tid så setter vi veldig pris på om du skrevet en liten tilbakemelding til oss i tekstfeltet under:</p>
         </div>
         
-        <div class="flex flex-col gap-4 justify-center items-center">
-            <textarea bind:value={evaluationText} cols="30" rows="8" class="border-solid border-gray-400 border-2 p-3 md:text-l w-1/3" placeholder="Skriv evaluering her"></textarea>
+        <div class="flex flex-col gap-12 md:gap-8 justify-center items-center">
+            <textarea bind:value={evaluationText} cols="30" rows="8" class="border-solid border-gray-400 border-2 p-3 md:text-l md:w-1/3 rounded-md" placeholder="Skriv evaluering her"></textarea>
             <button 
                 class="text-primary hover:bg-primary hover:text-bg font-bold border-primary border-2 rounded-full px-8 py-1"
                 on:click={handleEvaluationSubmit}
diff --git a/frontend/src/routes/form/[slug]/+page.svelte b/frontend/src/routes/form/[slug]/+page.svelte
index ee9b42a..a1db757 100644
--- a/frontend/src/routes/form/[slug]/+page.svelte
+++ b/frontend/src/routes/form/[slug]/+page.svelte
@@ -63,9 +63,9 @@
     });
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full gap-4">
     <FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
-    <div class="flex h-full justify-between gap-12">
+    <div class="flex flex-col md:flex-row h-full justify-between gap-12">
         {#key questionNumber}     
             <AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
             <AnswerBox on:update={(e) => question2Answered = e.detail} answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>
diff --git a/frontend/src/routes/personvern/+page.svelte b/frontend/src/routes/personvern/+page.svelte
index 2b2f349..1a8a04a 100644
--- a/frontend/src/routes/personvern/+page.svelte
+++ b/frontend/src/routes/personvern/+page.svelte
@@ -1,6 +1,6 @@
 <div class="flex flex-col justify-between items-center h-full">
     <div class="flex h-full mt-8">
-        <div class="flex flex-col gap-4 px-96 items-center">
+        <div class="flex flex-col gap-4 md:px-96 items-center">
             <h1 class="text-3xl text-primary font-bold">Personvern</h1>
             <p>
                 Vi verdsetter din deltakelse i denne studien. Som en del av vår forpliktelse til å sikre personvern, ønsker vi å informere deg om hvordan vi håndterer dine data.
@@ -13,7 +13,7 @@
             </p>
         </div>
     </div>
-    <div class="flex justify-center items-center gap-8 text-primary font-bold">
+    <div class="flex justify-center items-center gap-8 mt-10 md:mt-0 text-primary font-bold">
         <button><a href="/">Tilbake</a></button>
     </div>
 </div>
diff --git a/frontend/src/routes/userform/+page.svelte b/frontend/src/routes/userform/+page.svelte
index 532f52e..9640de4 100644
--- a/frontend/src/routes/userform/+page.svelte
+++ b/frontend/src/routes/userform/+page.svelte
@@ -28,17 +28,17 @@
     }
 </script>
 
-<div class="flex flex-col justify-center gap-20 h-full ">
-    <a class="ml-32" href="/">
+<div class="flex flex-col md:justify-center gap-6 md:gap-20 h-full">
+    <a class="md:ml-32" href="/">
         <ArrowBack width="2rem" />
     </a>
-    <div class="flex h-4/5 ">
-        <div class="flex flex-col justify-center w-2/4 gap-4 px-32 ">
-            <h1 class="text-3xl text-primary font-bold">Informasjon om deltaker</h1>
+    <div class="flex flex-col md:flex-row h-full md:h-4/5 gap-6">
+        <div class="flex flex-col justify-center w-full md:w-2/4 gap-4 md:px-32 ">
+            <h1 class="text-3xl text-primary font-bold">Deltakerinformasjon</h1>
             <p>Til undersøkelsen trenger vi opplysninger om din aldersgruppe, utdanningsgrad, kjønn og bekreftelse på at du er helsepersonell.</p>
             <p>Vi vil igjen minne om at denne undersøkelsen er helt anonym. Se <a href="/personvern"class="text-primary font-bold">Personvern</a> for mer informasjon.</p>  
         </div>
-        <div class="flex flex-col justify-start items-center w-2/4">
+        <div class="flex flex-col gap-6 justify-start items-center md:w-2/4">
             <UserFormInput formData={age} on:update={(e) => age = e.detail} inputType="radio" label="Alder" options={["18-20", "20-30", "30-40", "40-50", "50-60"]}/>
             <UserFormInput formData={education} on:update={(e) => education = e.detail} inputType="select" label="Utdanningsgrad" options={["PhD", "Master", "Fagbrev", "Bachelor"]}/>
             <UserFormInput formData={county} on:update={(e) => county = e.detail} inputType="select" label="Fylke" options={["Vestland", "Rogaland", "Møre og Romsdal", "Oslo", "Viken", "Nordland", "Trøndelag", "Innlandet", "Troms og Finnmark", "Vestfold og Telemark", "Agder"]}/>
@@ -47,7 +47,7 @@
             <UserFormInput formData={has_answered_before} on:update={(e) => has_answered_before = e.detail} inputType="radio" label="Jeg har svart på denne undersøkelsen tidligere" options={["Ja", "Nei"]}/>
         </div>
     </div>
-    <div class="flex justify-center items-center gap-8 text-primary font-bold">
+    <div class="flex justify-center items-center gap-8 text-primary font-bold py-10 md:py-0">
         <ButtonComponent text="Start undersøkelse" filled={true} onclick={() => handleUserformSubmit(age, education, healthcare_personnel, gender, has_answered_before, county)} />
     </div>
 </div>
