Add breadcrumb navigation

templates/twitch/badge_list.html

@@ -5,6 +5,9 @@
 {% endblock title %}
 {% block content %}
     <h1>{{ badge_sets.count }} Twitch Chat Badges</h1>
+    <div>
+        <a href="{% url 'twitch:dashboard' %}">Twitch</a> > Badges
+    </div>
     {% if badge_sets %}
         {% for data in badge_data %}
             <h2>

templates/twitch/badge_set_detail.html

@@ -5,6 +5,9 @@
 {% endblock title %}
 {% block content %}
     <h1>{{ badge_set.set_id }}</h1>
+    <div>
+        <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:badge_list' %}">Badges</a> > {{ badge_set.set_id }}
+    </div>
     {% if badges %}
         <table>
             <tbody>
@@ -19,12 +22,12 @@
                         <td>{{ badge.title }}</td>
                         <td>{{ badge.description }}</td>
                         <td>
-                            <a href="{{ badge.image_url_1x }}" rel="nofollow ugc">[18px]</a>
-                            <a href="{{ badge.image_url_2x }}" rel="nofollow ugc">[36px]</a>
-                            <a href="{{ badge.image_url_4x }}" rel="nofollow ugc">[72px]</a>
+                            <a href="{{ badge.image_url_1x }}">[18px]</a>
+                            <a href="{{ badge.image_url_2x }}">[36px]</a>
+                            <a href="{{ badge.image_url_4x }}">[72px]</a>
                         </td>
                         <td>
-                            {% if badge.click_url %}<a href="{{ badge.click_url }}" rel="nofollow ugc">{{ badge.click_action }}</a>{% endif %}
+                            {% if badge.click_url %}<a href="{{ badge.click_url }}">{{ badge.click_action }}</a>{% endif %}
                         </td>
                     </tr>
                     {% if badge.award_campaigns %}

templates/twitch/campaign_detail.html

@@ -31,71 +31,70 @@
         <!-- Campaign Title -->
         <div style="display: flex; flex-direction: column;">
             <h1 style="margin-top: 0; margin-bottom: 0px;">{{ campaign.clean_name }}</h1>
+            <!-- Add breadcrumbs -->
             <div>
-                {% if campaign.game %}
-                    <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">{{ campaign.game.get_game_name }}</a>
-                {% endif %}
-                {% if owners %}
-                    -
-                    <!-- Campaign Owners -->
-                    {% for org in owners %}
-                        <a href="{% url 'twitch:organization_detail' org.twitch_id %}">{{ org.name }}</a>
-                    {% endfor %}
-                {% endif %}
+                <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:campaign_list' %}">Campaigns</a> > <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">{{ campaign.game.display_name }}</a> > {{ campaign.clean_name }}
             </div>
+            <!-- Game owner -->
+            {% if owners %}
+                <div style="font-size: 0.9em;">
+                    Owned by
+                    {% for owner in owners %}
+                        <a href="{% url 'twitch:organization_detail' owner.twitch_id %}">{{ owner.name }}</a>
+                        {% if not forloop.last %}-{% endif %}
+                    {% endfor %}
+                </div>
+            {% endif %}
             <!-- Campaign description -->
             <p>{{ campaign.description|linebreaksbr }}</p>
-            <small>
-                Published:
+            <div>
+                Published
                 <time datetime="{{ campaign.added_at|date:'c' }}"
-                      title="{{ campaign.added_at|date:'DATETIME_FORMAT' }}">{{ campaign.added_at|date:"M d, Y H:i" }}</time>
-                · Last updated:
+                      title="{{ campaign.added_at|date:'DATETIME_FORMAT' }}">{{ campaign.added_at|date:"M d, Y H:i" }}</time> ({{ campaign.added_at|timesince }} ago)
+            </div>
+            <div>
+                Last updated
                 <time datetime="{{ campaign.updated_at|date:'c' }}"
-                      title="{{ campaign.updated_at|date:'DATETIME_FORMAT' }}">{{ campaign.updated_at|date:"M d, Y H:i" }}</time>
-            </small>
+                      title="{{ campaign.updated_at|date:'DATETIME_FORMAT' }}">{{ campaign.updated_at|date:"M d, Y H:i" }}</time> ({{ campaign.updated_at|timesince }} ago)
+            </div>
             <!-- Campaign end times -->
             <div>
                 {% if campaign.end_at < now %}
