diff --git a/src/App.vue b/src/App.vue
index ee6510a265ad8ef54e2ec8730091082d9dd9d676..472149180e58ae05416b5000646556a5c19c12f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,10 +7,21 @@ import { RouterView } from 'vue-router'
<RouterView />
</div>
</template>
-<style scoped>
+<style>
.app{
height: 100vh;
width: 100vw;
}
+button:hover{
+ cursor: pointer;
+ h1:hover, h3:hover, h2:hover, h4:hover{
+ cursor: pointer;
+ }
+}
+
+h1:hover, h3:hover, h2:hover, h4:hover{
+ cursor: default;
+}
+
</style>
diff --git a/src/assets/background/img.png b/src/assets/background/img.png
new file mode 100644
index 0000000000000000000000000000000000000000..7390e64ef1f3039e5d6f90262de6b03e723feb4a
Binary files /dev/null and b/src/assets/background/img.png differ
diff --git a/src/components/challenge/ActiveChallengeDisplay.vue b/src/components/challenge/ActiveChallengeDisplay.vue
index 7432e9ad08b9a9af121512fbbcd189369755028a..e523fc63cf791cf1fc9406f681c237d9f600c033 100644
--- a/src/components/challenge/ActiveChallengeDisplay.vue
+++ b/src/components/challenge/ActiveChallengeDisplay.vue
@@ -14,8 +14,10 @@ const props = defineProps({
challenge: {
type: Object as () => Challenge,
required: true
- }
+ },
+ expanded: Boolean
});
+
const expirationDate = () => {
return new Date(props.challenge?.expirationDate).
toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
@@ -41,14 +43,21 @@ const deleteTheChallenge = () => {
src="/src/components/icons/navigation/close.svg"
alt="delete-button"
@click="deleteTheChallenge()">
+ <h3 class="title">{{ props.challenge.challengeTitle }}</h3>
+
<div class="content">
- <h3 class="title">{{ props.challenge.challengeTitle }}</h3>
- <h4 class="description">{{ props.challenge.challengeDescription }}</h4>
+ <div class="description-container">
+ <h4 class="description-title">Beskrivelse</h4>
+ <img src="/src/components/icons/navigation/info.svg" alt="show-more" class="show-more-icon">
+ <div class="description" :class="{'expanded':expanded}">
+ <h4 class="description-info" >{{ props.challenge.challengeDescription}}</h4>
+ </div>
+ </div>
<div class="extra-info">
- <h4 class="expiration-date">Utløpsdato: {{expirationDate()}} |</h4>
- <h4 class="sum"> Sparesum: {{props.challenge.goalSum}} kr,-</h4>
+ <h4 class="expiration-date">Utløpsdato: {{expirationDate()}} | Sparesum: {{props.challenge.goalSum}}kr</h4>
</div>
</div>
+
<div class="button-container">
<button class="complete-button" @click="completeTheChallenge()">
<h3 class="complete-button-text">Fullfør</h3>
@@ -63,17 +72,15 @@ const deleteTheChallenge = () => {
display: flex;
flex-direction: column;
place-items: end;
- place-content: space-between;
+ height: 100%;
+ width: 100%;
padding: 1.5%;
- gap: 1.0%;
}
-.content{
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 65%;
+h1:hover, h3:hover, h2:hover, h4:hover{
+ cursor: pointer;
}
+
.close-img{
width: 5.0%;
}
@@ -83,58 +90,72 @@ const deleteTheChallenge = () => {
}
.title{
+ width: 100%;
text-align: center;
-
color: var(--color-text-black);
}
-.description{
+.content{
+ display: flex;
+ flex-direction: column;
+ place-items: center;
+ place-content: space-between;
+ width: 100%;
+ height: 75%;
+}
+
+.description-container{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+.description-title{
+ text-decoration: underline;
text-align: center;
- color: var(--color-text-black);
- overflow: hidden;
+}
+
+.show-more-icon{
+ height: 1.5vh;
}
.extra-info{
- display: none;
+ display: flex;
+ flex-direction: row;
+ place-content: center;
+ gap: 1.0%;
}
.expiration-date{
color: var(--color-text-black);
}
-.sum{
+.description{
+ display: none;
+ place-content: center;
color: var(--color-text-black);
}
-.potential-challenge-display:hover{
- .extra-info{
- display: flex;
- flex-direction: row;
- place-content: center;
- gap: 1.0%;
- }
-
- .content{
- overflow: scroll;
- }
-
- .description{
- overflow: visible;
- }
+.expanded{
+ display: flex;
+ place-content: center;
+}
+.description-info{
+ text-align: center;
+ color: var(--color-text-black);
}
.button-container{
+ margin-top: 1.5%;
display: flex;
width: 100%;
- height: 25%;
place-content: center;
}
.complete-button{
border-radius: 20px;
width: 50%;
- height: 100%;
border: none;
background-color: var(--color-save-button);
}
@@ -152,30 +173,4 @@ const deleteTheChallenge = () => {
font-weight: bold;
}
-@media only screen and (max-width: 1000px){
- .extra-info{
- display: flex;
- flex-direction: row;
- place-content: center;
- gap: 1.0%;
- }
- .potential-challenge-display:hover{
- .description{
- text-align: center;
- color: var(--color-text-black);
- }
- }
-
- .potential-challenge-display:hover{
- .extra-info{
- display: flex;
- flex-direction: row;
- place-content: center;
- gap: 1.0%;
- }
- }
-}
-
-
-
</style>
\ No newline at end of file
diff --git a/src/components/challenge/ActiveChallengesList.vue b/src/components/challenge/ActiveChallengesList.vue
index 0bd1736cc4595306248f5a7c82f840649967fb51..94c531da55fb3f6f20f0cb383f809ed9259a4dc8 100644
--- a/src/components/challenge/ActiveChallengesList.vue
+++ b/src/components/challenge/ActiveChallengesList.vue
@@ -29,7 +29,9 @@ const activeChallenges = ref<Challenge[]>([])
const challengeToBeCompleted = ref<number|any>(null)
const challengeToBeDeleted = ref<number|any>(null)
-const SIZE = 4
+const expandedChallengeId = ref<number>(-1);
+
+const SIZE = 3
const pages = ref<number>(1)
const currentPage = ref<number>(0)
@@ -72,6 +74,7 @@ const closeDeletePopUp = async () => {
}
const handleChallengeCompleted = async () => {
+ eventBus.emit('updateMilestones');
await closePopUp();
await jsConfetti.addConfetti();
await fetchActiveChallenges();
@@ -93,6 +96,14 @@ const nextPage = () =>{
currentPage.value ++;
}
+const toggleMilestoneHeight = (id: number) => {
+ if(expandedChallengeId.value == id){
+ expandedChallengeId.value = -1;
+ } else {
+ expandedChallengeId.value = id;
+ }
+};
+
eventBus.on('updateChallenges', () => {
fetchActiveChallenges();
});
@@ -123,10 +134,13 @@ watch(currentPage, fetchActiveChallenges);
<ActiveChallengeDisplay
class="active-challenge"
v-for="(activeChallenge, index) in activeChallenges"
+ :class="{'expanded': expandedChallengeId == activeChallenge.challengeId}"
:key="index"
:challenge="activeChallenge"
+ :expanded="expandedChallengeId == activeChallenge.challengeId"
@challengeCompleted="handleRequestToCompleteChallenge(activeChallenge.challengeId)"
@challengeDeleted ="handleRequestToDeleteChallenge(activeChallenge.challengeId)"
+ @click="toggleMilestoneHeight(activeChallenge.challengeId)"
></ActiveChallengeDisplay>
<h4 class="challenge-placeholder" id="active-challenge-placeholder" v-if="activeChallenges.length == 0">
Du har ingen aktive utfordringer.<br>
@@ -134,6 +148,7 @@ watch(currentPage, fetchActiveChallenges);
Aktive utfordringer vil vises i denne boksen.
</h4>
</div>
+
<div class="pagination">
<button @click="previousPage" :disabled="currentPage === 0">Forige side</button>
<div v-if="pages>1" class="page-numbers">
@@ -169,20 +184,16 @@ watch(currentPage, fetchActiveChallenges);
.active-challenge-component{
display: flex;
flex-direction: column;
-
height: 100%;
width: 100%;
-
padding: 5.0%;
gap: 2.5%;
-
- place-content: space-between;
}
.active-challenges{
display: flex;
flex-direction: column;
- height: 100%;
+ height: 90%;
width: 100%;
gap:2.5%
}
@@ -192,13 +203,19 @@ watch(currentPage, fetchActiveChallenges);
border: 2px solid var(--color-border);
background-color: var(--color-background-white);
- min-height: calc(calc(100% - 2.5*4%)/4);
+ height: calc(calc(100% - 2.5*2%)/3);
width: 100%;
}
.active-challenge:hover{
- transform: scale(1.05);
+ transform: scale(1.02);
+ cursor: pointer;
}
+
+.expanded{
+ height: calc(calc(calc(100% - 2.5*2%)/3)*1.5);
+}
+
#active-challenge-placeholder{
color: var(--color-headerText);
}
@@ -211,6 +228,7 @@ watch(currentPage, fetchActiveChallenges);
justify-content: center;
align-items: center;
width: 100%;
+ height: 10%;
flex: 1;
}
diff --git a/src/components/challenge/InactiveChallengeDisplay.vue b/src/components/challenge/InactiveChallengeDisplay.vue
index 068dbdfef5615ad33b92ecba1b925c45aaf731e5..9109da5069feaebe8bc147d77bf9699abbc84b1e 100644
--- a/src/components/challenge/InactiveChallengeDisplay.vue
+++ b/src/components/challenge/InactiveChallengeDisplay.vue
@@ -97,7 +97,6 @@ const acceptChallenge = async () => {
gap: 1.0%;
}
-
.options{
display: flex;
flex-direction: row;
diff --git a/src/components/icons/navigation/info.svg b/src/components/icons/navigation/info.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6e54744227ee65e826ddc523587dedb6027d7303
--- /dev/null
+++ b/src/components/icons/navigation/info.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 330 330" xml:space="preserve">
+<path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393
+ c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393
+ s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/milestone/ActiveMilestoneDisplay.vue b/src/components/milestone/ActiveMilestoneDisplay.vue
index a67ab73a9a2e1a7ae58c35c25fa372fb4dc51f9e..fe49971453bc3bb340c00adf995707e82825046f 100644
--- a/src/components/milestone/ActiveMilestoneDisplay.vue
+++ b/src/components/milestone/ActiveMilestoneDisplay.vue
@@ -48,7 +48,9 @@ const isToExpire = () => {
<template>
<div class="active-milestone-display" @click="openMilestone">
<h2 class="title" :class="{'expire': isToExpire()}">{{props.title}}</h2>
- <div class="img"> [Bilde]</div>
+ <div class="img">
+ <img src="/src/assets/background/img.png" alt="milestone-img" class="milestone-img">
+ </div>
<div class="progress-description">
<h4 class="description" v-if="goalSum&¤tSum">{{props.currentSum}}kr av {{props.goalSum}}kr</h4>
@@ -69,6 +71,11 @@ const isToExpire = () => {
width: 100%;
padding: 1.5%;
}
+
+h1:hover, h3:hover, h2:hover, h4:hover{
+ cursor: pointer;
+}
+
.title{
text-align: left;
}
@@ -81,7 +88,14 @@ const isToExpire = () => {
place-content: center;
place-items: center;
background-color: lightgrey;
+ overflow: hidden;
}
+
+.milestone-img{
+ display: flex;
+ width: 100%;
+}
+
.description{
text-align: left;
}
diff --git a/src/components/milestone/ActiveMilestonesList.vue b/src/components/milestone/ActiveMilestonesList.vue
index fcc9c1ced49cdf12809aa82d271e2bed529a8a9b..ac19d642984dd3f750d35f5e70cdd5325d17cbdb 100644
--- a/src/components/milestone/ActiveMilestonesList.vue
+++ b/src/components/milestone/ActiveMilestonesList.vue
@@ -4,6 +4,7 @@ import ActiveMilestoneDisplay from '@/components/milestone/ActiveMilestoneDispla
import { onMounted, ref } from 'vue'
import { useTokenStore } from '@/stores/token'
import { getAllMilestonesPaginated } from '@/utils/MilestoneUtils'
+import eventBus from '@/components/service/eventBus.js'
interface Milestone{
milestoneId: number;
@@ -55,6 +56,11 @@ const nextPage = () =>{
fetchActiveMilestones();
}
+eventBus.on('updateMilestones', () => {
+ fetchActiveMilestones();
+});
+
+
</script>
<template>
@@ -111,7 +117,7 @@ const nextPage = () =>{
display: flex;
flex-direction: column;
width: 100%;
- height: 100%;
+ height: 90%;
gap: 2.5%;
}
@@ -121,21 +127,21 @@ const nextPage = () =>{
border: 2px solid var(--color-border);
box-shadow: 0 4px 4px var(--color-shadow);
- height: calc(100%/3);
+ height: calc(95%/3);
width: 100%;
}
.active-milestone:hover{
transform: scale(1.02);
- transition: 0.3s;
+ cursor: pointer;
}
-
.pagination {
display: flex;
justify-content: left;
align-items: center;
width: 100%;
+ height: 10%;
}
.pagination button {
diff --git a/src/components/milestone/CompletedMilestoneDisplay.vue b/src/components/milestone/CompletedMilestoneDisplay.vue
index 4866c4f360c8527cdfbe34daf34df0bb81721ed0..6b68e386d9b8a8f3b3cd55849fd503d6a1e9817b 100644
--- a/src/components/milestone/CompletedMilestoneDisplay.vue
+++ b/src/components/milestone/CompletedMilestoneDisplay.vue
@@ -1,5 +1,4 @@
<script setup lang="ts">
-import {ref} from "vue";
const props = defineProps({
id: Number,
@@ -7,30 +6,30 @@ const props = defineProps({
description: String,
goalSum: Number,
currentSum: Number,
- deadline: Date,
- startDate: Date,
- image: String
+ deadline: String,
+ startDate: String,
+ image: String,
+ expanded: Boolean
});
-const imageUrl = "src/assets/pig.png"
-const displayDescription = ref(false)
-
</script>
<template>
-<div class="completed-milestone-display"
- @mouseover="displayDescription = true"
- @mouseleave="displayDescription = false"
- :style="{
- backgroundImage: image ? 'url(' + image + ')' : 'url(' + imageUrl + ')'
- }">
+<div class="completed-milestone-display">
<h2 class="title">{{props.title}}</h2>
- <div class="info" v-if="!displayDescription">
- <h4 v-if="currentSum">Du sparte {{props.currentSum}}kr</h4>
- <h4 v-if="deadline">{{new Date(deadline).getDate()}}/{{new Date(deadline).getMonth()}}-{{new Date(deadline).getFullYear()}}</h4>
+ <div class="center-content">
+ <div class="img">
+ <img src="/src/assets/background/img.png" alt="milestone-img" class="milestone-img">
+ </div>
+ <div class="description-info" :class="{'expanded':expanded}">
+ <h4 class="description-title">Beskrivelse: </h4>
+ <h4 class="description">{{props.description}}</h4>
+ </div>
</div>
- <div class="info" v-if="displayDescription">
- <h4>{{props.description}}</h4>
+
+ <div class="info">
+ <h4 v-if="currentSum">Du sparte {{props.currentSum}}kr av {{props.goalSum}}kr</h4>
+ <h4 v-if="deadline">{{new Date(deadline).getDate()}}/{{new Date(deadline).getMonth()}}-{{new Date(deadline).getFullYear()}}</h4>
</div>
</div>
@@ -40,18 +39,76 @@ const displayDescription = ref(false)
.completed-milestone-display{
display:flex;
flex-direction: column;
- place-content: space-between;
+ place-items: start;
+ height: 100%;
+ width: 100%;
padding: 1.5%;
color: var(--color-text-black);
}
+
+h1:hover, h3:hover, h2:hover, h4:hover{
+ cursor: pointer;
+}
+
.title{
- text-align: left;
+ place-content: start;
+}
+
+.center-content{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 50%;
+}
+
+.img{
+ display: flex;
+ border-radius: 10px;
+ background-color: lightgrey;
+ place-content: center;
+ place-items: center;
+ height: 10vh;
+ min-height: 50px;
+ overflow: hidden;
}
+
+.milestone-img{
+ display: flex;
+ filter: grayscale(100%);
+ width: 100%;
+}
+
+.description-info{
+ display: none;
+}
+
+.expanded{
+ display: flex;
+ flex-direction: column;
+ height: 50%;
+ width: 100%;
+ align-content: start;
+ place-content: start;
+ text-align: start;
+}
+
+.description-title{
+ text-decoration: underline;
+}
+
+.description{
+ overflow-y: scroll;
+}
+
.info{
display: flex;
flex-direction: row;
+ height: 100%;
+ width: 100%;
text-align: left;
justify-content: space-between;
+ align-content: end;
+ place-items: end;
}
diff --git a/src/components/milestone/MilestoneLogList.vue b/src/components/milestone/MilestoneLogList.vue
index 89775bba2441d778081c1d51f688dc10959564e4..979b416a877bd7b432f56741b9a1f8c39499d899 100644
--- a/src/components/milestone/MilestoneLogList.vue
+++ b/src/components/milestone/MilestoneLogList.vue
@@ -18,11 +18,11 @@ interface Milestone{
}
const token = useTokenStore().jwtToken
-
+const expandedMileStoneId = ref<number>(-1);
const completedMilestones = ref<Milestone[]>([])
const currentPage = ref<number>(0)
const pages = ref<number>(1)
-const SIZE = 4
+const SIZE = 3
onMounted( () => {
fetchActiveMilestones();
@@ -54,14 +54,23 @@ const nextPage = () =>{
fetchActiveMilestones();
}
+const toggleMilestoneHeight = (id: number) => {
+ if(expandedMileStoneId.value == id){
+ expandedMileStoneId.value = -1;
+ } else {
+ expandedMileStoneId.value = id;
+ }
+};
+
</script>
<template>
<div class="completed-milestones-component">
<div class="milestones">
<CompletedMilestoneDisplay
- class="completed-milestone"
v-for="(completedMilestone, index) in completedMilestones"
+ class="completed-milestone"
+ :class="{'expanded': expandedMileStoneId == completedMilestone.milestoneId}"
:key="index"
:id="completedMilestone.milestoneId"
:title="completedMilestone.milestoneTitle"
@@ -71,6 +80,8 @@ const nextPage = () =>{
:deadline="completedMilestone.deadlineDate"
:start-date="completedMilestone.startDate"
:image="completedMilestone.milestoneImage"
+ :expanded="expandedMileStoneId == completedMilestone.milestoneId"
+ @click="toggleMilestoneHeight(completedMilestone.milestoneId)"
></CompletedMilestoneDisplay>
<h4 class="milestone-placeholder" v-if="completedMilestones.length == 0">
Du har ingen fullførte sparemål
@@ -103,8 +114,6 @@ const nextPage = () =>{
height: 100%;
width: 100%;
- place-content: space-between;
-
padding: 5.0%;
gap: 2.5%;
}
@@ -113,9 +122,8 @@ const nextPage = () =>{
display: flex;
flex-direction: column;
gap: 2.5%;
-
width: 100%;
- height: 100%;
+ height: 90%;
}
.completed-milestone{
@@ -123,13 +131,18 @@ const nextPage = () =>{
border: 2px solid var(--color-border);
background-color: var(--color-background-white);
- min-height: calc(calc(100% - 2.5*4%)/4);
+ height: calc(calc(100% - 2.5*2%)/3);
width: 100%;
}
.completed-milestone:hover{
- transform: scale(1.05);
- transition: 0.3s;
+ transform: scale(1.02);
+ cursor: pointer;
+ transition: none;
+}
+
+.expanded{
+ height: calc(calc(calc(100% - 2.5*2%)/3)*1.5);
}
.milestone-placeholder{
@@ -141,6 +154,7 @@ const nextPage = () =>{
justify-content: center;
align-items: center;
width: 100%;
+ height: 10%;
flex: 1;
}
diff --git a/src/views/HomePage/ChallengeView.vue b/src/views/HomePage/ChallengeView.vue
index 4f50bdc0ce1ecc2c8dd82942fc152a3ed0fbe697..1416fdad1eb37e8c71b713484faf2ae462a54506 100644
--- a/src/views/HomePage/ChallengeView.vue
+++ b/src/views/HomePage/ChallengeView.vue
@@ -87,6 +87,7 @@ const closeHelpPopUp = async () => {
.help-icon:hover{
transform: scale(1.05);
+ cursor: pointer;
}
.popup-container {
@@ -115,7 +116,7 @@ const closeHelpPopUp = async () => {
display: flex;
flex-direction: row;
width: 100%;
- min-height: 115%;
+ min-height: 120%;
padding-bottom: 1.5%;
gap: 2.5%;
}
@@ -133,7 +134,7 @@ const closeHelpPopUp = async () => {
background-color: var(--color-confirm-button);
border: 2px solid var(--color-border);
color: var(--color-button-text);
- min-height: 12%;
+ min-height: 10%;
}
.create-challenge-button:active{
@@ -158,7 +159,7 @@ const closeHelpPopUp = async () => {
box-shadow: 0 4px 4px var(--color-shadow);
background-color: var(--color-heading);
- height: 100%;
+ min-height: 100%;
width: 40%;
}
diff --git a/src/views/HomePage/DiscoverView.vue b/src/views/HomePage/DiscoverView.vue
index dc6da0a6f4c954e62180df02d57c427ca2dd5274..6211423835b4ea918a0a7db100cdc29c21ca2267 100644
--- a/src/views/HomePage/DiscoverView.vue
+++ b/src/views/HomePage/DiscoverView.vue
@@ -102,6 +102,7 @@ onMounted(async () => {
.help-icon:hover{
transform: scale(1.05);
+ cursor: pointer;
}
.popup-container {
@@ -140,6 +141,9 @@ onMounted(async () => {
.article-item {
width: calc(calc(100% - 2 * 1.5%) / 3);
height: 7.0%;
+ h1:hover, h3:hover, h2:hover, h4:hover{
+ cursor: pointer;
+ }
}
.article-content {
@@ -190,6 +194,9 @@ onMounted(async () => {
.article-link {
text-decoration: none;
color: inherit;
+ background: none;
transition: none;
+ border-radius: 20px;
}
+
</style>
\ No newline at end of file
diff --git a/src/views/HomePage/EconomyView.vue b/src/views/HomePage/EconomyView.vue
index e27f83bf841ae066a811371a11b8e98020f02327..60c24d391dff2a8b29d719b1151572522cf2c4ab 100644
--- a/src/views/HomePage/EconomyView.vue
+++ b/src/views/HomePage/EconomyView.vue
@@ -252,6 +252,7 @@ const getRandomColor = () => {
.help-icon:hover{
transform: scale(1.05);
+ cursor: pointer;
}
.title{
diff --git a/src/views/HomePage/HomeView.vue b/src/views/HomePage/HomeView.vue
index f23384ef929f0ce8fdaac33cb72eb206f66a83f9..282fab2832b99bfe216fcdb13292b49b6b79297a 100644
--- a/src/views/HomePage/HomeView.vue
+++ b/src/views/HomePage/HomeView.vue
@@ -68,7 +68,7 @@ userSavings()
Ny til Sparesti? Klikk her!
</h2>
</button>
- <ActiveMilestonesList></ActiveMilestonesList>
+ <ActiveMilestonesList class="active-challenges"></ActiveMilestonesList>
</div>
<div class="right" :class="{ 'mobile-hide': displayType }">
<h2 class="active-challenges-title">Aktive utfordringer</h2>
@@ -98,6 +98,7 @@ userSavings()
.help-icon:hover{
transform: scale(1.05);
+ cursor: pointer;
}
.popup-container {
@@ -144,7 +145,7 @@ userSavings()
background-color: var(--color-confirm-button);
border: 2px solid var(--color-border);
color: var(--color-button-text);
- min-height: 12%;
+ min-height: 10%;
}
.create-challenge-button:active{
@@ -155,6 +156,10 @@ userSavings()
transform: scale(1.02);
}
+.active-challenges{
+ height: 90%;
+}
+
.display-help-button{
font-weight: bold;
}
diff --git a/src/views/HomePage/MilestonePathView.vue b/src/views/HomePage/MilestonePathView.vue
index 8de1c902610e0624fec861ebb717aaad6e05888a..7e651794ed51da6ddf401451818290bafdaad803 100644
--- a/src/views/HomePage/MilestonePathView.vue
+++ b/src/views/HomePage/MilestonePathView.vue
@@ -135,6 +135,7 @@ const closeHelpPopUp = async () => {
.help-icon:hover{
transform: scale(1.05);
+ cursor: pointer;
}
.popup-container {
diff --git a/src/views/HomePage/MilestoneView.vue b/src/views/HomePage/MilestoneView.vue
index 9c2f496c43a77436590f1e2e260ba5b8a1d4b84c..b6b0c2195f379283fbfb6a9e69ea7c75008f50a6 100644
--- a/src/views/HomePage/MilestoneView.vue
+++ b/src/views/HomePage/MilestoneView.vue
@@ -86,6 +86,7 @@ const closeHelpPopUp = () => {
.help-icon:hover{
transform: scale(1.05);
+ cursor: pointer;
}
.popup-container {
@@ -132,7 +133,7 @@ const closeHelpPopUp = () => {
background-color: var(--color-confirm-button);
border: 2px solid var(--color-border);
color: var(--color-button-text);
- min-height: 12%;
+ min-height: 10%;
}
.create-milestone-button:active{
@@ -147,6 +148,10 @@ const closeHelpPopUp = () => {
font-weight: bold;
}
+.active-milestones{
+ height: 90%;
+}
+
.right{
display: flex;
flex-direction: column;
@@ -157,7 +162,7 @@ const closeHelpPopUp = () => {
box-shadow: 0 4px 4px var(--color-shadow);
background-color: var(--color-heading);
- height: 100%;
+ min-height: 100%;
width: 40%;
}
diff --git a/src/views/HomePageView.vue b/src/views/HomePageView.vue
index 88d5ba975353a8978ddbb68986215a0e2f600585..a842747537c46acaf5035f42a3d26f66fd431e57 100644
--- a/src/views/HomePageView.vue
+++ b/src/views/HomePageView.vue
@@ -91,7 +91,7 @@ const closePopup = () => {
flex-direction: row;
height: 88%;
width: 100%;
- min-height: 650px;
+ min-height: 700px;
}
.side-nav{