Leaderboard widget

website/templates/_leaderboard_widget.html

@@ -0,0 +1,71 @@
+{% load gravatar %}
+{% load humanize %}
+
+<div class="row-start-1 bug-container leaderboard-widget flex flex-col p-5 pt-3 bg-[white] m-1 w-[100%] row-span-2 rounded-[2.5rem]  border-[#e8e8e8] border-2 font-['Inter'] h-[630px]">
+
+    <div class="font-['Barlow_Semi_Condensed'] font-semibold text-[black] text-[35px] text-center mb-2">LEADERBOARD</div>
+
+    <div class="bg-[#EAEAEA] font-semibold p-3 mt- rounded-2xl">
+        The 1st Place Hunter for will receive
+        <div class="bg-white p-2 text-[1.35rem] rounded-xl border-[#BF1919] border-2">
+            No sponsored prizes this month<br>
+            <div class="my-2 mt-3">
+                <a href="/sponsor" class="bg-red-500 text-white px-4 py-2 rounded text-xl border border-[#ac2925] hover:bg-[#c9302c] hover:border-[#761c19] hover:text-[#e8e8e8] rounded-lg"> Sponsor a Prize</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="users-all h-full max-h-full overflow-y-auto my-3 font-['Barlow']">
+        {% if not leaderboard %}
+            Leaderboard has been reset for {% now "F" %}, be the first to find issues!
+        {% endif %}
+        {% for leader in leaderboard %}
+
+            <a href="/profile/{{ leader.username }}" class="flex flex-row h-[4rem] items-center my-2 mx-1 hover:bg-[#e8e8e8] rounded-2xl">
+
+                <span class="h-full w-[8rem] flex justify-center items-center scale-[0.65]">                            
+                    {% if leader.userprofile.avatar %}
+                    <img src="{{ leader.userprofile.avatar }}" class="profileimage object-cover">
+                    {% elif user.socialaccount_set.all.0.get_avatar_url %}
+                    <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}" class="profileimage object-cover">
+                    {% else %}
+                    <img src="{% gravatar_url leader.email 50 %}" class="profileimage object-cover">
+                    {% endif %}
+                </span>
+
+                <span class="w-full overflow-clip font-semibold text-[#500000bd] text-[18px] mb-2"> {{ leader.username }} </span>
+
+                <span class="rank me-2 w-[5.5rem] flex flex-row items-end text-black font-semibold h-[2rem] rounded-full 
+                    {% if forloop.counter == 1 %}bg-[gold]{% endif %}
+                    {% if forloop.counter == 2 %}bg-[#CDCDCD]{% endif %}
+                    {% if forloop.counter == 3 %}bg-[#F8BF95]{% endif %}
+                ">
+                    <span class="ms-auto text-[15px] mb-[-1.1px]"> {{ forloop.counter }}                 </span>
+                    <span class="me-auto text-[10px] mb-[0.8px]">{{ forloop.counter|ordinal|slice:"1:" }}</span>
+                </span>
+
+            </a>
+        {% endfor %}
+    </div>
+
+    <div class="">
+        <a href="/leaderboard" class="btn btn-default btn-block submit_button p-2 rounded-2xl"> View All</a>
+        <a href="/leaderboard/monthly" class="btn btn-default btn-block submit_button p-2 rounded-2xl"> Filter Monthly</a>
+        <a href="/leaderboard/each-month" class="btn btn-default btn-block submit_button p-2 rounded-2xl"> View Monthly</a>
+    </div>
+
+</div>
+
+{% comment %} positions the leaderboard rightmost {% endcomment %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const grid = document.querySelector('.hero-bugs-container');
+      const child = document.querySelector('.leaderboard-widget');
+
+      if (grid && child) {
+        const columns = getComputedStyle(grid).gridTemplateColumns.split(' ').length;
+
+        child.style.gridColumn = columns;
+      }
+    });
+</script>

website/templates/base_new.html

@@ -33,7 +33,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
-    <link href='https://fonts.googleapis.com/css?family=Barlow:500' rel='stylesheet'>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600&family=Barlow:wght@500;600;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans" rel="stylesheet">
     <link href="{% static 'css/main.css' %}" rel="stylesheet" type="text/css">
     <link href="{% static 'css/text-slider.css' %}" rel="stylesheet" type="text/css">
@@ -60,7 +60,7 @@
 
 </head>
 
-<body class="relative min-h-[100vh] flex flex-col bg-[#F7F7F7] font-['Ubuntu']">
+<body class="relative min-h-[100vh] flex flex-col bg-[#F7F7F7] font-['Inter']">
 
     {% comment %} navigation {% endcomment %}
         {% include "includes/header.html" %}

website/templates/new_home.html

@@ -7,10 +7,15 @@
         }
     </style>
     <div class="font-['Barlow'] text-[#2B2B2B] text-5xl tracking-wide font-semibold mb-0 mt-10 ms-[4.3%]">Find bugs, earn points, prize and cash!</div>
-    <div class="hero-bugs-container mx-[4%] my-[2.5rem] grid grid-flow-row gap-[25px]">
+    <div class="hero-bugs-container mx-[4%] my-[2.5rem] grid grid-rows-2 gap-[25px]">
+
         {% include '_report_widget.html' %}
+
+        {% include '_leaderboard_widget.html' %}
+
         {% for bug in bugs %}
             {% include '_bug.html' %}
+
         {% endfor %}
     </div>
 

website/views.py

@@ -194,7 +194,7 @@ def newhome(request, template="new_home.html"):
     for bug in bugs:
         bugs_screenshots[bug] = IssueScreenshot.objects.filter(issue=bug)[0:3]
 
-    paginator = Paginator(bugs, 7)
+    paginator = Paginator(bugs, 9)
     page_number = request.GET.get('page')
     page_obj = paginator.get_page(page_number)
 
@@ -246,10 +246,10 @@ def newhome(request, template="new_home.html"):
         # "server_url": request.build_absolute_uri('/'),
         # "activities": activities,
         # "hunts": Hunt.objects.exclude(txn_id__isnull=True)[:4],
-        # "leaderboard": User.objects.filter(
-        #     points__created__month=datetime.now().month,
-        #     points__created__year=datetime.now().year,
-        # )
+        "leaderboard": User.objects.filter(
+            points__created__month=datetime.now().month,
+            points__created__year=datetime.now().year,
+        )
         # .annotate(total_score=Sum("points__score"))
         # .order_by("-total_score")[:10],
         # "bug_count": bug_count,