+                    Ended
                     <time datetime="{{ campaign.end_at|date:'c' }}"
-                          title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">
-                        <strong>Ended</strong> {{ campaign.end_at|timesince }} ago
-                    </time>
+                          title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">{{ campaign.end_at|date:"M d, Y H:i" }}</time> ({{ campaign.end_at|timesince }} ago)
                 {% else %}
+                    Ends in
                     <time datetime="{{ campaign.end_at|date:'c' }}"
-                          title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">
-                        <strong>Ends in</strong> {{ campaign.end_at|timeuntil }}
-                    </time>
+                          title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">{{ campaign.end_at|date:"M d, Y H:i" }}</time> (in {{ campaign.end_at|timeuntil }})
                 {% endif %}
             </div>
             <!-- Campaign start times -->
             <div>
                 {% if campaign.start_at > now %}
+                    Starts in
                     <time datetime="{{ campaign.start_at|date:'c' }}"
-                          title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">
-                        <strong>Starts in</strong> {{ campaign.start_at|timeuntil }}
-                    </time>
+                          title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">{{ campaign.start_at|date:"M d, Y H:i" }}</time> (in {{ campaign.start_at|timeuntil }})
                 {% else %}
+                    Started
                     <time datetime="{{ campaign.start_at|date:'c' }}"
-                          title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">
-                        <strong>Started</strong> {{ campaign.start_at|timesince }} ago
-                    </time>
+                          title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">{{ campaign.start_at|date:"M d, Y H:i" }}</time> ({{ campaign.start_at|timesince }} ago)
                 {% endif %}
             </div>
             <!-- Campaign duration -->
             <div>
+                Duration is
                 <time datetime="{{ campaign.duration_iso }}"
                       title="{{ campaign.start_at|date:'DATETIME_FORMAT' }} to {{ campaign.end_at|date:'DATETIME_FORMAT' }}">
-                    <strong>Duration</strong> {{ campaign.end_at|timeuntil:campaign.start_at }}
+                    {{ campaign.end_at|timeuntil:campaign.start_at }}
                 </time>
             </div>
             <!-- Buttons -->
             <div>
                 <!-- Campaign Detail URL -->
-                {% if campaign.details_url %}<a href="{{ campaign.details_url }}" rel="nofollow ugc">[details]</a>{% endif %}
+                {% if campaign.details_url %}<a href="{{ campaign.details_url }}">[details]</a>{% endif %}
                 <!-- Campaign Account Link URL -->
-                {% if campaign.account_link_url %}
-                    <a href="{{ campaign.account_link_url }}" rel="nofollow ugc">[connect]</a>
-                {% endif %}
+                {% if campaign.account_link_url %}<a href="{{ campaign.account_link_url }}">[connect]</a>{% endif %}
                 <!-- RSS Feeds -->
                 {% if campaign.game %}
                     <a href="{% url 'core:game_campaign_feed' campaign.game.twitch_id %}"
@@ -183,7 +182,6 @@
     {% else %}
         <!-- If no allowed channels are specified, link to the game's Twitch directory for channels with drops enabled -->
         <a href="{{ campaign.game.twitch_directory_url }}"
-           rel="nofollow ugc"
            title="Find streamers playing {{ campaign.game.display_name }} with drops enabled">
             Go to a participating live channel
         </a>

templates/twitch/campaign_list.html

@@ -21,7 +21,10 @@
 {% block content %}
     <main>
         <header>
-            <h1>Drop Campaigns</h1>
+            <h1>List of Twitch Drop Campaigns</h1>
+            <div>
+                <a href="{% url 'core:dashboard' %}">Dashboard</a> > Drops
+            </div>
             <!-- RSS Feeds -->
             <div>
                 <a href="{% url 'core:campaign_feed' %}"

templates/twitch/channel_detail.html

@@ -5,29 +5,37 @@
 {% block content %}
     <!-- Channel Title -->
     <h1>{{ channel.display_name }}</h1>
+    <!-- Add breadcrumbs -->
+    <div>
+        <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:channel_list' %}">Channels</a> > {{ channel.display_name }}
+    </div>
     {% if channel.display_name != channel.name %}
-        <p>
+        <div>
             Username: <code>{{ channel.name }}</code>
-        </p>
+        </div>
     {% endif %}
+    <!-- Channel Info -->
+    <div>Channel ID: {{ channel.twitch_id }}</div>
+    <div>
+        Published
+        <time datetime="{{ channel.added_at|date:'c' }}"
+              title="{{ channel.added_at|date:'DATETIME_FORMAT' }}">{{ channel.added_at|date:"M d, Y H:i" }}</time> ({{ channel.added_at|timesince }} ago)
+    </div>
+    <div>
+        Last updated
+        <time datetime="{{ channel.updated_at|date:'c' }}"
+              title="{{ channel.updated_at|date:'DATETIME_FORMAT' }}">{{ channel.updated_at|date:"M d, Y H:i" }}</time> ({{ channel.updated_at|timesince }} ago)
+    </div>
     <!-- Twitch Stream Embed -->
     <iframe src="https://player.twitch.tv/?channel={{ channel.name }}&parent={{ request.get_host }}&muted=false"
             height="480"
             width="100%"
             allowfullscreen
             style="max-width: 854px;
-                   border: none">
+                   border: none;
+                   margin-top: 16px;
+                   margin-bottom: 16px">
     </iframe>
-    <!-- Channel Info -->
-    <p>Channel ID: {{ channel.twitch_id }}</p>
-    <p>
-        Published:
-        <time datetime="{{ channel.added_at|date:'c' }}"
-              title="{{ channel.added_at|date:'DATETIME_FORMAT' }}">{{ channel.added_at|date:"M d, Y H:i" }}</time>
-        · Last updated:
-        <time datetime="{{ channel.updated_at|date:'c' }}"
-              title="{{ channel.updated_at|date:'DATETIME_FORMAT' }}">{{ channel.updated_at|date:"M d, Y H:i" }}</time>
-    </p>
     {% if active_campaigns %}
         <h5>Active Campaigns</h5>
         <table>

templates/twitch/channel_list.html

@@ -5,6 +5,9 @@
 {% endblock title %}
 {% block content %}
     <h1>Channels</h1>
+    <div>
+        <a href="{% url 'twitch:dashboard' %}">Twitch</a> > Channels
+    </div>
     <p>Browse all channels that can participate in drop campaigns</p>
     <form method="get" action="{% url 'twitch:channel_list' %}">
         <input type="text"

templates/twitch/dashboard.html

@@ -20,11 +20,8 @@
 {% endblock extra_head %}
 {% block content %}
     <main>
-        <h1>Active Twitch Drops Campaigns</h1>
+        <h1>List of all active Twitch drops.</h1>
         <p>
-            This page lists all currently active Twitch Drops campaigns
-            organized by game.
-            <br />
             Click on a campaign for more details about it and how to
             earn drops.
             <br />
@@ -108,7 +105,6 @@
                                                             {% for channel in campaign_data.allowed_channels|slice:":5" %}
                                                                 <li style="margin-bottom: 0.1rem;">
                                                                     <a href="https://twitch.tv/{{ channel.name }}"
-                                                                       rel="nofollow ugc"
                                                                        title="Watch {{ channel.display_name }} on Twitch">
                                                                         {{ channel.display_name }}</a><a href="{% url 'twitch:channel_detail' channel.twitch_id %}"
    title="View {{ channel.display_name }} details"
@@ -121,7 +117,6 @@
                                                                 {% if campaign.game.twitch_directory_url %}
                                                                     <li>
                                                                         <a href="{{ campaign.game.twitch_directory_url }}"
-                                                                           rel="nofollow ugc"
                                                                            title="Open Twitch category page for {{ campaign_data.campaign.game.display_name }} with Drops filter">
                                                                             Browse {{ campaign_data.campaign.game.display_name }} category
                                                                         </a>
@@ -139,7 +134,6 @@
                                                             {% if campaign_data.campaign.game.twitch_directory_url %}
                                                                 <li>
                                                                     <a href="{{ campaign_data.campaign.game.twitch_directory_url }}"
-                                                                       rel="nofollow ugc"
                                                                        title="Find streamers playing {{ campaign_data.campaign.game.display_name }} with drops enabled">
                                                                         Go to a participating live channel
                                                                     </a>
@@ -236,7 +230,6 @@
                                 {% if campaign.external_url %}
                                     <div style="margin-top: 0.75rem;">
                                         <a href="{{ campaign.external_url }}"
-                                           rel="nofollow ugc"
                                            style="display: inline-block;
                                                   padding: 0.5rem 1rem;
                                                   background-color: #9146ff;

