♻️ refactored code
This commit is contained in:
haraldnilsen
parent
4cd2ed9a8a
commit
9bc69f9c58
9 changed files with 73 additions and 69 deletions
18
frontend/src/components/form/answerbox/AnswerBox.svelte
Normal file
18
frontend/src/components/form/answerbox/AnswerBox.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script>
|
||||||
|
import UserFormInput from "../../userform/UserFormInput.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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 2:</h1>
|
||||||
|
<div class="bg-secondary p-6 rounded-xl text-sm">
|
||||||
|
Hei,
|
||||||
|
Nye symptomer som utslett etter påbegynt skabbehandling er ikke uvanlig og betyr ikke nødvendigvis at behandlingen har feilet. Dette skyldes ofte kroppens reaksjon på skabbmiddene og behandlingen. Det er viktig å gjennomføre den andre kuren som planlagt. Vær oppmerksom på at kløe og utslett kan vedvare i opptil fire uker etter siste behandling, selv når behandlingen har vært effektiv. Hvis du opplever nye utslett mer enn fire uker etter behandlingens slutt, anbefales det å kontakte lege for en videre vurdering.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-start items-center gap-6">
|
||||||
|
<UserFormInput inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
||||||
|
<UserFormInput inputType="radio" label="Empati" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
||||||
|
<UserFormInput inputType="radio" label="Hjelpsomhet" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
20
frontend/src/components/form/footer/Footer.svelte
Normal file
20
frontend/src/components/form/footer/Footer.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
import ArrowChevron from "../../svg/ArrowChevron.svelte";
|
||||||
|
import ButtonComponent from "../../userform/inputs/ButtonComponent.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex justify-center items-center gap-8">
|
||||||
|
<a href="/">
|
||||||
|
<button class="flex items-center gap-2 text-primary font-semibold">
|
||||||
|
<ArrowChevron width=16 direction="left"/>
|
||||||
|
Forrige spørsmål
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<ButtonComponent text="Send inn svar" url="/" filled={true} />
|
||||||
|
<a href="/">
|
||||||
|
<button class="flex items-center gap-2 text-primary font-semibold opacity-50">
|
||||||
|
Neste spørsmål
|
||||||
|
<ArrowChevron width=16 direction="right"/>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
17
frontend/src/components/form/header/FormHeader.svelte
Normal file
17
frontend/src/components/form/header/FormHeader.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
import CircleExclamation from "../../../components/svg/CircleExclamation.svelte";
|
||||||
|
</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">
|
||||||
|
<h1 class="text-xl text-primary font-bold text-center">Spørsmål 3</h1>
|
||||||
|
<div class="border-r-2 border-primary h-24"></div>
|
||||||
|
<p class="text-sm">Hvis man begynner skabbehandling før man har fått symptomer, men får symptomer iløpet av den uka før man skal smøre seg igjen etter 7 dager, har da ikke første smøringen virket?</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end pr-20 items-center w-1/3">
|
||||||
|
<a class="-" href="/errorreport">
|
||||||
|
<CircleExclamation width="16" height="16" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
export let text;
|
export let text: string;
|
||||||
export let url;
|
export let url: string;
|
||||||
export let filled = false;
|
export let filled = false;
|
||||||
|
|
||||||
let style;
|
let style:string;
|
||||||
|
|
||||||
if (!filled) {
|
if (!filled) {
|
||||||
style = "text-primary font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-primary hover:text-bg";
|
style = "text-primary font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-primary hover:text-bg";
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
<div class="flex justify-between w-full">
|
<div class="flex justify-between w-full">
|
||||||
{#each options as data, index (data)}
|
{#each options as data, index (data)}
|
||||||
<div class="flex flex-col justify-start items-center w-12 text-center">
|
<div class="flex flex-col justify-start items-center w-12 text-center">
|
||||||
<button name={data} class="h-6 w-6 rounded-full border-2 border-primary hover:bg-primary"></button>
|
<button name={data} class="h-6 w-6 rounded-full border-2 border-primary hover:bg-primary"></button>
|
||||||
<label class="text-primary text-sm mt-1" for={data}>{data}</label>
|
<label class="text-primary text-sm mt-1" for={data}>{data}</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,6 @@
|
||||||
import "../app.css";
|
import "../app.css";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="bg-bg w-screen h-screen px-28 py-14">
|
<div class="bg-bg w-screen h-screen px-28 py-6">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import ButtonComponent from "../components/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">
|
||||||
<div class="flex h-full items-center">
|
<div class="flex h-full items-center">
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,20 @@
|
||||||
<script>
|
<script>
|
||||||
import UserFormInput from "../../components/userform/UserFormInput.svelte";
|
import UserFormInput from "../../components/userform/UserFormInput.svelte";
|
||||||
import ButtonComponent from "../../components/ButtonComponent.svelte";
|
import ButtonComponent from "../../components/userform/inputs/ButtonComponent.svelte";
|
||||||
import ArrowChevron from "../../components/svg/ArrowChevron.svelte";
|
import ArrowChevron from "../../components/svg/ArrowChevron.svelte";
|
||||||
import CircleExclamation from "../../components/svg/CircleExclamation.svelte";
|
import CircleExclamation from "../../components/svg/CircleExclamation.svelte";
|
||||||
|
import FormHeader from "../../components/form/header/FormHeader.svelte";
|
||||||
|
import AnswerBox from "../../components/form/answerbox/AnswerBox.svelte";
|
||||||
|
import Footer from "../../components/form/footer/Footer.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col justify-center gap-4 h-full">
|
<div class="flex flex-col h-full">
|
||||||
<div class="flex justify-center items-center">
|
<FormHeader />
|
||||||
<div class="flex justify-center items-center w-1/2 gap-4">
|
<div class="flex h-full justify-between gap-12">
|
||||||
<h1 class="text-xl text-primary font-bold text-center">Spørsmål 3</h1>
|
<AnswerBox />
|
||||||
<div class="border-r-2 border-primary h-24"></div>
|
<AnswerBox />
|
||||||
<p>Hvis man begynner skabbehandling før man har fått symptomer, men får symptomer iløpet av den uka før man skal smøre seg igjen etter 7 dager, har da ikke første smøringen virket?</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center items-center">
|
|
||||||
<a class="-" href="/errorreport">
|
|
||||||
<CircleExclamation width="24" height="24" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center gap-12">
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<h1 class="text-xl text-primary font-bold text-center">Svar 1:</h1>
|
|
||||||
<div class="bg-secondary p-4 rounded-xl">
|
|
||||||
<p>
|
|
||||||
Hei,
|
|
||||||
Nye symptomer som utslett etter påbegynt skabbehandling er ikke uvanlig og betyr ikke nødvendigvis at behandlingen har feilet. Dette skyldes ofte kroppens reaksjon på skabbmiddene og behandlingen. Det er viktig å gjennomføre den andre kuren som planlagt. Vær oppmerksom på at kløe og utslett kan vedvare i opptil fire uker etter siste behandling, selv når behandlingen har vært effektiv. Hvis du opplever nye utslett mer enn fire uker etter behandlingens slutt, anbefales det å kontakte lege for en videre vurdering.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<h1 class="text-xl text-primary font-bold text-center">Svar 2:</h1>
|
|
||||||
<div class="bg-secondary p-4 rounded-xl">
|
|
||||||
<p>
|
|
||||||
Hei,
|
|
||||||
Nye symptomer som utslett etter påbegynt skabbehandling er ikke uvanlig og betyr ikke nødvendigvis at behandlingen har feilet. Dette skyldes ofte kroppens reaksjon på skabbmiddene og behandlingen. Det er viktig å gjennomføre den andre kuren som planlagt. Vær oppmerksom på at kløe og utslett kan vedvare i opptil fire uker etter siste behandling, selv når behandlingen har vært effektiv. Hvis du opplever nye utslett mer enn fire uker etter behandlingens slutt, anbefales det å kontakte lege for en videre vurdering.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center h-4/5 gap-12">
|
|
||||||
<div class="flex flex-col justify-start items-center gap-4">
|
|
||||||
<UserFormInput inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
|
||||||
<UserFormInput inputType="radio" label="Empati" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
|
||||||
<UserFormInput inputType="radio" label="Hjelpsomhet" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col justify-start items-center gap-4">
|
|
||||||
<UserFormInput inputType="radio" label="Kunnskap" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
|
||||||
<UserFormInput inputType="radio" label="Empati" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
|
||||||
<UserFormInput inputType="radio" label="Hjelpsomhet" options={["Veldig dårlig", "Dårlig", "Nøytral", "Bra", "Veldig bra"]}/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center items-center gap-8">
|
|
||||||
<a href="/">
|
|
||||||
<button class="flex items-center gap-2 text-primary font-semibold">
|
|
||||||
<ArrowChevron width=16 direction="left"/>
|
|
||||||
Forrige spørsmål
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
<ButtonComponent text="Send inn svar" url="/" filled={true} />
|
|
||||||
<a href="/">
|
|
||||||
<button class="flex items-center gap-2 text-primary font-semibold opacity-50">
|
|
||||||
Neste spørsmål
|
|
||||||
<ArrowChevron width=16 direction="right"/>
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import UserFormInput from "../../components/userform/UserFormInput.svelte";
|
import UserFormInput from "../../components/userform/UserFormInput.svelte";
|
||||||
import ArrowBack from "../../components/svg/ArrowBack.svelte";
|
import ArrowBack from "../../components/svg/ArrowBack.svelte";
|
||||||
import ButtonComponent from "../../components/ButtonComponent.svelte";
|
import ButtonComponent from "../../components/userform/inputs/ButtonComponent.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col justify-center gap-20 h-full ">
|
<div class="flex flex-col justify-center gap-20 h-full ">
|
||||||
|
|
|
||||||
Reference in a new issue