Skip to content
Snippets Groups Projects
Commit 38bc43a5 authored by VIktorGrev's avatar VIktorGrev
Browse files

feat: Adding leaderboard

parent 2066a311
No related branches found
No related tags found
1 merge request!17feat: Adding leaderboard
Pipeline #274468 failed
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
top: -0.5rem; top: -0.5rem;
background-color: #0A58CA; background-color: #0A58CA;
position: absolute; position: absolute;
left: -1rem; /**left: -1rem;*/
box-shadow: 0px 15px 11px -6px #7a7a7d; box-shadow: 0px 15px 11px -6px #7a7a7d;
} }
......
<template> <template>
<div id="dropdownContainer">
<Button class="btn btn-primary text-white leaderBoardButton">Global</Button>
<Button class="btn btn-primary text-white leaderBoardButton">Friends</Button>
</div>
<main> <main>
<div id="leaderboard"> <div id="leaderboard">
<h1>Ranking</h1> <h1><img src="@/assets/items/v-buck.png" style="width: 2rem"> Total points</h1>
<Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
<h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Current streak</h1>
<Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
<h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Highest streak</h1>
<Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" /> <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div> </div>
</main> </main>
<div id = "communityContainer">
<h1>Total points earned as a community</h1>
<h2>1000000 <img src="@/assets/items/v-buck.png" style="width: 2rem"></h2>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -31,18 +47,49 @@ const navigateToUserProfile = (userId: number) => { ...@@ -31,18 +47,49 @@ const navigateToUserProfile = (userId: number) => {
<style scoped> <style scoped>
main { main {
margin-top: 2rem;
margin-bottom: 4rem;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: space-around;
align-items: center; align-items: center;
flex-wrap: wrap;
flex-direction: row;
} }
#leaderboard { #leaderboard {
width: 60%; width: 400px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
h1 {
font-weight: 500;
margin-bottom: 1rem;
}
#dropdownContainer {
display: flex;
justify-content: center;
margin-bottom: 2rem;
margin-top: 3rem;
}
#communityContainer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 5rem;
}
.leaderBoardButton {
padding: 1rem 4rem;
font-weight: 700;
border-radius: 2rem;
margin: 1rem;
}
</style> </style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment