Make templates sexier

templates/twitch/badge_list.html

@@ -8,26 +8,26 @@
     {% if badge_sets %}
         {% for data in badge_data %}
             <h2>
-                <a href="{% url 'twitch:badge_set_detail' set_id=data.set.set_id %}">[{{ data.set.set_id }}]</a>
+                <a href="{% url 'twitch:badge_set_detail' set_id=data.set.set_id %}">{{ data.set.set_id }}</a>
             </h2>
-            {% for badge in data.badges %}
             <table>
+                {% for badge in data.badges %}
                     <tr>
                         <td style="width: 40px;">
                             <a href="{% url 'twitch:badge_set_detail' set_id=data.set.set_id %}">
-                                {% picture badge.image_url_4x alt=badge.title width=36 height=36 %}
+                                {% picture badge.image_url_4x alt=badge.title width=36 %}
                             </a>
                         </td>
                         <td>
                             <strong>{{ badge.title }}</strong>
                             {% if badge.description != badge.title %}
-                                <br>
+                                <br />
                                 {{ badge.description }}
                             {% endif %}
                         </td>
                     </tr>
-                </table>
                 {% endfor %}
+            </table>
             <br />
             {% if data.badges|length > 1 %}<small>versions: {{ data.badges|length }}</small>{% endif %}
         {% endfor %}

templates/twitch/badge_set_detail.html

@@ -6,25 +6,7 @@
 {% block content %}
     <h1>{{ badge_set.set_id }}</h1>
     {% if badges %}
-        <h2>
-            {{ badges.count }}
-            {% if badges.count == 1 %}
-                version
-            {% else %}
-                versions
-            {% endif %}
-        </h2>
         <table>
-            <thead>
-                <tr>
-                    <th>ID</th>
-                    <th></th>
-                    <th>Title</th>
-                    <th>Description</th>
-                    <th>Images</th>
-                    <th>Action</th>
-                </tr>
-            </thead>
             <tbody>
                 {% for badge in badges %}
                     <tr>
@@ -32,7 +14,7 @@
                             <code>{{ badge.badge_id }}</code>
                         </td>
                         <td>
-                            {% picture badge.image_url_4x alt=badge.title width=72 height=72 style="width: 72px !important; height: 72px !important; object-fit: contain" %}
+                            {% picture badge.image_url_4x alt=badge.title width=72 style="width: 72px !important; height: 72px !important; object-fit: contain" %}
                         </td>
                         <td>{{ badge.title }}</td>
                         <td>{{ badge.description }}</td>

templates/twitch/dashboard.html

@@ -16,19 +16,13 @@
 {% endblock extra_head %}
 {% block content %}
     <main>
-        <h1>Twitch Drops</h1>
+        <h1>Active Twitch Drops Campaigns</h1>
-        <pre>
-Latest drops are shown first within each game. Click on a campaign or game title to see more details.
-Hover over the end time to see the exact date and time.
-</pre>
         <!-- RSS Feeds -->
-        <div style="margin-bottom: 1rem;">
+        <div>
             <a href="{% url 'twitch:campaign_feed' %}"
-               style="margin-right: 1rem"
+               title="RSS feed for all campaigns">[rss - all campaigns]</a>
-               title="RSS feed for all campaigns">RSS feed for campaigns</a>
-            &nbsp;|&nbsp;
             <a href="{% url 'twitch:campaign_feed_atom' %}"
-               title="Atom feed for campaigns">Atom feed for campaigns</a>
+               title="Atom feed for campaigns">[atom - all campaigns]</a>
         </div>
         {% if campaigns_by_game %}
             {% for game_id, game_data in campaigns_by_game.items %}

templates/twitch/game_detail.html

@@ -21,14 +21,6 @@
         {{ game.display_name }}
         {% if game.display_name != game.name and game.name %}<small>({{ game.name }})</small>{% endif %}
     </h1>
-    <!-- RSS Feeds -->
-    <div>
-        <a href="{% url 'twitch:game_campaign_feed' game.twitch_id %}"
-           title="RSS feed for {{ game.display_name }} campaigns">RSS feed for {{ game.display_name }} campaigns</a>
-        &nbsp;|&nbsp;
-        <a href="{% url 'twitch:game_campaign_feed_atom' game.twitch_id %}"
-           title="Atom feed for {{ game.display_name }} campaigns">Atom feed for {{ game.display_name }} campaigns</a>
-    </div>
     <!-- Game image -->
     {% if game.box_art_best_url %}
         {% picture game.box_art_best_url alt=game.name width=160 %}
@@ -43,6 +35,13 @@
             {% endfor %}
         </small>
     {% endif %}
+    <!-- RSS Feeds -->
+    <div>
+        <a href="{% url 'twitch:game_campaign_feed' game.twitch_id %}"
+           title="RSS feed for {{ game.display_name }} campaigns">[rss - {{ game.display_name|default:game.name|lower }}]</a>
+        <a href="{% url 'twitch:game_campaign_feed_atom' game.twitch_id %}"
+           title="Atom feed for {{ game.display_name }} campaigns">[atom - {{ game.display_name|default:game.name|lower }}]</a>
+    </div>
     {% if active_campaigns %}
         <h5 id="active-campaigns-header">Active Campaigns</h5>
         <table id="active-campaigns-table">

templates/twitch/org_list.html

@@ -3,26 +3,21 @@
     Organizations
 {% endblock title %}
 {% block content %}
-    <h1 id="page-title">Organizations</h1>
+    <h1>Organizations</h1>
-    <!-- RSS Feeds -->
+    <div>
-    <div style="margin-bottom: 1rem;">
         <a href="{% url 'twitch:organization_feed' %}"
-           style="margin-right: 1rem"
+           title="RSS feed for all organizations">[rss]</a>
-           title="RSS feed for all organizations">RSS feed for organizations</a>
         <a href="{% url 'twitch:organization_feed_atom' %}"
            title="Atom feed for all organizations">[atom]</a>
-    </div>
-    <!-- Export Options -->
-    <div style="margin-bottom: 1rem; display: flex; gap: 1rem;">
         <a href="{% url 'twitch:export_organizations_csv' %}"
            title="Export all organizations as CSV">[csv]</a>
         <a href="{% url 'twitch:export_organizations_json' %}"
            title="Export all organizations as JSON">[json]</a>
     </div>
     {% if orgs %}
-        <ul id="org-list">
+        <ul>
             {% for organization in orgs %}
-                <li id="org-{{ organization.twitch_id }}">
+                <li>
                     <a href="{% url 'twitch:organization_detail' organization.twitch_id %}">{{ organization.name }}</a>
                 </li>
             {% endfor %}