From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 19 Oct 2022 17:30:34 +0000 (+0000)
Subject: packages: Refactor the detail page
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f6ab5df0d4dbea26040c5152ff0ddd7c4b4dbd05;p=pbs.git

packages: Refactor the detail page

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

diff --git a/src/templates/modules/packages-files-table.html b/src/templates/modules/packages-files-table.html
index 7157ad43..76085f82 100644
--- a/src/templates/modules/packages-files-table.html
+++ b/src/templates/modules/packages-files-table.html
@@ -1,33 +1,43 @@
 {% import stat %}
 
-<table class="hover stacked">
+<table class="table is-striped is-hoverable is-fullwidth">
 	<tbody>
 		{% for file in filelist %}
+			{% set mode  = stat.filemode(file.mode) %}
+			{% set owner = "%6s:%-6s" % (file.uname, file.gname) %}
+			{% set size  = "%6s" % ("-" if file.size is None else format_size(file.size)) %}
+
 			<tr>
-				<td>
-					{% set mode  = stat.filemode(file.mode) %}
-					{% set owner = "%6s:%-6s" % (file.uname, file.gname) %}
-					{% set size  = "%6s" % ("-" if file.size is None else format_size(file.size)) %}
+				<td class="is-family-monospace has-text-right">
+					{{ mode }}
+				</td>
 
-					<pre>{{ mode }} {{ owner }} {{ size }} {{ file.path }}</pre>
+				<td class="is-family-monospace has-text-center">
+					{{ owner }}
 				</td>
 
-				<td>
-					<ul class="simple menu align-right">
+				<td class="is-family-monospace has-text-right">
+					{{ size }}
+				</td>
+
+				<td class="is-family-monospace">
+					{{ file.path }}
+
+					<div class="buttons are-small is-pulled-right">
 						{% if file.is_viewable() %}
-							<li>
-								<a class="btn btn-light" href="/package/{{ pkg.uuid }}/view{{ file.path }}">
+							<a class="button is-primary" href="/packages/{{ pkg.uuid }}/view{{ file.path }}">
+								<span class="icon is-small">
 									<i class="fa-solid fa-magnifying-glass" title="{{ _("View File") }}"></i>
-								</a>
-							</li>
+								</span>
+							</a>
 						{% end %}
 
 						{% if file.is_downloadable() %}
-							<li>
-								<a href="/package/{{ pkg.uuid }}/download{{ file.path }}">
+							<a class="button is-dark" href="/packages/{{ pkg.uuid }}/download{{ file.path }}">
+								<span class="icon is-small">
 									<i class="fa-solid fa-download" title="{{ _("Download" ) }}"></i>
-								</a>
-							</li>
+								</span>
+							</a>
 						{% end %}
 					</ul>
 				</td>
diff --git a/src/templates/packages/modules/dependencies.html b/src/templates/packages/modules/dependencies.html
index 0bfe347b..1ccdaef6 100644
--- a/src/templates/packages/modules/dependencies.html
+++ b/src/templates/packages/modules/dependencies.html
@@ -1,21 +1,19 @@
-<ul class="tabs" data-tabs id="dependencies">
-	{% for i, dep in enumerate((dep for dep in deps if deps[dep])) %}
-		<li class="tabs-title {% if i == 0 %}is-active{% end %}">
-			<a href="#{{ dep.lower() }}" {% if i == 0 %}aria-selected="true"{% end %}>
-				{{ dep }}
-			</a>
-		</li>
-	{% end %}
-</ul>
+<p class="title is-5">{{ _("Dependencies") }}</p>
+
+<div class="columns is-multiline">
+	{% for dep in deps %}
+		{% if deps[dep] %}
+			<div class="column is-half">
+				<p class="title is-6">{{ dep }}</p>
 
