dbl: Improve visual of the history on mobile

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/dbl/lists/domain.html b/src/templates/dbl/lists/domain.html
index 6bff7c8df81be1d87e04c84390855da859ea1ee4..13016d5199fc5f7859220eac2ad5e7c6b9056ef3 100644 (file)
--- a/src/templates/dbl/lists/domain.html
+++ b/src/templates/dbl/lists/domain.html
@@ -113,14 +113,30 @@
                                        {{ _("History") }}
                                </h5>
 
-                               <table class="table is-striped is-fullwidth">
+                               <table class="table is-fullwidth">
                                        <tbody>
                                                {% for event in events %}
                                                        <tr>
-                                                               {# Timestamp #}
-                                                               <td class="is-narrow">
-                                                                       {{ locale.format_date(event.timestamp, shorter=True) }}
-                                                               </td>
+                                                               {# Show the current status #}
+                                                               {% if event.allows %}
+                                                                       <td class="is-narrow has-text-centered">
+                                                                               <span class="tag is-success">
+                                                                                       {{ _("Allowed") }}
+                                                                               </span>
+                                                                       </td>
+                                                               {% elif event.blocks %}
+                                                                       <td class="is-narrow has-text-centered">
+                                                                               <span class="tag is-danger">
+                                                                                       {{ _("Blocked") }}
+                                                                               </span>
+                                                                       </td>
+                                                               {% else %}
+                                                                       <td class="is-narrow has-text-centered">
+                                                                               <span class="tag">
+                                                                                       {{ _("Not Listed") }}
+                                                                               </span>
+                                                                       </td>
+                                                               {% end %}
 
                                                                {# What happened? #}
                                                                <td>
@@ -138,22 +154,13 @@
                                                                                        {{ _("An exemption was removed by %s") % (event.by or event.source_name) }}
                                                                                {% end %}
                                                                        {% end %}
-                                                               </td>
 
-                                                               {# Show the current status #}
-                                                               {% if event.allows %}
-                                                                       <td class="is-narrow is-success has-text-centered">
-                                                                               {{ _("Allowed") }}
-                                                                       </td>
-                                                               {% elif event.blocks %}
-                                                                       <td class="is-narrow is-danger has-text-centered">
-                                                                               {{ _("Blocked") }}
-                                                                       </td>
-                                                               {% else %}
-                                                                       <td class="is-narrow has-text-centered">
-                                                                               {{ _("Not Listed") }}
-                                                                       </td>
-                                                               {% end %}
+                                                                       <br>
+
+                                                                       <small class="has-text-grey">
+                                                                               {{ locale.format_date(event.timestamp, shorter=True) }}
+                                                                       </small>
+                                                               </td>
                                                        </tr>
                                                {% end %}
                                        </tbody>