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

fix: made improvements of the layout

parent 552e5657
No related branches found
No related tags found
3 merge requests!66Final merge,!14Enhancement/implement more config steps,!4Pipeline fix
Hide whitespace changes
Inline Side-by-side
src/views/FirstSavingGoalView.vue
+ 86
− 45
View file @ ed9e82de
<template> <template>
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center"> <div class="flex flex-col items-center justify-start min-h-screen px-4 text-center">
<div class="mb-20"> <div class="mb-20">
<div <div class="flex flex-col items-center justify-start bg-white shadow-md rounded-lg p-16 min-h-[500px] min-w-[400px] max-w-[400px]">
class="flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-16" <template v-if="!skipped && !accepted">
style="width: 400px; height: 400px" <div class="mb-6 w-full text-left">
> <label for="savings-goal" class="block text-xl font-bold mb-2">Jeg vil spare til:</label>
<div class="mb-6 w-full text-left"> <input
<label for="savings-goal" class="block text-xl font-bold mb-2" type="text"
>Jeg vil spare til:</label id="savings-goal"
> v-model="savingsGoal"
<input :class="{ 'border-[var(--green)]': savingsGoal.valueOf(), 'border-gray-300': !savingsGoal.valueOf() }"
type="text" class="border-2 block w-full rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl"
id="savings-goal" placeholder=""
v-model="savingsGoal" />
:class="{ </div>
'border-[var(--green)]': savingsGoal.valueOf(), <div class="mb-8 w-full flex items-center">
'border-gray-300': !savingsGoal.valueOf() <label for="amount" class="shrink-0 text-xl font-bold mr-2">Jeg vil spare:</label>
}" <input
class="border-2 block w-full rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl" type="text"
placeholder="" id="amount"
/> v-model="rawAmount"
</div> :class="{ 'border-[var(--green)]': rawAmount.valueOf(), 'border-gray-300': !rawAmount.valueOf() }"
<div class="mb-8 w-full flex items-center"> class="border-2 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl mr-2 block w-full"
<label for="amount" class="shrink-0 text-xl font-bold mr-2" placeholder=""
>Jeg vil spare:</label min="0"
> />
<input <span class="shrink-0 text-xl font-bold">kr</span>
type="text" </div>
id="amount" <div class="w-full px-4 py-2">
v-model="rawAmount" <img src="@/assets/coins.png" alt="Savings" class="mx-auto w-36 h-32" />
:class="{ </div>
'border-[var(--green)]': rawAmount.valueOf(), <div class="flex justify-between w-full mt-4 space-x-2">
'border-gray-300': !rawAmount.valueOf() <button
}" class="bg-[var(--green)] border-4 border-[var(--green)] hover:brightness-90 active:brightness-75 font-bold rounded-lg py-2 px-10 text-lg"
class="border-2 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl mr-2 block w-full" @click="skip"
placeholder="" >
min="0" Skip
/> </button>
<span class="shrink-0 text-xl font-bold">kr</span> <button
</div> :class="[
<div class="w-full px-4 py-2"> 'border-4 font-bold rounded-lg py-2 px-10 text-lg transition-all',
<img src="@/assets/coins.png" alt="Savings" class="mx-auto w-36 h-32" /> canAccept ? 'bg-[var(--green)] hover:brightness-90 active:brightness-75' : 'opacity-60 bg-gray-300 cursor-not-allowed'
</div> ]"
:disabled="!canAccept"
@click="accept"
>
Godta
</button>
</div>
</template>
<template v-else>
<div class="flex justify-start items-center h-full min-h-[400px] min-w-[400px] max-w-[400px]">
<div class="text-4xl font-bold">{{ acceptedMessage }}</div>
</div>
</template>
</div> </div>
</div> </div>
<ContinueButtonComponent <ContinueButtonComponent
:disabled="!skipped && !accepted"
@click="onButtonClick" @click="onButtonClick"
class="px-10 py-3 text-2xl font-bold self-end" class="px-10 py-3 text-2xl font-bold self-end mb-80 mt-[-7px]"
></ContinueButtonComponent> ></ContinueButtonComponent>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue' import { computed, ref, watch, watchEffect } from 'vue'
import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue' import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
import router from '@/router' import router from '@/router'
const savingsGoal = ref('') const savingsGoal = ref('')
const rawAmount = ref('') const rawAmount = ref('')
const skipped = ref(false)
const accepted = ref(false)
const validateAmount = () => { const validateAmount = () => {
const validPattern = /^(\d+)?(,\d*)?$/ const validPattern = /^(\d+)?(,\d*)?$/
...@@ -78,7 +93,33 @@ const checkNegative = () => { ...@@ -78,7 +93,33 @@ const checkNegative = () => {
watch(rawAmount, validateAmount) watch(rawAmount, validateAmount)
watch(() => parseFloat(rawAmount.value.replace(',', '.')), checkNegative) watch(() => parseFloat(rawAmount.value.replace(',', '.')), checkNegative)
const canAccept = computed(() => savingsGoal.value.trim() !== '' && rawAmount.value.trim() !== '')
const skip = () => {
skipped.value = true
acceptedMessage.value = "Du kan opprette sparemål senere"
}
const accept = () => {
if (canAccept.value) {
accepted.value = true
acceptedMessage.value = "Du har fått ditt første sparemål!"
}
}
const onButtonClick = () => { const onButtonClick = () => {
router.push('/home') if (skipped.value || accepted.value) {
router.push('/forsteSpareutfordring')
}
} }
const acceptedMessage = ref("")
watchEffect(() => {
if (accepted.value) {
acceptedMessage.value = "Du har fått ditt første sparemål!"
} else if (skipped.value) {
acceptedMessage.value = "Du kan opprette sparemål senere"
}
})
</script> </script>
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