jobs: Use level for the queue

This works on mobile without breaking the layout.

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

diff --git a/src/templates/jobs/macros.html b/src/templates/jobs/macros.html
index 8e8974977d355257f60d50c1073d3905696dae3b..935b9c6870ffcfe9fe12f293c496bb255ae1088e 100644 (file)
--- a/src/templates/jobs/macros.html
+++ b/src/templates/jobs/macros.html
@@ -185,37 +185,49 @@
                {% for job in jobs %}
                        <a class="panel-block is-block {% if job.is_running() %}is-active{% endif %}"
                                        href="/builds/{{ job.build.uuid }}">
-                               <span class="icon-text">
-                                       {% if job.is_running() %}
-                                               <span class="icon">
-                                                       <i class="fa-solid fa-gear fa-spin" aria-hidden="true"></i>
-                                               </span>
-                                       {% elif job.is_queued() %}
-                                               <span class="icon">
-                                                       <i class="fa-solid fa-clock" aria-hidden="true"></i>
-                                               </span>
-                                       {% elif job.has_failed() %}
-                                               <span class="icon">
-                                                       <i class="fa-solid fa-xmark has-text-danger" aria-hidden="true"></i>
-                                               </span>
-                                       {% elif job.is_aborted() %}
-                                               <span class="icon">
-                                                       <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-                                               </span>
-                                       {% elif job.has_finished() %}
-                                               <span class="icon">
-                                                       <i class="fa-solid fa-check has-text-success" aria-hidden="true"></i>
-                                               </span>
-                                       {% endif %}
+                               <span class="level">
+                                       <span class="level-left">
+                                               <span class="level-item">
+                                                       <span class="icon-text">
+                                                               {% if job.is_running() %}
+                                                                       <span class="icon">
+                                                                               <i class="fa-solid fa-gear fa-spin" aria-hidden="true"></i>
+                                                                       </span>
+                                                               {% elif job.is_queued() %}
+                                                                       <span class="icon">
+                                                                               <i class="fa-solid fa-clock" aria-hidden="true"></i>
+                                                                       </span>
+                                                               {% elif job.has_failed() %}
+                                                                       <span class="icon">
+                                                                               <i class="fa-solid fa-xmark has-text-danger" aria-hidden="true"></i>
+                                                                       </span>
+                                                               {% elif job.is_aborted() %}
+                                                                       <span class="icon">
+                                                                               <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+                                                                       </span>
+                                                               {% elif job.has_finished() %}
+                                                                       <span class="icon">
+                                                                               <i class="fa-solid fa-check has-text-success" aria-hidden="true"></i>
+                                                                       </span>
+                                                               {% endif %}
 
-                                       <span>{{ job }}</span>
-                               </span>
+                                                               <span>
+                                                                       {{ job }}
+                                                               </span>
+                                                       </span>
+                                               </span>
+                                       </span>
 
-                               {% if job.has_finished() %}
-                                       <span class="tag is-pulled-right">
-                                               {{ job.duration | format_time }}
+                                       <span class="level-right">
+                                               {% if job.has_finished() %}
+                                                       <span class="level-item">
+                                                               <span class="tag is-pulled-right">
+                                                                       {{ job.duration | format_time }}
+                                                               </span>
+                                                       </span>
+                                               {% endif %}
                                        </span>
-                               {% endif %}
+                               </span>
                        </a>
 
                {# Show a message if there were no jobs #}