From 60ed8cab6c12f32f5f03eacc5b9f85c0cc503312 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Sun, 14 Jan 2024 14:44:49 +0100
Subject: [PATCH] :iphone: :lipstick: fix responiveness & some styling

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 .../components/form/answerbox/AnswerBox.svelte | 11 +++++++++--
 .../src/components/form/footer/Footer.svelte   |  2 +-
 .../components/form/header/FormHeader.svelte   | 13 +++++++------
 .../components/userform/UserFormInput.svelte   | 18 +++++++++++-------
 frontend/src/routes/form/[slug]/+page.svelte   | 12 ++++++++++--
 frontend/src/routes/info/+page.svelte          |  4 ++--
 6 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/form/answerbox/AnswerBox.svelte b/frontend/src/components/form/answerbox/AnswerBox.svelte
index 983d022..a7f7c8e 100644
--- a/frontend/src/components/form/answerbox/AnswerBox.svelte
+++ b/frontend/src/components/form/answerbox/AnswerBox.svelte
@@ -14,6 +14,8 @@
     let empathy:string
     let helpfulness:string
 
+    let isExpanded:boolean = false
+
     const handleFormUpdate = () => {
         if (knowledge && empathy && helpfulness) {
             dispatch("update", true)
@@ -64,8 +66,13 @@
 <div class="flex flex-col">
     <div class="flex flex-col gap-2 mb-6">
         <h1 class="text-xl text-primary font-bold text-center">Svar {answerNum}:</h1>
-        <div class="bg-secondary p-6 rounded-xl text-sm">
-            {answerText}
+        <div class="flex flex-col justify-between bg-secondary rounded-xl px-6 pt-6">     
+            <div class={`text-sm ${!isExpanded && "max-h-48"} overflow-hidden`}>
+                {answerText}
+            </div>
+            <button class="py-2 text-primary font-semibold" on:click={() => isExpanded = !isExpanded}>
+                {isExpanded ? "Vis mindre" : "Vis resten av svaret"}
+            </button>
         </div>
     </div>
     <div class="flex flex-col justify-start items-center gap-6">
diff --git a/frontend/src/components/form/footer/Footer.svelte b/frontend/src/components/form/footer/Footer.svelte
index fbede0f..c6e8daf 100644
--- a/frontend/src/components/form/footer/Footer.svelte
+++ b/frontend/src/components/form/footer/Footer.svelte
@@ -27,7 +27,7 @@
 
 </script>
 
-<div class="flex justify-center items-center gap-8 mt-8 md:mb-5">
+<div class="flex justify-center items-center gap-8 pb-4 mt-4 md:mb-5">
     <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
diff --git a/frontend/src/components/form/header/FormHeader.svelte b/frontend/src/components/form/header/FormHeader.svelte
index f40dfeb..41319e5 100644
--- a/frontend/src/components/form/header/FormHeader.svelte
+++ b/frontend/src/components/form/header/FormHeader.svelte
@@ -5,12 +5,13 @@
     export let questionNum:number
 </script>
 
-<div class="flex justify-center items-center md:h-20 md:mt-5">
-    <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 min-h-24 h-full"></div>
-        <p class="text-sm">{formQuestion}</p>
+<div class="flex justify-center items-start md:items-center md:h-auto md:mt-16">
+    <div class="flex justify-center">
+        <div class="flex flex-grow flex-col md:flex-row md:justify-center items-center md:w-4/5 gap-4">
+            <h1 class="text-xl text-primary font-bold text-center">Spørsmål {Number(questionNum) + 1}</h1>
+            <div class="border-b-2 md:border-r-2 border-primary min-h-24 w-full md:w-0 md:h-full" />
+            <p class="text-sm">{formQuestion}</p>
+        </div>
     </div>
     <div class="flex justify-end md:pr-20 items-center md:w-1/3">
         <a class="-" href="/reportbug">
diff --git a/frontend/src/components/userform/UserFormInput.svelte b/frontend/src/components/userform/UserFormInput.svelte
index 54b8cf0..420f7ff 100644
--- a/frontend/src/components/userform/UserFormInput.svelte
+++ b/frontend/src/components/userform/UserFormInput.svelte
@@ -15,11 +15,15 @@
 </script>
 
 <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}
-    {#if inputType == "select"}
-        <Select on:update={(e) => handleFormChange(e.detail)} options={options}/>
-    {/if}
+    <div class="w-full md:w-1/6">
+        <p class="text-primary font-bold w-auto">{label}:</p>
+    </div>
+    <div class="w-full md:w-5/6">
+        {#if inputType == "radio"}
+            <RadioButtons on:update={(e) => handleFormChange(e.detail)} selected={formData} options={options}/>
+        {/if}
+        {#if inputType == "select"}
+            <Select on:update={(e) => handleFormChange(e.detail)} options={options}/>
+        {/if}
+    </div>
 </div>
diff --git a/frontend/src/routes/form/[slug]/+page.svelte b/frontend/src/routes/form/[slug]/+page.svelte
index 9dc3184..8b46552 100644
--- a/frontend/src/routes/form/[slug]/+page.svelte
+++ b/frontend/src/routes/form/[slug]/+page.svelte
@@ -13,7 +13,7 @@
     let questionAnswer2Text: string = ""
     let questionAnswer2ID: number = 0
     let questionNumber: number = 0
-    
+
     let shouldSwitch = false;
 
     let question1Answered: boolean = false
@@ -68,16 +68,24 @@
 
 <div class="flex flex-col h-full md:h-screen gap-10">
     <FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
-    <div class="flex flex-col md:flex-row h-full  justify-between gap-12">
+    <div class="flex flex-col md:flex-row h-full justify-between gap-12">
         {#if shouldSwitch}
             {#key questionNumber}
+            <div class="flex-1">
                 <AnswerBox on:update={(e) => question2Answered = e.detail} answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>
+            </div>
+            <div class="flex-1">
                 <AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
+            </div>
             {/key}
         {:else}
             {#key questionNumber}
+            <div class="flex-1">
                 <AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
+            </div>
+            <div class="flex-1">
                 <AnswerBox on:update={(e) => question2Answered = e.detail} answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>
+            </div>
             {/key}
         {/if}
     </div>
diff --git a/frontend/src/routes/info/+page.svelte b/frontend/src/routes/info/+page.svelte
index 57abb2f..59ec335 100644
--- a/frontend/src/routes/info/+page.svelte
+++ b/frontend/src/routes/info/+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">Info</h1>
             <p>
                 Vi er to medisinstudenter som skriver hovedfagsoppgave om kunstig intelligens innen medisin. Inspirasjonen til dette prosjektet ble hentet fra en artikkel publisert i tidsskriftet JAMA, som undersøker hvordan ChatGPT responderer på kliniske spørsmål, sammenlignet med svar fra leger. Resultatene fra JAMA-artikkelen er lovende og viser at kunstig intelligens kan ha potensiale til å fungere som en co-pilot for leger. 
@@ -10,7 +10,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>