templates/twitch/emote_gallery.html

@@ -5,6 +5,10 @@
 {% endblock title %}
 {% block content %}
   <h1>Emotes</h1>
+  <!-- Add breadcrumbs -->
+  <div>
+    <a href="{% url 'twitch:dashboard' %}">Twitch</a> > Emotes
+  </div>
   {% for emote in emotes %}
     <a href="{% url 'twitch:campaign_detail' emote.campaign.twitch_id %}"
        title="{{ emote.campaign.name }}"

templates/twitch/game_detail.html

@@ -33,28 +33,30 @@
                 {{ game.display_name }}
                 {% if game.display_name != game.name and game.name %}<small>({{ game.name }})</small>{% endif %}
             </h1>
+            <!-- Add breadcrumbs -->
+            <div>
+                <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:games_grid' %}">Games</a> > {{ game.display_name }}
+            </div>
             <!-- Game owner -->
             {% if owners %}
-                <small>
+                <div style="font-size: 0.9em;">
                     Owned by
                     {% for owner in owners %}
                         <a href="{% url 'twitch:organization_detail' owner.twitch_id %}">{{ owner.name }}</a>
-                        {% if not forloop.last %},{% endif %}
+                        {% if not forloop.last %}-{% endif %}
                     {% endfor %}
-                </small>
+                </div>
             {% endif %}
             <div>
-                Twitch ID: <a href="https://www.twitch.tv/directory/category/{{ game.slug|urlencode }}">{{ game.twitch_id }}</a>
-            </div>
-            <div>Twitch slug: {{ game.slug }}</div>
-            <small>
-                Published:
+                Published
                 <time datetime="{{ game.added_at|date:'c' }}"
-                      title="{{ game.added_at|date:'DATETIME_FORMAT' }}">{{ game.added_at|date:"M d, Y H:i" }}</time>
-                · Last updated:
+                      title="{{ game.added_at|date:'DATETIME_FORMAT' }}">{{ game.added_at|date:"M d, Y H:i" }}</time> ({{ game.added_at|timesince }} ago)
+            </div>
+            <div>
+                Last updated
                 <time datetime="{{ game.updated_at|date:'c' }}"
-                      title="{{ game.updated_at|date:'DATETIME_FORMAT' }}">{{ game.updated_at|date:"M d, Y H:i" }}</time>
-            </small>
+                      title="{{ game.updated_at|date:'DATETIME_FORMAT' }}">{{ game.updated_at|date:"M d, Y H:i" }}</time> ({{ game.updated_at|timesince }} ago)
+            </div>
             <!-- RSS Feeds -->
             <div>
                 <a href="{% url 'core:game_campaign_feed' game.twitch_id %}"

templates/twitch/games_grid.html

@@ -20,7 +20,11 @@
 {% block content %}
     <main>
         <header>
-            <h1 id="page-title">All Games</h1>
+            <h1>All Games</h1>
+            <!-- Add breadcrumbs -->
+            <div>
+                <a href="{% url 'twitch:dashboard' %}">Twitch</a> > Games
+            </div>
             <div>
                 <a href="{% url 'twitch:games_list' %}" title="View games as list">[list]</a>
                 <a href="{% url 'core:game_feed' %}" title="RSS feed for all games">[rss]</a>
@@ -40,8 +44,7 @@
                 <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
                     {% for organization, games in games_by_org.items %}
                         {% for item in games %}
-                            <article id="game-{{ item.game.twitch_id }}"
-                                     style="padding: 0.25rem;
+                            <article style="padding: 0.25rem;
                                             border-radius: 8px;
                                             flex: 1 1 160px;
                                             text-align: center">

templates/twitch/games_list.html

@@ -19,6 +19,10 @@
 {% block content %}
     <main>
         <h1>Games List</h1>
+        <!-- Add breadcrumbs -->
+        <div>
+            <a href="{% url 'twitch:dashboard' %}">Twitch</a> > Games
+        </div>
         <div>
             <a href="{% url 'twitch:games_grid' %}" title="View games as grid">[grid]</a>
             <a href="{% url 'core:game_feed' %}" title="RSS feed for all games">[rss]</a>

templates/twitch/org_list.html

@@ -4,6 +4,10 @@
 {% endblock title %}
 {% block content %}
     <h1>Organizations</h1>
