sidski/helseveileder
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

📱 made more responsive

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app.css
View file

@ -1,3 +1,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body {
background: #eef0f3;
}

1
frontend/src/app.html
View file

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./app.css" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

6
frontend/src/components/form/footer/Footer.svelte
View file

@ -27,16 +27,16 @@
</script> </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)}> <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"/> <ArrowChevron width=16 direction="left"/>
Forrige spørsmål Forrige spørsmål
</button> </button>
<button disabled={questionNum == 0 || questionNum % 4 != 0} on:click={handleFormSubmit} <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 Send inn svar
</button> </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 Neste spørsmål
<ArrowChevron width=16 direction="right"/> <ArrowChevron width=16 direction="right"/>
</button> </button>

10
frontend/src/components/form/header/FormHeader.svelte
View file

@ -5,14 +5,14 @@
export let questionNum:number export let questionNum:number
</script> </script>
<div class="flex justify-center items-center h-20"> <div class="flex justify-center items-center md:h-20">
<div class="w-1/3"/> <div class="hidden md:flex w-1/3"/>
<div class="flex justify-center items-center w-2/3 gap-4"> <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> <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> <p class="text-sm">{formQuestion}</p>
</div> </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"> <a class="-" href="/reportbug">
<CircleExclamation width="16" height="16" /> <CircleExclamation width="16" height="16" />
</a> </a>

4
frontend/src/components/userform/UserFormInput.svelte
View file

@ -14,8 +14,8 @@
import Select from "./inputs/Select.svelte"; import Select from "./inputs/Select.svelte";
</script> </script>
<div class="flex justify-start items-center h-1/4 w-full "> <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-1/5">{label}:</p> <p class="text-primary font-bold w-auto">{label}:</p>
{#if inputType == "radio"} {#if inputType == "radio"}
<RadioButtons on:update={(e) => handleFormChange(e.detail)} selected={formData} options={options}/> <RadioButtons on:update={(e) => handleFormChange(e.detail)} selected={formData} options={options}/>
{/if} {/if}

2
frontend/src/components/userform/inputs/RadioButtons.svelte
View file

@ -9,7 +9,7 @@
export let selected: string export let selected: string
</script> </script>
<div class="flex justify-between w-full"> <div class="flex justify-between w-full md:pl-5">
{#each options as data, index (data)} {#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"> <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`}> <div class={`${selected == data && "bg-primary"} flex justify-center items-center h-6 w-6 rounded-full border-2 border-primary hover:bg-primary`}>

2
frontend/src/components/userform/inputs/Select.svelte
View file

@ -7,7 +7,7 @@
export let options:string[] export let options:string[]
</script> </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)} {#each options as data, index (data)}
<option on:click={() => handleButtonClick(data)} id={data}>{data}</option> <option on:click={() => handleButtonClick(data)} id={data}>{data}</option>
{/each} {/each}

2
frontend/src/routes/+layout.svelte
View file

@ -2,6 +2,6 @@
import "../app.css"; import "../app.css";
</script> </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 /> <slot />
</div> </div>

18
frontend/src/routes/+page.svelte
View file

@ -1,29 +1,29 @@
<script> <script>
import ButtonComponent from "../components/userform/inputs/ButtonComponent.svelte"; import ButtonComponent from "../components/userform/inputs/ButtonComponent.svelte";
</script> </script>
<div class="flex flex-col justify-between items-center h-full"> <div class="flex flex-col justify-between items-center h-full w-full">
<div class="flex h-full items-center"> <div class="flex flex-col md:flex-row h-full w-full items-center">
<div class="flex flex-col w-3/5 gap-4 px-32"> <div class="flex flex-col w-11/12 md:w-3/5 gap-2 md:gap-4 md:px-32">
<h1 class="text-7xl text-primary font-bold">Helseveileder</h1> <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>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> <p>Undersøkelsen er helt anonym.</p>
<ul> <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>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>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> <li><strong>Hjelpsomhet:</strong> Evnen til å gi nyttig og praktisk råd eller støtte.</li>
</ul> </ul>
</div> </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"> <a href="/userform">
<ButtonComponent text="Start undersøkelse" filled={false} /> <ButtonComponent text="Start undersøkelse" filled={false} />
</a> </a>
</div> </div>
</div> </div>
<div class="flex justify-center items-center gap-8 text-primary font-bold"> <div class="flex justify-center items-center gap-20 md:gap-20 text-primary font-bold mt-10 md:mt-0">
<button><a href="/personvern">Personvern</a></button> <button class="w-20"><a href="/personvern">Personvern</a></button>
<button><a href="/info">Mer info</a></button> <button class="w-20"><a href="/info">Mer info</a></button>
</div> </div>
</div> </div>

8
frontend/src/routes/evaluation/+page.svelte
View file

@ -15,15 +15,15 @@
</script> </script>
<div class="flex flex-col justify-between items-center h-full"> <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-14 md:gap-8 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">Takk for at du tok deg tid!</h1> <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>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> <p>Har du tid så setter vi veldig pris på om du skrevet en liten tilbakemelding til oss i tekstfeltet under:</p>
</div> </div>
<div class="flex flex-col gap-4 justify-center items-center"> <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 w-1/3" placeholder="Skriv evaluering her"></textarea> <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 <button
class="text-primary hover:bg-primary hover:text-bg font-bold border-primary border-2 rounded-full px-8 py-1" class="text-primary hover:bg-primary hover:text-bg font-bold border-primary border-2 rounded-full px-8 py-1"
on:click={handleEvaluationSubmit} on:click={handleEvaluationSubmit}

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

@ -63,9 +63,9 @@
}); });
</script> </script>
<div class="flex flex-col h-full"> <div class="flex flex-col h-full gap-4">
<FormHeader questionNum={questionNumber} formQuestion={formQuestion}/> <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} {#key questionNumber}
<AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/> <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}/> <AnswerBox on:update={(e) => question2Answered = e.detail} answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>

4
frontend/src/routes/personvern/+page.svelte
View file

@ -1,6 +1,6 @@
<div class="flex flex-col justify-between items-center h-full"> <div class="flex flex-col justify-between items-center h-full">
<div class="flex h-full mt-8"> <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> <h1 class="text-3xl text-primary font-bold">Personvern</h1>
<p> <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. 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> </p>
</div> </div>
</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> <button><a href="/">Tilbake</a></button>
</div> </div>
</div> </div>

14
frontend/src/routes/userform/+page.svelte
View file

@ -28,17 +28,17 @@
} }
</script> </script>
<div class="flex flex-col justify-center gap-20 h-full "> <div class="flex flex-col md:justify-center gap-6 md:gap-20 h-full">
<a class="ml-32" href="/"> <a class="md:ml-32" href="/">
<ArrowBack width="2rem" /> <ArrowBack width="2rem" />
</a> </a>
<div class="flex h-4/5 "> <div class="flex flex-col md:flex-row h-full md:h-4/5 gap-6">
<div class="flex flex-col justify-center w-2/4 gap-4 px-32 "> <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">Informasjon om deltaker</h1> <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>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> <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>
<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={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={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"]}/> <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"]}/> <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> </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)} /> <ButtonComponent text="Start undersøkelse" filled={true} onclick={() => handleUserformSubmit(age, education, healthcare_personnel, gender, has_answered_before, county)} />
</div> </div>
</div> </div>