[templates] Fix chart loading

vrobbler/templates/scrobbles/_top_charts.html

@@ -1,173 +1,176 @@
 {% load static %}
-<h2>Top Artist</h2>
-<ul class="nav nav-tabs" id="artistTab" role="tablist">
-    {% for key, name in chart_keys.items %}
-    <li class="nav-item" role="presentation">
-        <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
-                id="artist-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#artist-{{key}}"
-                type="button" role="tab" aria-controls="home" aria-selected="true">{{name}}</button>
-    </li>
-    {% endfor %}
-</ul>
 
-<div class="tab-content" id="artistTabContent" class="maloja-chart">
-    {% for key, artists in current_artist_charts.items %}
-    <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="artist-{{key}}" role="tabpanel" aria-labelledby="artist-{{key}}-tab">
-        <div style="display:block">
-            <div style="float:left;">
-                <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
-                    <div class="caption">#1 {{artists.0.name}}</div>
-                    {% if artists.0 %}
-                    {% if artists.0.thumbnail %}
-                    <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{{artists.0.thumbnail_medium.url}}" width="300px"></a>
-                    {% else %}
-                    <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{% static "images/not-found.jpg" %}" width="300px"></a>
-                    {% endif %}
-                    {% endif %}
-                </div>
-            </div>
-            <div style="float:left; width:300px;">
-                <div style="display:flex; flex-wrap: wrap;">
-                    <div class="image-wrapper" class="image-wrapper" style="width:50%">
-                        <div class="caption-medium">#2 {{artists.1.name}}</div>
-                        {% if artists.1 %}
-                        {% if artists.1.thumbnail %}
-                        <a href="{{artists.1.get_absolute_url}}"><img lt="{{artists.1.name}}" src="{{artists.1.thumbnail_medium.url}}" width="150px"></a>
-                        {% else %}
-                        <a href="{{artists.1.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:50%">
-                        <div class="caption-medium">#3 {{artists.2.name}}</div>
-                        {% if artists.2 %}
-                        {% if artists.2.thumbnail %}
-                        <a href="{{artists.2.get_absolute_url}}"><img src="{{artists.2.thumbnail_medium.url}}" width="150px"></a>
-                        {% else %}
-                        <a href="{{artists.2.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:50%">
-                        <div class="caption-medium">#4 {{artists.3.name}}</div>
-                        {% if artists.3 %}
-                        {% if artists.3.thumbnail %}
-                        <a href="{{artists.3.get_absolute_url}}"><img src="{{artists.3.thumbnail_medium.url}}" width="150px"></a>
-                        {% else %}
-                        <a href="{{artists.3.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:50%">
-                        <div class="caption-medium">#5 {{artists.4.name}}</div>
-                        {% if artists.4 %}
-                        {% if artists.4.thumbnail %}
-                        <a href="{{artists.4.get_absolute_url}}"><img src="{{artists.4.thumbnail_medium.url}}" width="150px"></a>
+
+<div class="row">
+    <h2>Top Artist</h2>
+    <ul class="nav nav-tabs" id="artistTab" role="tablist">
+        {% for key, name in chart_keys.items %}
+        <li class="nav-item" role="presentation">
+            <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
+                    id="artist-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#artist-{{key}}"
+                    type="button" role="tab" aria-controls="home" aria-selected="true">{{name}}</button>
+        </li>
+        {% endfor %}
+    </ul>
+
+    <div class="tab-content" id="artistTabContent" class="maloja-chart">
+        {% for key, artists in current_artist_charts.items %}
+        <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="artist-{{key}}" role="tabpanel" aria-labelledby="artist-{{key}}-tab">
+            <div style="display:block">
+                <div style="float:left;">
+                    <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
+                        <div class="caption">#1 {{artists.0.name}}</div>
+                        {% if artists.0 %}
+                        {% if artists.0.thumbnail %}
+                        <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{{artists.0.thumbnail_medium.url}}" width="300px"></a>
                         {% else %}
-                        <a href="{{artists.4.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                        <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{% static "images/not-found.jpg" %}" width="300px"></a>
                         {% endif %}
                         {% endif %}
                     </div>
                 </div>