+    <!-- Add breadcrumbs -->
+    <div>
+        <a href="{% url 'twitch:dashboard' %}">Twitch</a> > Organizations
+    </div>
     <div>
         <a href="{% url 'core:organization_feed' %}"
            title="RSS feed for all organizations">[rss]</a>

templates/twitch/organization_detail.html

@@ -22,14 +22,20 @@
 {% endblock extra_head %}
 {% block content %}
     <h1>{{ organization.name }}</h1>
-    <p>
-        Published:
+    <!-- Add breadcrumbs -->
+    <div>
+        <a href="{% url 'core:dashboard' %}">Dashboard</a> > <a href="{% url 'twitch:org_list' %}">Organizations</a> > {{ organization.name }}
+    </div>
+    <div>
+        Published
         <time datetime="{{ organization.added_at|date:'c' }}"
-              title="{{ organization.added_at|date:'DATETIME_FORMAT' }}">{{ organization.added_at|date:"M d, Y H:i" }}</time>
-        · Last updated:
+              title="{{ organization.added_at|date:'DATETIME_FORMAT' }}">{{ organization.added_at|date:"M d, Y H:i" }}</time> ({{ organization.added_at|timesince }} ago)
+    </div>
+    <div>
+        Last updated
         <time datetime="{{ organization.updated_at|date:'c' }}"
-              title="{{ organization.updated_at|date:'DATETIME_FORMAT' }}">{{ organization.updated_at|date:"M d, Y H:i" }}</time>
-    </p>
+              title="{{ organization.updated_at|date:'DATETIME_FORMAT' }}">{{ organization.updated_at|date:"M d, Y H:i" }}</time> ({{ organization.updated_at|timesince }} ago)
+    </div>
     <header>
         <h2>Games by {{ organization.name }}</h2>
     </header>

templates/twitch/reward_campaign_detail.html

@@ -19,150 +19,107 @@
           href="{% url 'core:reward_campaign_feed_discord' %}" />
 {% endblock extra_head %}
 {% block content %}
-    <!-- Campaign Title -->
-    {% if reward_campaign.brand %}
-        <h1 id="campaign-title">{{ reward_campaign.brand }}: {{ reward_campaign.name }}</h1>
-    {% else %}
-        <h1 id="campaign-title">{{ reward_campaign.name }}</h1>
-    {% endif %}
-    <!-- Back to list link -->
-    <p>
-        <a href="{% url 'twitch:reward_campaign_list' %}">← Back to Reward Campaigns</a>
-    </p>
-    <!-- Campaign image -->
-    {% if reward_campaign.image_best_url %}
-        {% picture reward_campaign.image_best_url alt=reward_campaign.name width=160 %}
-    {% endif %}
-    <!-- RSS Feeds -->
-    <div style="margin-bottom: 1rem;">
-        <a href="{% url 'core:reward_campaign_feed' %}"
-           style="margin-right: 1rem"
-           title="RSS feed for all reward campaigns">[rss]</a>
-        <a href="{% url 'core:reward_campaign_feed_atom' %}"
-           title="Atom feed for all reward campaigns">[atom]</a>
-        <a href="{% url 'core:reward_campaign_feed_discord' %}"
-           title="Discord feed for all reward campaigns">[discord]</a>
-        <a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
-    </div>
-    <!-- Campaign Summary -->
-    {% if reward_campaign.summary %}<p id="campaign-summary">{{ reward_campaign.summary|linebreaksbr }}</p>{% endif %}
-    <!-- Campaign Status -->
-    <h5>Status</h5>
-    <table>
-        <tbody>
-            <tr>
-                <td>
-                    <strong>Status:</strong>
-                </td>
-                <td>
-                    {% if is_active %}
-                        Active
-                    {% elif reward_campaign.starts_at > now %}
-                        Upcoming
-                    {% else %}
-                        Expired
-                    {% endif %}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <strong>Starts:</strong>
-                </td>
-                <td>
-                    <time datetime="{{ reward_campaign.starts_at|date:'c' }}"
-                          title="{{ reward_campaign.starts_at|date:'DATETIME_FORMAT' }}">
-                        {{ reward_campaign.starts_at|date:"M d, Y H:i" }}
-                    </time>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <strong>Ends:</strong>
-                </td>
-                <td>
-                    <time datetime="{{ reward_campaign.ends_at|date:'c' }}"
-                          title="{{ reward_campaign.ends_at|date:'DATETIME_FORMAT' }}">
-                        {{ reward_campaign.ends_at|date:"M d, Y H:i" }}
-                    </time>
-                </td>
-            </tr>
-            {% if reward_campaign.game %}
-                <tr>
-                    <td>
-                        <strong>Game:</strong>
-                    </td>
-                    <td>
-                        <a href="{% url 'twitch:game_detail' reward_campaign.game.twitch_id %}">{{ reward_campaign.game.display_name }}</a>
-                    </td>
-                </tr>
-            {% elif reward_campaign.is_sitewide %}
-                <tr>
-                    <td>
-                        <strong>Type:</strong>
-                    </td>
-                    <td>Site-wide reward campaign</td>
-                </tr>
+    <div style="display: flex; align-items: flex-start;">
+        <!-- Campaign image -->
+        <div style="margin-right: 16px;">
+            {% if reward_campaign.image_best_url %}
+                {% picture reward_campaign.image_best_url alt=reward_campaign.name width=160 %}
             {% endif %}
