From fb7d9ea4a7a627547c94e1bac3f54878d63ecffd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Tue, 2 Jul 2024 05:55:43 +0200
Subject: [PATCH] Use Bootstrap from disk instead of CDN

---
 core/templates/base.html                |  5 +-
 core/templates/index.html               | 72 +++++++++++--------------
 static/css/style.css                    | 50 ++++++++---------
 static/{css => js}/bootstrap.min.js     |  0
 static/{css => js}/bootstrap.min.js.map |  0
 5 files changed, 58 insertions(+), 69 deletions(-)
 rename static/{css => js}/bootstrap.min.js (100%)
 rename static/{css => js}/bootstrap.min.js.map (100%)

diff --git a/core/templates/base.html b/core/templates/base.html
index 18c7187..137c9f8 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -28,14 +28,14 @@
         <article class="container mt-5">
             <header class="d-flex justify-content-between align-items-center py-3 border-bottom">
                 <h1 class="h2">
-                    <a href='{% url "core:index" %}' class="text-decoration-none">Twitch drops</a>
+                    <a href='{% url "core:index" %}' class="text-decoration-none nav-title">Twitch drops</a>
                 </h1>
                 <nav>
                     <ul class="nav">
                         <li class="nav-item">
                             <a class="nav-link" href='{% url "api-1.0.0:openapi-view" %}'>API</a>
                         </li>
-                        <li class="nav-item">
+                        <li class="nav-item d-none d-sm-block">
                             <a class="nav-link" href="https://github.com/sponsors/TheLovinator1">Donate</a>
                         </li>
                         <li>
@@ -54,6 +54,7 @@
                 </nav>
             </header>
             {% block content %}
+                <p>Content goes here</p>
             {% endblock content %}
         </article>
         <script src="{% static 'js/bootstrap.min.js' %}"></script>
diff --git a/core/templates/index.html b/core/templates/index.html
index 0a43fdf..1668f98 100644
--- a/core/templates/index.html
+++ b/core/templates/index.html
@@ -9,8 +9,8 @@
                             <img src="{{ game.image_url }}"
                                  alt="{{ game.display_name }}"
                                  class="img-fluid rounded-start"
-                                 height="100"
-                                 width="100"
+                                 height="150"
+                                 width="150"
                                  loading="lazy">
                         </div>
                         <div class="col-md-4">
@@ -21,47 +21,39 @@
                                 </h2>
                             </div>
                         </div>
-                        <div class="col-md-6">
-                            {% if discord_settings %}
-                                <div class="card-body">
-                                    <form action='{% url "core:subscription_create" %}'
-                                          method="post"
-                                          class="mb-2">
-                                        {% csrf_token %}
-                                        <input type="hidden" name="game_id" value="{{ game.id }}">
-                                        <select name="discord_webhook" class="form-select">
-                                            {% for discord_setting in discord_settings %}
-                                                <option value="{{ discord_setting.id }}">{{ discord_setting.name }}</option>
-                                            {% endfor %}
-                                        </select>
-                                        <div>
-                                            <a href="#" class="card-link mt-2">Notify when new drop are found</a>
-                                        </div>
-                                        <div>
-                                            <a href="#" class="card-link mt-2">Notify when the drop is live</a>
-                                        </div>
-                                    </form>
+                    </div>
+                    <div class="card-body card-bottom">
+                        {% if discord_settings %}
+                            <div class="card-body">
+                                <div>Available on iOS: {{ game_data.ios_available|yesno:"Yes,No" }}</div>
+                            </div>
+                        {% else %}
+                            <div class="card-body text-end">
+                                <a href="{% url 'core:add_discord_webhook' %}" class="card-link">Add Discord settings</a>
+                            </div>
+                        {% endif %}
+                    </div>
+                    <div class="card-body card-bottom">
+                        <div class="row">
+                            {% for drop_benefit in game_data.drop_benefits %}
+                                <div class="col-6 col-md-4 d-flex align-items-center mb-2 position-relative">
+                                    <img src="{{ drop_benefit.image_asset_url }}"
+                                         alt="{{ drop_benefit.name }}"
+                                         class="img-fluid rounded me-3"
+                                         height="50"
+                                         width="50"
+                                         loading="lazy">
+                                    {# Only show the entitlement limit if it's not None or above 1 #}
+                                    {% if drop_benefit.entitlement_limit > 1 %}
+                                        <span class="badge bg-primary position-absolute top-100 start-20 translate-middle">{{ drop_benefit.entitlement_limit }}
+                                            <span class="visually-hidden">limit per account</span>
+                                        </span>
+                                    {% endif %}
+                                    {{ drop_benefit.name }}
                                 </div>
-                            {% else %}
-                                <div class="card-body text-end">
-                                    <a href="{% url 'core:add_discord_webhook' %}" class="card-link">Add Discord settings</a>
-                                </div>
-                            {% endif %}
+                            {% endfor %}
                         </div>
                     </div>
-                    <ul class="list-group list-group-flush">
-                        {% for drop_benefit in game_data.drop_benefits %}
-                            <li class="list-group-item d-flex align-items-center">
-                                <img src="{{ drop_benefit.image_asset_url }}"
-                                     alt="{{ drop_benefit.name }}"
-                                     class="img-fluid rounded me-3"
-                                     height="50"
-                                     width="50"
-                                     loading="lazy">
-                                <a href="{{ drop_benefit.details_url }}" class="text-decoration-none">{{ drop_benefit.name }}</a>
-                            </li>
-                        {% endfor %}
-                    </ul>
                 </div>
             {% endfor %}
         </div>
diff --git a/static/css/style.css b/static/css/style.css
index a0f2b3c..bb2ece4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,8 +1,10 @@
+/* Make background color darker and text white */
 body {
     background-color: #0c0c0c;
     color: #ffffff;
 }
 
+/* Make links white */
 a {
     color: #ffffff;
 }
@@ -19,43 +21,37 @@ a:hover {
     color: #e91e63;
 }
 
+/* Make the logo text pink */
+.nav-title {
+    color: #e91e63;
+}
+
+/* Top half of the card */
 .card {
     background-color: #111111;
-    border: 1px solid #111111;
+    border: 1px solid #000000;
 }
 
-.card-title a {
-    color: #ffffff;
-}
 
-.card-title a:hover {
-    color: #e91e63;
-}
-
-.alert {
-    background-color: #333333;
-    border-color: #444444;
-}
-
-.list-group-item {
+/* Bottom half of the card */
+.card-bottom {
     background-color: #141414;
-    border: 1px solid #141414;
-}
-
-.list-group-item a {
-    color: #ffffff;
-}
-
-.list-group-item a:hover {
-    color: #e91e63;
+    border-top: 1px solid #000000;
 }
 
 .btn-primary {
-    background-color: #06172e;
-    border-color: #000c1d;
+    background-color: #e91e63;
+    border-color: #111111;
 }
 
 .btn-primary:hover {
-    background-color: #040e1d;
-    border-color: #000c1d;
+    background-color: #af1548;
+    border-color: #111111;
+}
+
+/* Django alerts */
+/* https://docs.djangoproject.com/en/5.0/ref/contrib/messages/ */
+.alert {
+    background-color: #181818;
+    border-color: #444444;
 }
diff --git a/static/css/bootstrap.min.js b/static/js/bootstrap.min.js
similarity index 100%
rename from static/css/bootstrap.min.js
rename to static/js/bootstrap.min.js
diff --git a/static/css/bootstrap.min.js.map b/static/js/bootstrap.min.js.map
similarity index 100%
rename from static/css/bootstrap.min.js.map
rename to static/js/bootstrap.min.js.map