Add better placeholders, styles

shynet/dashboard/static/dashboard/css/global.css

@@ -3,11 +3,11 @@
 }
 
 .table {
-    overflow-x: scroll;
+    overflow-x: auto;
 }
 
 .limited-height {
-    overflow: scroll;
+    overflow: auto;
     max-height: 400px;
 }
 

shynet/dashboard/templates/dashboard/includes/session_list.html

@@ -12,7 +12,8 @@
         {% for session in object_list %}
         <tr>
             <td>
-                <a href="{% url 'dashboard:service_session' object.pk session.pk %}" class="font-medium text-purple-700">
+                <a href="{% url 'dashboard:service_session' object.pk session.pk %}"
+                    class="font-medium text-purple-700">
                     {{session.start_time|date:"M j Y, g:i a"|capfirst}}
                     {% if session.is_currently_active %}
                     <span class="badge ~positive">Online</span>
@@ -30,6 +31,10 @@
             <td class="rf">{{session.duration|naturaldelta}}</td>
             <td class="rf">{{session.hit_set.count|intcomma}}</td>
         </tr>
+        {% empty %}
+        <tr>
+            <td><span class="text-gray-600">No data yet...</span></td>
+        </tr>
         {% endfor %}
     </tbody>
 </table>

shynet/dashboard/templates/dashboard/pages/service.html

@@ -103,6 +103,10 @@
                     <td>{{location.location|default:"Unknown"|urldisplay}}</td>
                     <td class="rf">{{location.count|intcomma}}</td>
                 </tr>
+                {% empty %}
+                <tr>
+                    <td><span class="text-gray-600">No data yet...</span></td>
+                </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -121,6 +125,10 @@
                     <td>{{referrer.referrer|default:"Direct"|urldisplay}}</td>
                     <td class="rf">{{referrer.count|intcomma}}</td>
                 </tr>
+                {% empty %}
+                <tr>
+                    <td><span class="text-gray-600">No data yet...</span></td>
+                </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -139,6 +147,10 @@
                     <td>{{country.country|flag_emoji}} {{country.country|country_name}}</td>
                     <td class="rf">{{country.count|intcomma}}</td>
                 </tr>
+                {% empty %}
+                <tr>
+                    <td><span class="text-gray-600">No data yet...</span></td>
+                </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -157,6 +169,10 @@
                     <td>{{os.os|default:"Unknown"}}</td>
                     <td class="rf">{{os.count|intcomma}}</td>
                 </tr>
+                {% empty %}
+                <tr>
+                    <td><span class="text-gray-600">No data yet...</span></td>
+                </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -175,6 +191,10 @@
                     <td>{{browser.browser|default:"Unknown"}}</td>
                     <td class="rf">{{browser.count|intcomma}}</td>
                 </tr>
+                {% empty %}
+                <tr>
+                    <td><span class="text-gray-600">No data yet...</span></td>
+                </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -193,6 +213,10 @@
                     <td>{{device_type.device_type|default:"Unknown"|title}}</td>
                     <td class="rf">{{device_type.count|intcomma}}</td>
                 </tr>
+                {% empty %}
+                <tr>
+                    <td><span class="text-gray-600">No data yet...</span></td>
+                </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -201,7 +225,7 @@
 <div class="card ~neutral !low limited-height py-2">
     {% include 'dashboard/includes/session_list.html' %}
     <hr class="sep h-8">
-    <a href="{% url 'dashboard:service_session_list' service.uuid %}" class="button ~neutral w-auto">View more sessions
+    <a href="{% url 'dashboard:service_session_list' service.uuid %}" class="button ~neutral w-auto mb-2">View more sessions
         &rarr;</a>
 </div>
 {% endblock %}

tests/pixel.html

@@ -7,10 +7,8 @@
 </head>
 
 <body>
-    <noscript>
+    <noscript><img src="//localhost:8000/ingress/211410e6-b401-4fe8-8740-7926368590be/pixel.gif"></noscript>
-        <img src="http://localhost:8000/ingress/fc4008d3-f2fa-4500-9968-d96719e3819c/pixel.gif">
+    <script src="//localhost:8000/ingress/211410e6-b401-4fe8-8740-7926368590be/script.js"></script>
-    </noscript>
-    <script src="http://localhost:8000/ingress/fc4008d3-f2fa-4500-9968-d96719e3819c/identifier/script.js"></script>
 </body>
 
 </html>