-        </tbody>
-    </table>
-    <!-- Instructions -->
-    {% if reward_campaign.instructions %}
-        <h5>Instructions</h5>
-        <p>{{ reward_campaign.instructions|linebreaksbr }}</p>
-    {% endif %}
-    <!-- Actions -->
-    {% if reward_campaign.external_url or reward_campaign.about_url %}
-        <p>
-            {% if reward_campaign.external_url %}
-                <a href="{{ reward_campaign.external_url }}" rel="nofollow ugc">Claim Reward →</a>
-            {% endif %}
-            {% if reward_campaign.about_url %}
-                <a href="{{ reward_campaign.about_url }}" rel="nofollow ugc">Learn More →</a>
-            {% endif %}
-        </p>
-    {% endif %}
-    <!-- Metadata -->
-    <h5>Campaign Information</h5>
-    <table>
-        <tbody>
+        </div>
+        <div style="display: flex; flex-direction: column;">
+            <!-- Campaign Title -->
             {% if reward_campaign.brand %}
-                <tr>
-                    <td>
-                        <strong>Brand:</strong>
-                    </td>
-                    <td>{{ reward_campaign.brand }}</td>
-                </tr>
+                <h1 id="campaign-title">{{ reward_campaign.brand }}: {{ reward_campaign.name }}</h1>
+            {% else %}
+                <h1 id="campaign-title">{{ reward_campaign.name }}</h1>
             {% endif %}
