From cec38ecaedd000c1f6919e63cc8bab837b2f24f7 Mon Sep 17 00:00:00 2001
From: Vivaan Verma <vivaan.verma@gmail.com>
Date: Sat, 14 Aug 2021 22:34:08 +0100
Subject: chore: Add tag to resource boxes

---
 .../resources/templatetags/get_category_icon.py    | 37 ++++++++++++++++++++++
 pydis_site/templates/resources/resource_box.html   | 20 +++++++++---
 pydis_site/templates/resources/resources.html      |  2 +-
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 pydis_site/apps/resources/templatetags/get_category_icon.py

(limited to 'pydis_site')

diff --git a/pydis_site/apps/resources/templatetags/get_category_icon.py b/pydis_site/apps/resources/templatetags/get_category_icon.py
new file mode 100644
index 00000000..683f2c98
--- /dev/null
+++ b/pydis_site/apps/resources/templatetags/get_category_icon.py
@@ -0,0 +1,37 @@
+from django import template
+
+register = template.Library()
+
+
+@register.filter
+def get_category_icon(name: str) -> str:
+    """Get icon of a specific resource category."""
+    icons = {
+        "Algorithms And Data Structures": "fa-cogs",
+        "Data Science": "fa-flask",
+        "Databases": "fa-server",
+        "Game Development": "fa-joystick",
+        "General": "fa-book",
+        "Microcontrollers": "fa-microchip",
+        "Other": "fa-question-circle",
+        "Software Design": "fa-paint-brush",
+        "Testing": "fa-vial",
+        "Tooling": "fa-toolbox",
+        "User Interface": "fa-desktop",
+        "Web Development": "fa-wifi",
+        "Book": "fa-book",
+        "Community": "fa-users",
+        "Course": "fa-chalkboard-teacher",
+        "Interactive": "fa-mouse-pointer",
+        "Podcast": "fa-microphone-alt",
+        "Tool": "fa-tools",
+        "Tutorial": "fa-clipboard-list",
+        "Video": "fa-video",
+        "Free": "f",
+        "Paid": "fa-sack",
+        "Subscription": "fa-vault",
+        "Beginner": "fa-play-circle",
+        "Intermediate": "fa-align-center"
+    }
+    icon_name = icons[name]
+    return f'fa {icon_name}'
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index 8146be6f..40f692c3 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -1,4 +1,5 @@
 {% load as_icon %}
+{% load get_category_icon %}
 
 <div class="box" style="max-width: 800px;">
     {% if 'title_url' in resource %}
@@ -11,7 +12,7 @@
 
     <p class="is-italic">{{ resource.description|safe }}</p>
 
-    <div class="is-flex">
+    <div class="is-flex is-align-items-center">
         {# Icons #}
         {% for icon in resource.urls %}
             <span class="icon is-size-4 is-medium" style="margin: 5px;">
@@ -20,8 +21,19 @@
                 </a>
             </span>
         {% endfor %}
-        <button class="button is-primary is-light is-small ml-auto p-1">
-            <a href="#">src</a>
-        </button>
+        <div class="is-flex ml-auto">
+            {% for tag in resource.tags.topics %}
+            <span class="tag is-primary ml-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            {% endfor %}
+            {% for tag in resource.tags.type %}
+            <span class="tag is-primary ml-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            {% endfor %}
+            {% for tag in resource.tags.payment_tiers %}
+            <span class="tag is-primary ml-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            {% endfor %}
+            {% for tag in resource.tags.complexity %}
+            <span class="tag is-primary ml-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            {% endfor %}
+        </div>
     </div>
 </div>
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index fb482345..38cd3d9d 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -104,7 +104,7 @@
     {% if resources|length > 0 %}
     <section class="section">
         <div class="container">
-            <div class="content">
+            <div class="content is-flex is-justify-content-center">
                 <div>
                     {% for resource in resources %}
                         {% include "resources/resource_box.html" %}
-- 
cgit v1.2.3