made leaderboard

reValuate/home/views.py

@@ -4,6 +4,7 @@ from users.models import Balance
 from django.conf import settings
 from users.models import User
 import operator
+from upload.models import Media
 
 def homePage(request):
     iter_var = 0
@@ -54,15 +55,48 @@ def leaderboard(request):
         username = i.username
         balance = i.balance.balanceValue
         # add media counter and other stuff 
-        if f"{username}" in leaderboard.values():
+        if f"{username}" in leaderboard.keys():
-            leaderboard[username] = balance + leaderboard[username].value
+            leaderboard[username] = balance + leaderboard[username]
         else:
             leaderboard[username] = balance    
 
-    print()
+    leaderboard = dict(sorted(leaderboard.items(), key=operator.itemgetter(0)))
+    leaderboard = dict(reversed(list(leaderboard.items())))
+
+    while len(leaderboard) > 5:
+        leaderboard.pop()
+    
+
+    media = Media.objects.all() 
+    user_media = {}
+    for i in media:
+        username = i.user.username
+        if f"{username}" in user_media.keys():
+            user_media[username] = 1 + user_media[username]
+        else:
+            user_media[username] = 1
+   
+    user_media = dict(sorted(user_media.items(), key=operator.itemgetter(0)))
+    user_media = dict(reversed(list(user_media.items())))
+
+    while len(user_media) > 5:
+        user_media.pop()
+
+    # for i in media:
+    #     username = i.user.username
+    #     image = i.image
+
+    #     if f"{username}" in media_count.values():
+    #         media_count[username] = image + media_count[username].value
+    #     else:
+    #         media_count[username] = image   
+    
+    # print(media_count)
 
     context = {
-        "leaderboard":dict(sorted(leaderboard.items(), key=operator.itemgetter(0))),
+        "leaderboard":leaderboard,
+        "user_media":user_media
     }
+
     return render(request, 'leaderboard.html', context)
  

reValuate/templates/leaderboard.html

@@ -1,13 +1,160 @@
 {% extends 'base.html' %}
 
 {% block title %}Класация{% endblock %}
+{% block optionalParams %}
+<style>
 
+*,
+*:before,
+*:after {
+	box-sizing: border-box;
+}
+html,
+body {
+	height: 100%;
+}
+body {
+	font: 16px/1.2 "Roboto", sans-serif;
+	color: #333;
+}
+a {
+	display: inline-block;
+	color: #333;
+	text-decoration: none;
+}
+.blog {
+	font-size: 14px;
+	font-weight: bold;
+	text-align: center;
+	position: absolute;
+	bottom: 15px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 1;
+}
+
+.container {
+	width: 300px;
+	height: auto;
+	border-radius: 10px;
+	background-color: white;
+	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+	position: absolute;
+	top: 50%;
+	left: 25%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+	overflow: hidden;
+
+}
+
+.container-2 {
+	width: 500px;
+	height: auto;
+	border-radius: 10px;
+	background-color: white;
+	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+	position: absolute;
+	top: 50%;
+	left: 75%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+	overflow: hidden;
+}
+
+@media only screen and (max-width: 800px) {
+
+    .container{
+        top:40%;
+        left:50%;
+    }
+    .container-2{
+        top:80%;
+        left:50%;
+    }
+}
+
+
+.leaderboard {
+	background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%);
+}
+
+
+.leaderboard .head {
+	padding: 20px 16px;
+	color: snow;
+	font-size: 20px;
+	text-align: center;
+}
+.leaderboard .head h1 {
+	display: inline-block;
+	margin-left: 4px;
+}
+
+
+.leaderboard .body {
+	color: snow;
+	font-size: 16px;
+}
+.leaderboard ol {
+	counter-reset: number; 
+}
+.leaderboard li {
+	padding: 16px;
+	display: flex;
+}
+.leaderboard li mark {
+	flex-grow: 1;
+	color: snow;
+	background-color: transparent;
+}
+.leaderboard li:before {
+	counter-increment: number; 
+	content: counter(number) "."; 
+	margin-right: 4px;
+}
+
+
+</style>
+{% endblock %}
 {% block content %}
-<div class="centered">
 
-{% for i, z in leaderboard.items reversed %}
+    <div class="container">
-
+		<div class="leaderboard">
-<h1>{{ forloop.counter }}. {{i}} has {{z}} reCoins </h1><br>
+			<div class="head">
+				<i class="fas fa-crown"></i>
+				<h1>Най-много reCoins</h1>
+			</div>
+			<div class="body">
+				<ol>
+					{% for i, z in leaderboard.items %}
+                    <li>
+						<mark>{{ i }}</mark>
+						<small>{{z}} reCoins</small>
+					</li>
                     {% endfor %}
+                </ol>
+			</div>
+		</div>
+	</div>
+    <div class="container-2">
+		<div class="leaderboard">
+			<div class="head">
+				<i class="fas fa-crown"></i>
+				<h1>Най-много качена медия</h1>
+			</div>
+			<div class="body">
+				<ol>
+					{% for i, z in user_media.items %}
+                    <li>
+						<mark>{{ i }}</mark>
+						<small>{{z}} снимки и видеа</small>
+					</li>
+                    {% endfor %}
+                </ol>
+			</div>
+		</div>
+	</div>
+
 </div>
 {% endblock %}