-<div class="tabs-content" data-tabs-content="dependencies">
-	{% for i, dep in enumerate((dep for dep in deps if deps[dep])) %}
-		<div class="tabs-panel {% if i == 0 %}is-active{% end %}" id="{{ dep.lower() }}">
-			<ul class="no-bullet">
-				{% for line in deps[dep] %}
-					<li>{{ line }}</li>
-				{% end %}
-			</ul>
-		</div>
+				<ul>
+					{% for line in deps[dep] %}
+						<li>
+							<span class="is-family-monospace">{{ line }}</span>
+						</li>
+					{% end %}
+				</ul>
+			</div>
+		{% end %}
 	{% end %}
 </div>
diff --git a/src/templates/packages/show.html b/src/templates/packages/show.html
index c937907c..03286e8a 100644
--- a/src/templates/packages/show.html
+++ b/src/templates/packages/show.html
@@ -1,51 +1,66 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Package") }} - {{ package }}{% end block %}
+{% block title %}{{ _("Packages") }} - {{ package }}{% end block %}
 
 {% block container %}
-	<nav aria-label="{{ _("You are here:") }}" role="navigation">
-		<ul class="breadcrumbs">
-			<li>
-				<a href="/">{{ _("Home") }}</a>
-			</li>
+	<nav class="breadcrumb" aria-label="breadcrumbs">
+		<ul>
 			<li>
 				<a href="/packages">{{ _("Packages") }}</a>
 			</li>
 			<li>
-				<span class="show-for-sr">{{ _("Current") }}: </span> {{ package }}
+				<a href="/packages/{{ package.name }}">{{ package.name }}</a>
+			</li>
+			<li class="is-active">
+				<a href="#" aria-current="page">{{ package.evr }}</a>
 			</li>
 		</ul>
 	</nav>
 
 	{% module PackageInfo(package, show_evr=True) %}
 
-	<a class="expanded primary button" href="{{ package.download_url }}">
-		{{ _("Download Package") }} ({{ format_size(package.size) }})
-	</a>
-
-	{% for build in package.builds %}
-		<a class="expanded secondary button" href="/builds/{{ build.uuid }}">
-			{{ _("Build from %s") % locale.format_date(build.created_at) }}
+	<div class="buttons">
+		{# Download Button #}
+		<a class="button is-primary" href="{{ package.download_url }}">
+			{{ _("Download Package") }} ({{ format_size(package.size) }})
 		</a>
-	{% end %}
+
+		{# Dropdown with all Builds #}
+		{% if package.builds %}
+			<div class="dropdown">
+				<div class="dropdown-trigger">
+					<button class="button is-light" aria-haspopup="true" aria-controls="dropdown-builds">
+						<span>{{ _("Builds") }}</span>
+						<span class="icon is-small">
+							<i class="fas fa-angle-down" aria-hidden="true"></i>
+						</span>
+					</button>
+				</div>
+				<div class="dropdown-menu" id="dropdown-builds" role="menu">
+					<div class="dropdown-content">
+						{% for build in package.builds %}
+							<a href="/builds/{{ build.uuid }}" class="dropdown-item">
+								{{ _("Build from %s") % locale.format_date(build.created_at) }}
+							</a>
+						{% end %}
+					</div>
+				</div>
+			</div>
+		{% end %}
+	</div>
 
 	{# XXX add reference to commit for source packages #}
 
-	{% module PackageDependencies(package) %}
+	<div class="block">
+		{% module PackageDependencies(package) %}
+	</div>
 
+	{# Filelist #}
 	{% if package.files %}
-		<div class="row">
-			<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-				<h3 style="word-wrap: break-word;">
-					{{ _("Filelist") }}
-				</h3>
-			</div>
-		</div>
+		<div class="block">
+			<h5 class="title is-5">{{ _("Filelist") }}</h5>
 
-		<div class="row">
-			<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-				{% module PackageFilesTable(package, package.files) %}
-			</div>
+			{% module PackageFilesTable(package, package.files) %}
 		</div>
 	{% end %}
 {% end block %}