-            </div>
-            <div style="float:left; width:300px;">
-                <div style="display:flex; flex-wrap: wrap;">
-                    <div class="image-wrapper" class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#6 {{artists.5.name}}</div>
-                        {% if artists.5 %}
-                        {% if artists.5.thumbnail %}
-                        <a href="{{artists.5.get_absolute_url}}"><img src="{{artists.5.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.5.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#7 {{artists.6.name}}</div>
-                        {% if artists.6 %}
-                        {% if artists.6.thumbnail %}
-                        <a href="{{artists.6.get_absolute_url}}"><img src="{{artists.6.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.6.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#8 {{artists.7.name}}</div>
-                        {% if artists.7 %}
-                        {% if artists.7.thumbnail %}
-                        <a href="{{artists.7.get_absolute_url}}"><img src="{{artists.7.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.7.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#9 {{artists.8.name}}</div>
-                        {% if artists.8 %}
-                        {% if artists.8.thumbnail %}
-                        <a href="{{artists.8.get_absolute_url}}"><img src="{{artists.8.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.8.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#10 {{artists.9.name}}</div>
-                        {% if artists.9 %}
-                        {% if artists.9.thumbnail %}
-                        <a href="{{artists.9.get_absolute_url}}"><img src="{{artists.9.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.9.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
+                <div style="float:left; width:300px;">
+                    <div style="display:flex; flex-wrap: wrap;">
+                        <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                            <div class="caption-medium">#2 {{artists.1.name}}</div>
+                            {% if artists.1 %}
+                            {% if artists.1.thumbnail %}
+                            <a href="{{artists.1.get_absolute_url}}"><img lt="{{artists.1.name}}" src="{{artists.1.thumbnail_medium.url}}" width="150px"></a>
+                            {% else %}
+                            <a href="{{artists.1.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                            <div class="caption-medium">#3 {{artists.2.name}}</div>
+                            {% if artists.2 %}
+                            {% if artists.2.thumbnail %}
+                            <a href="{{artists.2.get_absolute_url}}"><img src="{{artists.2.thumbnail_medium.url}}" width="150px"></a>
+                            {% else %}
+                            <a href="{{artists.2.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                            <div class="caption-medium">#4 {{artists.3.name}}</div>
+                            {% if artists.3 %}
+                            {% if artists.3.thumbnail %}
+                            <a href="{{artists.3.get_absolute_url}}"><img src="{{artists.3.thumbnail_medium.url}}" width="150px"></a>
+                            {% else %}
+                            <a href="{{artists.3.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                            <div class="caption-medium">#5 {{artists.4.name}}</div>
+                            {% if artists.4 %}
+                            {% if artists.4.thumbnail %}
+                            <a href="{{artists.4.get_absolute_url}}"><img src="{{artists.4.thumbnail_medium.url}}" width="150px"></a>
+                            {% else %}
+                            <a href="{{artists.4.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
                     </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#11 {{artists.10.name}}</div>
