From 739a41c4aaabf4ae061de5a2f9efb08d6119eb8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= <lukas@kucharczyk.xyz>
Date: Sun, 19 Feb 2023 16:18:14 +0100
Subject: [PATCH] Add icons for session filters

---
 CHANGELOG.md                       |  1 +
 frontend/src/index.css             | 16 ++++++++++++++--
 games/templates/list_sessions.html | 19 +++++++++++++------
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f134f1..26f6d41 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## Unreleased
 
 * Allow filtering by game, edition, purchase from the session list
+* Add icons for the above
 
 ## 1.0.2 / 2023-02-18 21:48+01:00
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2ff5f48..cb1629e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -17,8 +17,20 @@ textarea {
   grid-template-columns: 3fr repeat(3, 1fr) 0.5fr 1fr;
 }
 
-.purchase-name:hover > span:nth-child(2) {
-  @apply dark:text-slate-300
+.purchase-name > span:nth-child(2) {
+  @apply ml-4
+}
+
+.purchase-name > span:nth-child(2) > a > img {
+  @apply opacity-0 transition-opacity duration-500
+}
+
+.purchase-name:hover > span:nth-child(2) > a > img {
+  @apply opacity-50
+}
+
+.purchase-name > span:nth-child(2) > a > img:hover {
+  @apply opacity-100
 }
 
 #button-container button {
diff --git a/games/templates/list_sessions.html b/games/templates/list_sessions.html
index e3d3a41..ba4afc1 100644
--- a/games/templates/list_sessions.html
+++ b/games/templates/list_sessions.html
@@ -1,5 +1,7 @@
 {% extends 'base.html' %}
 
+{% load static %}
+
 {% block title %}{{ title }}{% endblock title %}
 
 {% block content %}
@@ -40,13 +42,18 @@
         <div class="dark:border-white dark:text-slate-300 text-lg text-right">Manage</div>
         {% for data in dataset %}
             <div class="purchase-name">
-                <span class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">{{ data.purchase.edition }} <span class="dark:text-slate-400">({{ data.purchase.get_ownership_type_display }})</span></span>
+                <span class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">{{ data.purchase.edition }} <span class="dark:text-slate-400">(<a class="hover:underline" href="{% url 'list_sessions_by_ownership_type' data.purchase.ownership_type %}">{{ data.purchase.get_ownership_type_display }}</a>)</span></span>
                 
-                <span class="dark:text-slate-700 transition-colors duration-300">
-                    (<a class="hover:underline" href="{% url 'list_sessions_by_game'  data.purchase.edition.game.id %}">G</a>,
-                        <a class="hover:underline" href="{% url 'list_sessions_by_edition'  data.purchase.edition.id %}">E</a>,
-                        <a class="hover:underline" href="{% url 'list_sessions_by_purchase' data.purchase.id %}">P</a>,
-                        <a class="hover:underline" href="{% url 'list_sessions_by_ownership_type' data.purchase.ownership_type %}">O</a>)
+                <span>
+                    <a href="{% url 'list_sessions_by_game'  data.purchase.edition.game.id %}">
+                        <img src="{% static 'icons/game_white.png' %}" width="32" class="inline" alt="Filter by this game" title="Filter by this game" />
+                    </a>
+                    <a href="{% url 'list_sessions_by_edition'  data.purchase.edition.id %}">
+                        <img src="{% static 'icons/edition_white.png' %}" width="32" class="inline" alt="Filter by this edition" title="Filter by this edition" />
+                    </a>
+                    <a href="{% url 'list_sessions_by_purchase' data.purchase.id %}">
+                        <img src="{% static 'icons/purchase_white.png' %}" width="32" class="inline" alt="Filter by this purchase" title="Filter by this purchase" />
+                    </a>
                 </span>
             </div>
             <div class="dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"><a class="hover:underline" href="{% url 'list_sessions_by_platform' data.purchase.platform.id %}">{{ data.purchase.platform }}</a></div>