From fb1f7c4983aa6d1fdb89f57efaf61895706e3f07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Thu, 4 Jul 2024 03:23:39 +0200
Subject: [PATCH] Improve (?) the HTML

---
 core/templates/index.html | 121 +++++++++++++++++++++++---------------
 static/css/style.css      |   5 ++
 2 files changed, 78 insertions(+), 48 deletions(-)

diff --git a/core/templates/index.html b/core/templates/index.html
index 58cb9af..0cd2198 100644
--- a/core/templates/index.html
+++ b/core/templates/index.html
@@ -1,62 +1,87 @@
 {% extends "base.html" %}
 {% block content %}
     <div class="container mt-4">
-        {% for game in games %}
-            <div class="card mb-4">
-                <div class="row g-0">
-                    <div class="col-md-2">
-                        <img src="{{ game.image_url }}"
-                             alt="{{ game.display_name }}"
-                             class="img-fluid rounded-start"
-                             height="150"
-                             width="150"
-                             loading="lazy">
-                    </div>
-                    <div class="col-md-4">
+        <div class="row">
+            <div class="col-lg-3">
+                <div class="position-sticky d-none d-lg-block toc">
+                    <div class="card">
                         <div class="card-body">
-                            <h2 class="card-title h5">
-                                <a href="{{ game.twitch_url }}" class="text-decoration-none">{{ game.display_name }}</a>
-                            </h2>
+                            <h5 class="card-title">Games</h5>
+                            <ul class="list-unstyled">
+                                {% for game in games %}
+                                    <li>
+                                        <a href="#game-{{ game.game_id }}" class="text-decoration-none">{{ game.display_name }}</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
                         </div>
                     </div>
                 </div>
-                {% for campaign in game.campaigns %}
-                    <div class="card-body card-bottom">
-                        <h3 class="h6">{{ campaign.name }}</h3>
-                        <p class="mb-2 text-muted">Ends in: {{ campaign.end_at|timeuntil }}</p>
-                        {% if campaign.description != campaign.name %}
-                            {% if campaign.description|length|get_digit:"-1" > 100 %}
-                                <p>
-                                    <a class="btn btn-link p-0 text-muted"
-                                       data-bs-toggle="collapse"
-                                       href="#collapseDescription{{ campaign.drop_id }}"
-                                       role="button"
-                                       aria-expanded="false"
-                                       aria-controls="collapseDescription{{ campaign.drop_id }}"
-                                       aria-label="Show Description">Show Description</a>
-                                </p>
-                                <div class="collapse" id="collapseDescription{{ campaign.drop_id }}">
-                                    <div class="card card-body">{{ campaign.description }}</div>
-                                    <br>
-                                </div>
-                            {% else %}
-                                <p>{{ campaign.description }}</p>
-                            {% endif %}
-                        {% endif %}
-                        {% for drop in campaign.drops %}
-                            <div class="col-6 col-md-4 d-flex align-items-center mb-2 position-relative">
-                                <img src="{{ drop.image_url }}"
-                                     alt="{{ drop.name }} drop image"
-                                     class="img-fluid rounded me-3"
-                                     height="50"
-                                     width="50"
+            </div>
+            <!-- Games Column -->
+            <div class="col-lg-9">
+                {% for game in games %}
+                    <div class="card mb-4 shadow-sm" id="game-{{ game.game_id }}">
+                        <div class="row g-0">
+                            <div class="col-md-2">
+                                <img src="{{ game.image_url }}"
+                                     alt="{{ game.display_name }}"
+                                     class="img-fluid rounded-start"
+                                     height="283"
+                                     width="212"
                                      loading="lazy">
-                                {{ drop.name }}
                             </div>
-                        {% endfor %}
+                            <div class="col-md-10">
+                                <div class="card-body">
+                                    <h2 class="card-title h5">
+                                        <a href="{{ game.twitch_url }}" class="text-decoration-none">{{ game.display_name }}</a>
+                                    </h2>
+                                    {% for campaign in game.campaigns %}
+                                        {% if not forloop.first %}<br>{% endif %}
+                                        <div class="mt-3">
+                                            <h3 class="h6">{{ campaign.name }}</h3>
+                                            <p class="mb-2 text-muted">Ends in: {{ campaign.end_at|timeuntil }}</p>
+                                            {% if campaign.description != campaign.name %}
+                                                {% if campaign.description|length|get_digit:"-1" > 100 %}
+                                                    <p>
+                                                        <a class="btn btn-link p-0 text-muted"
+                                                           data-bs-toggle="collapse"
+                                                           href="#collapseDescription{{ campaign.drop_id }}"
+                                                           role="button"
+                                                           aria-expanded="false"
+                                                           aria-controls="collapseDescription{{ campaign.drop_id }}"
+                                                           aria-label="Show Description">Show
+                                                        Description</a>
+                                                    </p>
+                                                    <div class="collapse" id="collapseDescription{{ campaign.drop_id }}">
+                                                        <div class="card card-body">{{ campaign.description }}</div>
+                                                        <br>
+                                                    </div>
+                                                {% else %}
+                                                    <p>{{ campaign.description }}</p>
+                                                {% endif %}
+                                            {% endif %}
+                                            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2">
+                                                {% for drop in campaign.drops %}
+                                                    <div class="col d-flex align-items-center position-relative">
+                                                        <img src="{{ drop.image_url }}"
+                                                             alt="{{ drop.name }} drop image"
+                                                             class="img-fluid rounded me-3"
+                                                             height="50"
+                                                             width="50"
+                                                             loading="lazy">
+                                                        {{ drop.name }}
+                                                    </div>
+                                                {% endfor %}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 {% endfor %}
             </div>
-        {% endfor %}
+        </div>
     </div>
 {% endblock content %}
diff --git a/static/css/style.css b/static/css/style.css
index bb2ece4..1272f88 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -55,3 +55,8 @@ a:hover {
     background-color: #181818;
     border-color: #444444;
 }
+
+/* Table of games to the left */
+.toc {
+    top: 1rem;
+}