[charts] Clean up how they're displayed

vrobbler/templates/charts/chart_detail.html

@@ -0,0 +1,45 @@
+{% extends "base_list.html" %}
+
+{% block title %}{{ media_label }}{% if year %} - {{ year }}{% endif %}{% endblock %}
+
+{% block head_extra %}
+<style>
+    .container { margin-bottom: 100px; }
+</style>
+{% endblock %}
+
+{% block lists %}
+<div class="row">
+    <div class="col-12">
+        <h2>{{ media_emoji }} {{ media_label }}</h2>
+    </div>
+</div>
+
+<div class="row mb-3">
+    <div class="col-12">
+        <div class="btn-group" role="group">
+            <a href="{% url 'charts:chart-detail' media_type %}" class="btn btn-outline-secondary{% if not year or year == today.year and not month and not week and not day %} active{% endif %}">All</a>
+            {% for cy in chart_years %}
+            <a href="{% url 'charts:chart-detail' media_type %}?date={{ cy }}" class="btn btn-outline-secondary{% if year == cy and not month and not week %} active{% endif %}">{{ cy }}</a>
+            {% endfor %}
+        </div>
+        <a href="{% url 'charts:charts-home' %}" class="btn btn-outline-primary btn-sm ms-2">&laquo; All charts</a>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-md-8 col-lg-6">
+        <ul class="list-group">
+            {% for chart in page_charts %}
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span class="me-2"><strong>#{{ chart.rank }}</strong></span>
+                <a href="{{ chart.media_obj.get_absolute_url }}">{{ chart.media_obj }}</a>
+                <span class="badge bg-primary rounded-pill">{{ chart.count }}</span>
+            </li>
+            {% empty %}
+            <li class="list-group-item">No chart data for this period.</li>
+            {% endfor %}
+        </ul>
+    </div>
+</div>
+{% endblock %}