From 38bc43a5d7a79d0c5e618d35e7cbb2cf1a626296 Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Thu, 18 Apr 2024 14:17:35 +0200
Subject: [PATCH] feat: Adding leaderboard
---
.../LeaderboardComponents/Leaderboard.vue | 2 +-
src/views/LeaderboardView.vue | 53 +++++++++++++++++--
2 files changed, 51 insertions(+), 4 deletions(-)
diff --git a/src/components/LeaderboardComponents/Leaderboard.vue b/src/components/LeaderboardComponents/Leaderboard.vue
index 4831780..73cc5da 100644
--- a/src/components/LeaderboardComponents/Leaderboard.vue
+++ b/src/components/LeaderboardComponents/Leaderboard.vue
@@ -131,7 +131,7 @@
top: -0.5rem;
background-color: #0A58CA;
position: absolute;
- left: -1rem;
+ /**left: -1rem;*/
box-shadow: 0px 15px 11px -6px #7a7a7d;
}
diff --git a/src/views/LeaderboardView.vue b/src/views/LeaderboardView.vue
index 7f58d17..681a963 100644
--- a/src/views/LeaderboardView.vue
+++ b/src/views/LeaderboardView.vue
@@ -1,10 +1,26 @@
<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>
<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" />
</div>
</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>
<script setup lang="ts">
@@ -31,18 +47,49 @@ const navigateToUserProfile = (userId: number) => {
<style scoped>
main {
+ margin-top: 2rem;
+ margin-bottom: 4rem;
width: 100%;
display: flex;
- justify-content: center;
+ justify-content: space-around;
align-items: center;
+ flex-wrap: wrap;
+ flex-direction: row;
}
#leaderboard {
- width: 60%;
+ width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
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>
\ No newline at end of file
--
GitLab