-            <tr>
-                <td>
-                    <strong>Twitch ID:</strong>
-                </td>
-                <td>
-                    <code>{{ reward_campaign.twitch_id }}</code>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <strong>Added to tracker:</strong>
-                </td>
-                <td>
-                    <time datetime="{{ reward_campaign.added_at|date:'c' }}"
-                          title="{{ reward_campaign.added_at|date:'DATETIME_FORMAT' }}">
-                        {{ reward_campaign.added_at|date:"M d, Y H:i" }}
-                    </time>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <strong>Last updated:</strong>
-                </td>
-                <td>
-                    <time datetime="{{ reward_campaign.updated_at|date:'c' }}"
-                          title="{{ reward_campaign.updated_at|date:'DATETIME_FORMAT' }}">
-                        {{ reward_campaign.updated_at|date:"M d, Y H:i" }}
-                    </time>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+            <!-- Game eligibility -->
+            <div>
+                Game eligibility:
+                {% if reward_campaign.game %}
+                    <a href="{% url 'twitch:game_detail' reward_campaign.game.twitch_id %}">{{ reward_campaign.game.display_name }}</a>
+                {% elif reward_campaign.is_sitewide %}
+                    Site-wide
+                {% else %}
+                    None
+                {% endif %}
+            </div>
+            <!-- Add breadcrumbs -->
+            <div>
+                <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:reward_campaign_list' %}">Reward Campaigns</a> > {{ reward_campaign.name }}
+            </div>
+            <!-- Campaign Summary -->
+            {% if reward_campaign.summary %}<p id="campaign-summary">{{ reward_campaign.summary|linebreaksbr }}</p>{% endif %}
+            <!-- Campaign Status -->
+            <div>
+                <strong>Status:</strong>
+                {% if is_active %}
+                    Active
+                {% elif reward_campaign.starts_at > now %}
+                    Upcoming
+                {% else %}
+                    Expired
+                {% endif %}
+            </div>
+            <div>Added at {{ reward_campaign.added_at|date:"M d, Y H:i" }} ({{ reward_campaign.added_at|timesince }} ago)</div>
+            <div>
+                Last updated at {{ reward_campaign.updated_at|date:"M d, Y H:i" }} ({{ reward_campaign.updated_at|timesince }} ago)
+            </div>
+            <!-- Reward Start Time -->
+            <div>
+                {% if reward_campaign.starts_at > now %}
+                    Starts
+                {% else %}
+                    Started at
+                {% endif %}
+                <time datetime="{{ reward_campaign.starts_at|date:'c' }}"
+                      title="{{ reward_campaign.starts_at|date:'DATETIME_FORMAT' }}">
+                    {{ reward_campaign.starts_at|date:"M d, Y H:i" }}
+                    {% if reward_campaign.starts_at > now %}
+                        (in {{ reward_campaign.starts_at|timeuntil }})
+                    {% else %}
+                        ({{ reward_campaign.starts_at|timesince }} ago)
+                    {% endif %}
+                </time>
+            </div>
+            <!-- Reward End Time -->
+            <div>
+                {% if reward_campaign.ends_at > now %}
+                    Ends
+                {% else %}
+                    Ended at
+                {% endif %}
+                <time datetime="{{ reward_campaign.ends_at|date:'c' }}"
+                      title="{{ reward_campaign.ends_at|date:'DATETIME_FORMAT' }}">
+                    {{ reward_campaign.ends_at|date:"M d, Y H:i" }}
+                    {% if reward_campaign.ends_at > now %}
+                        (in {{ reward_campaign.ends_at|timeuntil }})
+                    {% else %}
+                        ({{ reward_campaign.ends_at|timesince }} ago)
+                    {% endif %}
+                </time>
+            </div>
+            <div>
+                {% if reward_campaign.instructions %}{{ reward_campaign.instructions|linebreaksbr }}{% endif %}
+            </div>
+            <!-- RSS Feeds -->
+            <div style="margin-bottom: 1rem;">
+                <a href="{% url 'core:reward_campaign_feed' %}"
+                   title="RSS feed for all reward campaigns">[rss]</a>
+                <a href="{% url 'core:reward_campaign_feed_atom' %}"
+                   title="Atom feed for all reward campaigns">[atom]</a>
+                <a href="{% url 'core:reward_campaign_feed_discord' %}"
+                   title="Discord feed for all reward campaigns">[discord]</a>
+                <a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
+                {% if reward_campaign.external_url %}
+                    <a href="{{ reward_campaign.external_url }}"
+                       title="External URL for {{ reward_campaign.name }}">[external]</a>
+                {% endif %}
+                {% if reward_campaign.about_url %}
+                    <a href="{{ reward_campaign.about_url }}"
+                       title="About URL for {{ reward_campaign.name }}">[about]</a>
+                {% endif %}
+            </div>
+        </div>
+    </div>
 {% endblock content %}

templates/twitch/reward_campaign_list.html

@@ -18,7 +18,16 @@
           href="{% url 'core:reward_campaign_feed_discord' %}" />
 {% endblock extra_head %}
 {% block content %}
-    <h1>Reward Campaigns</h1>
+    <h1>List of Twitch Reward Campaigns</h1>
+    <!-- Add breadcrumbs -->
+    <div>
+        <a href="{% url 'twitch:dashboard' %}">Twitch</a> > Reward Campaigns
+    </div>
+    <p>This is an archive of old Twitch reward campaigns because we currently do not scrape them.</p>
+    <p>
+        Feel free to submit a pull request on <a href="https://github.com/TheLovinator1/ttvdrops">GitHub</a>
+        with a working implementation :-).
+    </p>
     <!-- RSS Feeds -->
     <div>
         <a href="{% url 'core:reward_campaign_feed' %}"
@@ -29,11 +38,6 @@
            title="Discord feed for all reward campaigns">[discord]</a>
         <a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
     </div>
-    <p>This is an archive of old Twitch reward campaigns because we do not monitor them.</p>
-    <p>
-        Feel free to submit a pull request on <a href="https://github.com/TheLovinator1/ttvdrops">GitHub</a>
-        with a working implementation :-).
-    </p>
     {% if reward_campaigns %}
         {% comment %}
         <h5>Active Reward Campaigns</h5>