📱 💄 fix responiveness & some styling

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

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,9 +66,14 @@
 <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">
+        <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">
         <UserFormInput formData={knowledge} on:update={(e) => {knowledge = e.detail; handleFormUpdate()}} inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>

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

frontend/src/components/form/header/FormHeader.svelte

@@ -5,13 +5,14 @@
     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">
+<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-r-2 border-primary min-h-24 h-full"></div>
+            <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">
             <CircleExclamation width="16" height="16" />    

frontend/src/components/userform/UserFormInput.svelte

@@ -15,7 +15,10 @@
 </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">
+    <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}
@@ -23,3 +26,4 @@
             <Select on:update={(e) => handleFormChange(e.detail)} options={options}/>
         {/if}
     </div>
+</div>

frontend/src/routes/form/[slug]/+page.svelte

@@ -71,13 +71,21 @@
     <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>

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>