Skip to content
Snippets Groups Projects
Commit 730a5dbe authored by Eline Evje's avatar Eline Evje
Browse files

fix: fixed compatibility with mobile screen

parent 2235aef7
No related branches found
No related tags found
3 merge requests!66Final merge,!36Enhancement/implement account number to config,!4Pipeline fix
Pipeline #280248 passed
Stage: install
Stage: lint_and_format
Stage: build
Stage: test
Stage: security_scan
Hide whitespace changes
Inline Side-by-side
src/views/ConfigAccountNumberView.vue
+ 3
− 1
View file @ 730a5dbe
<template>
<div class="flex flex-col items-center justify-center min-h-screen text-center">
<div
class="flex flex-col items-center justify-center min-h-screen md:pt-10 pt-4 pb-24 text-center"
>
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">
Legg til kontonummer for sparekonto og brukskonto
</h1>
......
src/views/ConfigFamiliarWithSavingsView.vue
+ 2
− 1
View file @ 730a5dbe
<template>
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
<h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
Hvor kjent er du med sparing fra før?</h1>
Hvor kjent er du med sparing fra før?
</h1>
<div class="grid grid-cols-1 gap-8 mb-16 sm:gap-14 sm:mb-20 md:grid-cols-3">
<div
:class="{
......
src/views/ConfigSpendingItemsAmountView.vue
+ 54
− 45
View file @ 730a5dbe
<template>
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center relative">
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye bruker du per kjøp på ...</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
<div
v-if="showFirstBox"
class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full"
>
<h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
Hvor mye bruker du per kjøp på ...
</h1>
<div class="w-full flex justify-center">
<div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
<div
v-for="(option, index) in firstBoxOptions"
:key="`option-${index}`"
class="w-full my-4"
v-if="showFirstBox"
class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
:class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
:style="{ minWidth: '400px', maxWidth: '400px' }"
>
<div class="flex justify-between items-center">
<p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
v-model="amounts[index]"
@input="filterAmount(index, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
'border-gray-300': !amounts[index],
'border-[var(--green)]': amounts[index]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
<div
v-for="(option, index) in firstBoxOptions"
:key="`first-option-${index}`"
class="w-full my-4"
>
<div class="flex justify-between items-center">
<p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
v-model="amounts[index]"
@input="filterAmount(index, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
'border-gray-300': !amounts[index],
'border-[var(--green)]': amounts[index]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
</div>
</div>
</div>
</div>
</div>
<div
v-if="showSecondBox"
class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full"
>
<div
v-for="(option, index) in secondBoxOptions"
:key="`option-${index}`"
class="w-full my-4"
v-if="showSecondBox"
class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
:class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
:style="{ minWidth: '400px', maxWidth: '400px' }"
>
<div class="flex justify-between items-center">
<p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
v-model="amounts[index + 6]"
@input="filterAmount(index + 6, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
'border-gray-300': !amounts[index + 6],
'border-[var(--green)]': amounts[index + 6]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
<div
v-for="(option, index) in secondBoxOptions"
:key="`second-option-${index}`"
class="w-full my-4"
>
<div class="flex justify-between items-center">
<p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
v-model="amounts[index + firstBoxOptions.length]"
@input="filterAmount(index + firstBoxOptions.length, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
'border-gray-300': !amounts[index + firstBoxOptions.length],
'border-[var(--green)]':
amounts[index + firstBoxOptions.length]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-36 right-4">
<div class="w-full text-right">
<ContinueButtonComponent
@click="onButtonClick"
:disabled="!isAllAmountsFilled"
class="px-10 py-3 text-2xl font-bold mb-4"
class="px-10 py-3 text-2xl font-bold mb-20 mt-10 sm:mb-12 sm:mt-10"
></ContinueButtonComponent>
</div>
</div>
......
src/views/ConfigSpendingItemsTotalAmountView.vue
+ 54
− 45
View file @ 730a5dbe
<template>
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center relative">
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye bruker du totalt per uke på ...</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
<div
v-if="showFirstBox"
class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full"
>
<h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
Hvor mye bruker du per uke på ...
</h1>
<div class="w-full flex justify-center">
<div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
<div
v-for="(option, index) in firstBoxOptions"
:key="`option-${index}`"
class="w-full my-4"
v-if="showFirstBox"
class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
:class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
:style="{ minWidth: '400px', maxWidth: '400px' }"
>
<div class="flex justify-between items-center">
<p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
v-model="amounts[index]"
@input="filterAmount(index, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
'border-gray-300': !amounts[index],
'border-[var(--green)]': amounts[index]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
<div
v-for="(option, index) in firstBoxOptions"
:key="`first-option-${index}`"
class="w-full my-4"
>
<div class="flex justify-between items-center">
<p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
v-model="amounts[index]"
@input="filterAmount(index, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
'border-gray-300': !amounts[index],
'border-[var(--green)]': amounts[index]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
</div>
</div>
</div>
</div>
</div>
<div
v-if="showSecondBox"
class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full"
>
<div
v-for="(option, index) in secondBoxOptions"
:key="`option-${index}`"
class="w-full my-4"
v-if="showSecondBox"
class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
:class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
:style="{ minWidth: '400px', maxWidth: '400px' }"
>
<div class="flex justify-between items-center">
<p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
v-model="amounts[index + 6]"
@input="filterAmount(index + 6, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
'border-gray-300': !amounts[index + 6],
'border-[var(--green)]': amounts[index + 6]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
<div
v-for="(option, index) in secondBoxOptions"
:key="`second-option-${index}`"
class="w-full my-4"
>
<div class="flex justify-between items-center">
<p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
v-model="amounts[index + firstBoxOptions.length]"
@input="filterAmount(index + firstBoxOptions.length, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
'border-gray-300': !amounts[index + firstBoxOptions.length],
'border-[var(--green)]':
amounts[index + firstBoxOptions.length]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-36 right-4">
<div class="w-full text-right">
<ContinueButtonComponent
@click="onButtonClick"
:disabled="!isAllAmountsFilled"
class="px-10 py-3 text-2xl font-bold mb-4"
class="px-10 py-3 text-2xl font-bold mb-20 mt-10 sm:mb-12 sm:mt-10"
></ContinueButtonComponent>
</div>
</div>
......
src/views/ConfigSpendingItemsView.vue
+ 5
− 5
View file @ 730a5dbe
<template>
<div class="flex flex-col items-center justify-center min-h-screen text-center">
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hva bruker du mye penger på?</h1>
<h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">Hva bruker du mye penger på?</h1>
<div class="flex flex-wrap justify-center gap-8 mb-8">
<div
class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
class="flex flex-col items-center justify-center bg-white rounded-lg sm:p-8 shadow-lg sm:w-full md:w-[45%]"
>
<div
v-for="buttonText in [
......@@ -32,7 +32,7 @@
</div>
</div>
<div
class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
class="flex flex-col items-center justify-center bg-white rounded-lg sm:p-8 shadow-lg sm:w-full md:w-[45%]"
>
<div
v-for="(option, index) in customOptions"
......@@ -53,11 +53,11 @@
</div>
</div>
</div>
<div class="w-full text-right mb-0 mt-0" style="position: relative; top: -92px; right: 8px">
<div class="w-full text-right">
<ContinueButtonComponent
@click="onButtonClick"
:disabled="!isFormValid"
class="px-10 py-3 text-2xl font-bold mb-4 mr-2"
class="px-10 py-3 text-2xl font-bold mt-36 mr-4 sm:mb-12 sm:mt-10"
></ContinueButtonComponent>
</div>
</div>
......
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