From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 11 Feb 2025 17:38:29 +0000 (+0000)
Subject: jobs: Use level for the queue
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5684e72c135e5cca1ec864512fe71125d5943fc4;p=pbs.git

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 8e897497..935b9c68 100644
--- 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 #}