📱 made more responsive

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2024-01-13 16:09:34 +01:00
parent 15ce277167
commit 4a93ac4552
13 changed files with 42 additions and 37 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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}

View file

@ -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}/>

View file

@ -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>

View file

@ -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>