-                        {% if artists.10 %}
-                        {% if artists.10.thumbnail %}
-                        <a href="{{artists.10.get_absolute_url}}"><img src="{{artists.10.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.10.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#12 {{artists.11.name}}</div>
-                        {% if artists.11 %}
-                        {% if artists.11.thumbnail %}
-                        <a href="{{artists.11.get_absolute_url}}"><img src="{{artists.11.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.11.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#13 {{artists.12.name}}</div>
-                        {% if artists.12 %}
-                        {% if artists.12.thumbnail %}
-                        <a href="{{artists.12.get_absolute_url}}"><img src="{{artists.12.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.12.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
-                    </div>
-                    <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                        <div class="caption-small">#14 {{artists.13.name}}</div>
-                        {% if artists.13 %}
-                        {% if artists.13.thumbnail %}
-                        <a href="{{artists.13.get_absolute_url}}"><img src="{{artists.13.thumbnail_medium.url}}" width="100px"></a>
-                        {% else %}
-                        <a href="{{artists.13.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                        {% endif %}
-                        {% endif %}
+                </div>
+                <div style="float:left; width:300px;">
+                    <div style="display:flex; flex-wrap: wrap;">
+                        <div class="image-wrapper" class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#6 {{artists.5.name}}</div>
+                            {% if artists.5 %}
+                            {% if artists.5.thumbnail %}
+                            <a href="{{artists.5.get_absolute_url}}"><img src="{{artists.5.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.5.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#7 {{artists.6.name}}</div>
+                            {% if artists.6 %}
+                            {% if artists.6.thumbnail %}
+                            <a href="{{artists.6.get_absolute_url}}"><img src="{{artists.6.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.6.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#8 {{artists.7.name}}</div>
+                            {% if artists.7 %}
+                            {% if artists.7.thumbnail %}
+                            <a href="{{artists.7.get_absolute_url}}"><img src="{{artists.7.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.7.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#9 {{artists.8.name}}</div>
+                            {% if artists.8 %}
+                            {% if artists.8.thumbnail %}
+                            <a href="{{artists.8.get_absolute_url}}"><img src="{{artists.8.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.8.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#10 {{artists.9.name}}</div>
+                            {% if artists.9 %}
+                            {% if artists.9.thumbnail %}
+                            <a href="{{artists.9.get_absolute_url}}"><img src="{{artists.9.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.9.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#11 {{artists.10.name}}</div>
+                            {% if artists.10 %}
+                            {% if artists.10.thumbnail %}
+                            <a href="{{artists.10.get_absolute_url}}"><img src="{{artists.10.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.10.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#12 {{artists.11.name}}</div>
+                            {% if artists.11 %}
+                            {% if artists.11.thumbnail %}
+                            <a href="{{artists.11.get_absolute_url}}"><img src="{{artists.11.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.11.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#13 {{artists.12.name}}</div>
+                            {% if artists.12 %}
+                            {% if artists.12.thumbnail %}
+                            <a href="{{artists.12.get_absolute_url}}"><img src="{{artists.12.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.12.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                            <div class="caption-small">#14 {{artists.13.name}}</div>
+                            {% if artists.13 %}
+                            {% if artists.13.thumbnail %}
+                            <a href="{{artists.13.get_absolute_url}}"><img src="{{artists.13.thumbnail_medium.url}}" width="100px"></a>
+                            {% else %}
+                            <a href="{{artists.13.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                            {% endif %}
+                            {% endif %}
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
+        {% endfor %}
     </div>
-    {% endfor %}
-</div>
 </div>
 
 <div class="row">

vrobbler/templates/scrobbles/chart_index.html

@@ -2,12 +2,54 @@
 
 {% block title %}{{name}}{% endblock %}
 
-{% block lists %}
+{% block head_extra  %}
+<style>
+ .container { margin-bottom:100px; }
+ h2 { padding-top:20px; }
+ .image-wrapper {
+    contain: content;
+ }
+ .image-wrapper :hover {
+     background:rgba(0,0,0,0.3);
+ }
+ .caption {
+     position: fixed;
+     top: 5px;
+     left: 5px;
+     padding: 3px;
+     font-size: 90%;
+     color:white;
+     background:rgba(0,0,0,0.4);
+ }
 
-<div "calss="row>
-    {% include "scrobbles/_top_charts.html" %}
-</div>
+ .caption-medium {
+     position: fixed;
+     top: 5px;
+     left: 5px;
+     padding: 3px;
+     font-size: 75%;
+     color:white;
+     background:rgba(0,0,0,0.4);
+
+ }
+ .caption-small {
+     position: fixed;
+     top: 5px;
+     left: 5px;
+     padding: 3px;
+     font-size: 60%;
+     color:white;
+     background:rgba(0,0,0,0.4);
+
+ }
+</style>
+{% endblock %}
+
+{% block lists %}
 
+{% if chart_type == "maloja" %}
+{% include "scrobbles/_top_charts.html" %}
+{% else %}
 <div class="row">
     {% if artist_charts %}
     <div class="col-md">
@@ -151,5 +193,6 @@
     </div>
     {% endif %}
 </div>
+{% endif %}
 
 {% endblock %}