Skip to content
Snippets Groups Projects
Commit 41e17923 authored by Trygve Jørgensen's avatar Trygve Jørgensen
Browse files

enhancement(config): edit config now has buttons for tabindex

parent 7dab897a
No related branches found
No related tags found
2 merge requests!66Final merge,!62WCAG fixes
Hide whitespace changes
Inline Side-by-side
src/views/ManageConfigView.vue
+ 64
− 46
View file @ 41e17923
...@@ -99,56 +99,74 @@ onMounted(() => { ...@@ -99,56 +99,74 @@ onMounted(() => {
<h3 class="font-bold">Hvor store vaneedringer er du villig til å gjøre?</h3> <h3 class="font-bold">Hvor store vaneedringer er du villig til å gjøre?</h3>
<div v-if="configuration" class="flex flex-row gap-5"> <div v-if="configuration" class="flex flex-row gap-5">
<CardTemplate <button @click="configuration.motivation = 'VERY_LOW'">
:class="{ 'border-2 border-lime-400': configuration.motivation === 'VERY_LOW' }" <CardTemplate
class="cursor-pointer p-4 border-2" :class="{
@click="configuration.motivation = 'VERY_LOW'" 'border-2 border-lime-400': configuration.motivation === 'VERY_LOW'
> }"
<p class="font-bold">Litt</p> class="cursor-pointer p-4 border-2"
</CardTemplate> @click="configuration.motivation = 'VERY_LOW'"
<CardTemplate >
:class="{ 'border-2 border-lime-400': configuration.motivation === 'MEDIUM' }" <p class="font-bold">Litt</p>
class="cursor-pointer p-4 border-2" </CardTemplate>
@click="configuration.motivation = 'MEDIUM'" </button>
> <button @click="configuration.motivation = 'MEDIUM'">
<p class="font-bold">Passe</p> <CardTemplate
</CardTemplate> :class="{
<CardTemplate 'border-2 border-lime-400': configuration.motivation === 'MEDIUM'
:class="{ }"
'border-2 border-lime-400': configuration.motivation === 'VERY_HIGH' class="cursor-pointer p-4 border-2"
}" >
class="cursor-pointer p-4 border-2" <p class="font-bold">Passe</p>
@click="configuration.motivation = 'VERY_HIGH'" </CardTemplate>
> </button>
<p class="font-bold">Store</p>
</CardTemplate> <button @click="configuration.motivation = 'VERY_HIGH'">
<CardTemplate
:class="{
'border-2 border-lime-400': configuration.motivation === 'VERY_HIGH'
}"
class="cursor-pointer p-4 border-2"
>
<p class="font-bold">Store</p>
</CardTemplate>
</button>
</div> </div>
<h3 class="font-bold">Hvor kjent er du med sparing fra før av?</h3> <h3 class="font-bold">Hvor kjent er du med sparing fra før av?</h3>
<div v-if="configuration" class="flex flex-row gap-5"> <div v-if="configuration" class="flex flex-row gap-5">
<CardTemplate <button @click="configuration.experience = 'VERY_LOW'">
:class="{ 'border-2 border-lime-400': configuration.experience === 'VERY_LOW' }" <CardTemplate
class="cursor-pointer p-4 border-2" :class="{
@click="configuration.experience = 'VERY_LOW'" 'border-2 border-lime-400': configuration.experience === 'VERY_LOW'
> }"
<p class="font-bold">Litt kjent</p> class="cursor-pointer p-4 border-2"
</CardTemplate> >
<CardTemplate <p class="font-bold">Litt kjent</p>
:class="{ 'border-2 border-lime-400': configuration.experience === 'MEDIUM' }" </CardTemplate>
class="cursor-pointer p-4 border-2" </button>
@click="configuration.experience = 'MEDIUM'"
> <button @click="configuration.experience = 'MEDIUM'">
<p class="font-bold">Noe kjent</p> <CardTemplate
</CardTemplate> :class="{
<CardTemplate 'border-2 border-lime-400': configuration.experience === 'MEDIUM'
:class="{ }"
'border-2 border-lime-400': configuration.experience === 'VERY_HIGH' class="cursor-pointer p-4 border-2"
}" >
class="cursor-pointer p-4 border-2" <p class="font-bold">Noe kjent</p>
@click="configuration.experience = 'VERY_HIGH'" </CardTemplate>
> </button>
<p class="font-bold">Godt kjent</p>
</CardTemplate> <button @click="configuration.experience = 'VERY_HIGH'">
<CardTemplate
:class="{
'border-2 border-lime-400': configuration.experience === 'VERY_HIGH'
}"
class="cursor-pointer p-4 border-2"
>
<p class="font-bold">Godt kjent</p>
</CardTemplate>
</button>
</div> </div>
<h3 class="font-bold my-0">Hva bruker du mye penger på?</h3> <h3 class="font-bold my-0">Hva bruker du mye penger på?</h3>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment