From 7b127a1880994e51a30c47044ec35b024c5f0482 Mon Sep 17 00:00:00 2001
From: vekaste <vekaste@stud.ntnu.no>
Date: Thu, 18 Apr 2024 14:37:41 +0200
Subject: [PATCH] feat: Updated look of saving goal view
---
src/components/SavingGoalComponents/SavingGoal.vue | 4 ++--
.../SavingGoalComponents/SavingGoalCreate.vue | 5 ++---
.../SavingGoalComponents/SavingGoalList.vue | 7 ++++++-
.../SavingGoalComponents/SavingGoalRoadmap.vue | 13 ++++++++-----
4 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/src/components/SavingGoalComponents/SavingGoal.vue b/src/components/SavingGoalComponents/SavingGoal.vue
index 87055bf..89cae3a 100644
--- a/src/components/SavingGoalComponents/SavingGoal.vue
+++ b/src/components/SavingGoalComponents/SavingGoal.vue
@@ -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>
diff --git a/src/components/SavingGoalComponents/SavingGoalCreate.vue b/src/components/SavingGoalComponents/SavingGoalCreate.vue
index b23db87..280af93 100644
--- a/src/components/SavingGoalComponents/SavingGoalCreate.vue
+++ b/src/components/SavingGoalComponents/SavingGoalCreate.vue
@@ -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>
diff --git a/src/components/SavingGoalComponents/SavingGoalList.vue b/src/components/SavingGoalComponents/SavingGoalList.vue
index 7ecf2ae..e792585 100644
--- a/src/components/SavingGoalComponents/SavingGoalList.vue
+++ b/src/components/SavingGoalComponents/SavingGoalList.vue
@@ -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>
diff --git a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
index 4532527..9301273 100644
--- a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
+++ b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
@@ -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 }">
- <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 :href="'#panel-' + index">
+ <div class="timeline-image z-1" @click="togglePanel(step)">
+ <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
+ </div>
+ </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;
}
--
GitLab