Skip to content
Snippets Groups Projects
Commit 7b127a18 authored by Victor Ekholt Gunrell Kaste's avatar Victor Ekholt Gunrell Kaste
Browse files

feat: Updated look of saving goal view

parent fe125bb9
No related branches found
No related tags found
1 merge request!19feat: Updated look of saving goal view
Pipeline #274490 failed
......@@ -20,7 +20,7 @@ export default {
if (timelineElement instanceof HTMLElement) {
// Calculate the max-height based on the height of the timeline
const timelineHeight = timelineElement.offsetHeight;
this.bluePanelMaxHeight = `${timelineHeight*1.25}px`;
this.bluePanelMaxHeight = `${timelineHeight*1.55}px`;
} else {
this.bluePanelMaxHeight = '700px';
}
......@@ -41,7 +41,7 @@ export default {
<div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }">
<h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
<div>
<button class="btn btn-light" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
<button class="btn btn-success btn-lg" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
</div>
<saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
</div>
......
......@@ -19,10 +19,9 @@
</div>
<!--Change this to date picker?-->
<p>How long should this saving goal last: </p>
<p>When should this saving goal end?:</p>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
<span class="input-group-text">Days</span>
<input type="date" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
</div>
<p>How much do you want to save during this saving goal: </p>
......
......@@ -2,7 +2,7 @@
import {ref} from "vue";
const savingGoalList = ref([
{ title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr on a spain trip' },
{ title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr for a spain trip' },
{ title: 'Italy Escapade', MoneyTarget: '200kr', description: 'Experience the magic of Italy with us! Our goal is to save 200kr for an amazing trip to Italy.' },
{ title: 'French Getaway', MoneyTarget: '200kr', description: 'Join us as we plan to save 200kr for a delightful trip to France!' },
{ title: 'Exploring Greece', MoneyTarget: '200kr', description: 'Dreaming of Greece? Lets work together to save 200kr for that unforgettable trip!' },
......@@ -17,6 +17,10 @@ const emits = defineEmits(['goToSavingGoal']);
const goToSavingGoal = () => {
emits('goToSavingGoal');
};
const deleteSavingGoal = () => {
};
</script>
<template>
......@@ -28,6 +32,7 @@ const goToSavingGoal = () => {
<h5 class="card-title">{{ savingGoal.title }}</h5>
<p class="card-text">{{ savingGoal.description }}</p>
<a href="#" class="btn btn-light" @click="goToSavingGoal">Go to saving goal</a>
<a href="#" class="btn btn-danger" @click="deleteSavingGoal" style="margin-left: 8px">Delete</a>
</div>
</div>
</template>
......
......@@ -45,10 +45,12 @@ export default {
<div class="SavingGoalTitle text-center">{{title}}</div>
<ul class="timeline">
<li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
<a :href="'#panel-' + index">
<div class="timeline-image z-1" @click="togglePanel(step)">
<img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
</div>
<div class="timeline-panel z-3" v-show="step.showPanel">
</a>
<div class="timeline-panel z-3" :id="'panel-' + index" v-show="step.showPanel">
<div class="timeline-heading">
<h4>{{ step.title }}</h4>
<h4 class="subheading">{{step.description}}</h4>
......@@ -88,10 +90,11 @@ export default {
.SavingGoalTitle {
font-weight: 600;
font-size: 45px;
margin-top: 20px;
margin-bottom:40px;
padding-bottom: 10px;
color: white;
border-radius: 0 0 1em 1em;
border-radius: 1em;
background-color: #0A58CA;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment