Skip to content
Snippets Groups Projects
Commit 620fdc6f authored by Anders Høvik's avatar Anders Høvik
Browse files

Merge branch 'feature/activity-history' into 'main' 

Feature/activity history

See merge request !20
parents 748d542f 1d5aef44
No related branches found
No related tags found
1 merge request!20Feature/activity history
Pipeline #274598 failed
Stage: install_dependencies
Stage: lint
Stage: build_project
Hide whitespace changes
Inline Side-by-side
src/assets/icons/piggybank.svg 0 → 100644
+ 1
− 0
View file @ 620fdc6f
<svg id="Graphic_Elements" data-name="Graphic Elements" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><defs><style>.cls-1{fill:#faa;}.cls-2{fill:#7f3f3f;}.cls-3{fill:#ff8080;}.cls-4{fill:#f66;}</style></defs><g id="g4153"><path id="path4144" class="cls-1" d="M262.4,166.6a139.75,139.75,0,0,0-43,6.51c21.5,31.23,31.18,70.79,24.87,108.24-46.87,35.34-87.1,80.08-114.33,132.29-15.23-1.68-31.67-2-45.68,5.2C65.24,427.71,51.94,447.19,50,468Q50,562,50,656c.48,31.72,29.75,59.39,61.43,58.11,7.73.77,15.62-.89,23.11-1.25,13.66,23.92,29.51,46.79,48.06,67.13C231,834.5,294.13,874.8,361.77,901.24c-1.7,19.19-.87,39.41-.51,59,3.07,37,34.55,68.89,71.42,72.61,39.47,5.15,79.17-23.53,87.54-62.22,2.89-10.93,2.14-22.31,2.29-33.48,36.7,2.63,73.54,1.35,110.14-2.23.3,10.22-.71,20.52,1,30.65,5.33,34.25,34.78,62.81,69.19,67.07,30.38,4.29,62-10.84,78.36-36.69a83.25,83.25,0,0,0,13.07-46.14c-.27-19.18,1.22-38.69-2.92-57.54,73.33-32.61,140.47-82.62,186.39-149.16,45.16-64.12,67.14-144.81,57-222.9,23.83,1.63,48.88-2.3,69.25-15.31,16-9.89,28.09-25.26,35.41-42.42,8.37-20.38,13-43,9.35-64.9-2.59-16.5-10.57-32.36-23.17-43.45-21.8-19.7-56.23-26.39-82.71-12.36-17.69,9-26.57,31-21.53,49.93,2.17,2.63,4.61,6.21,7.68,7.4,4.92-7.4,8.46-16.07,15.7-21.63,7.35-6.26,17.09-11.74,27.1-9.49,7.86,2.1,13.37,8.9,16.23,16.22,6.08,16,5.07,35.28-4.17,49.94-7,11.73-21.41,17.67-34.69,15.74-13.62-1.27-26.24-7.32-37.71-14.41A359.14,359.14,0,0,0,937.55,326.3c-51.08-53.2-116.54-91.82-186.09-116-120.71-41.59-255.37-40.93-375.81,1.37-1.79.23-3.67,2.13-5.51,1.41-27.41-29.67-67.57-46.36-107.74-46.5Z"/><path id="path6" class="cls-2" d="M556.53,240.31c64.08-1.31,128.63,10,188.05,34.26,1.38,13.17.11,27,.45,40.34-1.6,0-3-1.2-4.47-1.74C643.32,268.58,529.21,264.24,428,297.86c-1.05-11.42-.15-23.1-.45-34.61.48-1.37-.52-3.84,1.9-3.73,41.21-12.23,84.18-18.36,127.1-19.21Z"/><path id="path8" class="cls-3" d="M937.55,326.3a359.53,359.53,0,0,1,73.94,109.12c11.46,7.08,24.08,13.14,37.71,14.41,13.29,1.93,27.74-4,34.7-15.74,9.2-14.66,10.24-33.91,4.17-49.94-2.87-7.32-8.38-14.13-16.23-16.22-10-2.25-19.77,3.23-27.11,9.49-7.22,5.56-10.79,14.23-15.71,21.63-3.09-1.19-5.51-4.77-7.67-7.4-5.06-18.94,3.84-40.88,21.52-49.93,26.47-14,60.91-7.34,82.73,12.36,12.58,11.09,20.55,26.95,23.15,43.45,3.62,21.94-1,44.52-9.38,64.9C1132.08,479.6,1120,495,1104,504.84c-20.4,13-45.42,16.95-69.24,15.33,10.08,78.09-11.88,158.77-57,222.88-45.91,66.56-113,116.56-186.38,149.18,4.17,18.84,2.68,38.34,2.91,57.52a82.9,82.9,0,0,1-13.07,46.13c-16.31,25.87-48,41-78.37,36.74-34.36-4.28-63.85-32.87-69.17-67.12-1.68-10.13-.67-20.41-1-30.64-36.6,3.57-73.45,4.87-110.13,2.23-.11,11.17.6,22.56-2.27,33.51-8.37,38.64-48.1,67.35-87.53,62.21-36.9-3.76-68.37-35.67-71.44-72.64-.36-19.51-1.21-39.76.51-58.93C294.13,874.8,231,834.48,182.6,779.94c80,36,169.69,47.88,256.62,38.91,84.74-8.42,167.42-34.93,241.85-76.1,47.5-26.51,92-58.9,130.3-97.55,42.89-42.88,78.75-93.52,101.27-150,21.56-53.25,30.45-111.63,24.91-168.86Z"/><path id="path10" class="cls-4" d="M243.11,388.83c6.81-1.09,10.71,6.37,13,11.6,7,18.92,7.47,39.87,4.16,59.61-2,9-4.24,19-11.79,25.07-5.12,3.34-10.85-1.29-13.13-5.84-7.32-12.87-8.05-28.15-8.86-42.56.53-12.76,1.71-25.88,7-37.67C235.59,394.88,238.22,390,243.11,388.83Z"/></g></svg>
\ No newline at end of file
src/components/UserProfile/UserProfileLayout.vue
+ 175
− 2
View file @ 620fdc6f
......@@ -2,9 +2,19 @@
import Menu from "@/components/BaseComponents/Menu.vue";
import Footer from "@/components/BaseComponents/Footer.vue";
import {useRouter} from "vue-router";
let numberOfHistory = 6;
let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
let points = 0;
let streak = 0;
let route = useRouter()
function toRoadmap(){
route.push('/roadmap')
}
</script>
<template>
......@@ -40,12 +50,73 @@ let streak = 0;
</div>
<div class="row">
<div class="col">
History
<!-- Here is the badges of the user -->
<div class="container-fluid">
<h1 class="mt-5 text-start badges-text">Badges</h1>
<div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="col-5">
<div class="card badges-block card-1"></div>
</div>
<div class="col-5">
<div class="card badges-block card-2"></div>
</div>
<div class="col-5">
<div class="card badges-block card-3"></div>
</div>
<div class="col-5">
<div class="card badges-block card-4"></div>
</div>
<div class="col-5">
<div class="card badges-block card-5"></div>
</div>
<div class="col-5">
<div class="card badges-block card-6"></div>
</div>
<div class="col-5">
<div class="card badges-block card-7"></div>
</div>
<div class="col-5">
<div class="card badges-block card-8"></div>
</div>
<div class="col-5">
<div class="card badges-block card-9"></div>
</div>
<div class="col-5">
<div class="card badges-block card-10"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
Your Badges
<!-- Here is the history of saving target -->
<div class="container-fluid mb-5">
<h1 class="mt-5 text-start history-text">History</h1>
<div class="row scrolling-wrapper-history">
<div v-for="index in numberOfHistory" :key="index" class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
<div class="card history-block" >
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="/src/assets/icons/piggybank.svg" class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{cardTitles[index-1]}}</h5>
<p class="card-text">Money saved: 200 <br/>You are one challenge: 21</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<a href="#" class="btn stretched-link" @click="toRoadmap"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -53,5 +124,107 @@ let streak = 0;
</template>
<style scoped>
.scrolling-wrapper-badges{
overflow-x: auto;
}
.scrolling-wrapper-history{
max-height: 300px;
overflow: auto;
}
.badges-text{
font-weight: 500;
font-size: 2.0em;
}
.history-text{
font-weight: 500;
font-size: 2.0em;
}
.badges-block{
height: 200px;
background-color: #fff;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 24px;
&:hover{
transform: translateY(-5px);
box-shadow: none;
opacity: 0.9;
}
}
.history-block{
height: 200px;
background-color: #fff;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 24px;
margin: 20px;
&:hover{
transform: translateY(-5px);
box-shadow: none;
opacity: 0.9;
}
}
.card-1{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
.card-2{
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
.card-3{
background-color: #00DBDE;
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}
.card-4{
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.card-5{
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}
.card-6{
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
.card-7{
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
.card-8{
background-color: #FBDA61;
background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}
.card-9{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
.card-10{
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}
</style>
\ No newline at end of file
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