From: Michael Tremer <michael.tremer@ipfire.org>
Date: Mon, 20 Jun 2022 18:23:41 +0000 (+0000)
Subject: web: Refactor packages page
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9438779e26e4b406fd4721898a5d646de4a7a563;p=pbs.git

web: Refactor packages page

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

diff --git a/src/templates/packages/index.html b/src/templates/packages/index.html
index f8df3c38..f3cce89f 100644
--- a/src/templates/packages/index.html
+++ b/src/templates/packages/index.html
@@ -1,72 +1,56 @@
 {% extends "../base.html" %}
 
-{% block title %}{{ _("Package list") }}{% end block %}
+{% block title %}{{ _("Packages") }}{% end block %}
 
-{% block body %}
+{% block container %}
+	<nav aria-label="{{ _("You are here:") }}" role="navigation">
+		<ul class="breadcrumbs">
+			<li>
+				<a href="/">{{ _("Home") }}</a>
+			</li>
+			<li>
+				<span class="show-for-sr">{{ _("Current") }}: </span> {{ _("Packages") }}
+			</li>
+		</ul>
+	</nav>
 
-	<div class="row">
-		<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-			<nav aria-label="breadcrumb" role="navigation">
-				<ol class="breadcrumb">
-					<li class="breadcrumb-item"><a href="/">{{ _("Home") }}</a></li>
-					<li class="breadcrumb-item active"><a href="/packages">{{ _("Packages") }}</a></li>
-				</ol>
-			</nav>
-		</div>
-	</div>
+	<h1>{{ _("Packages") }}</h1>
 
-	<div class="row">
-			<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-				<h1>{{ _("Package list") }}</h1>
-				<p>
-					{{ _("This is an alphabetically ordered list of all packages in the distribution.") }}
-					{{ _("Click on a link to see further information about the package.") }}
-				</p>
-		</div>
-	</div>
+	<nav aria-label="{{ _("Pagination") }}">
+		<ul class="pagination text-center">
+			{% for letter in sorted(packages.keys()) %}
+				<li>
+					<a href="#{{ letter }}" aria-label="{{ letter.upper() }}">
+						{{ letter.upper() }}
+					</a>
+				</li>
+			{% end %}
+		</ul>
+	</nav>
 
-	<div class="row">
-		<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-			<div class="table-responsive">
-				<hr>
-					<ul class="pagination">
-						{% for letter in sorted(packages.keys()) %}
-							<li class="page-item">
-								<a class="page-link" href="#{{ letter }}">{{ letter.upper() }}</a>
-							</li>
-						{% end %}
-					</ul>
-				<hr>
-			</div>
-		</div>
-	</div>
+	<table class="hover">
+		<tbody>
+			{% for letter, pkgs in sorted(packages.items()) %}
+				<tr>
+					<th scope="row" colspan="2">
+						<a name="{{ letter }}"></a>
+						{{ letter.upper() }}
+					</th>
+				</tr>
 
-	<div class="row">
-		<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-			<div class="table-responsive">
-				<table class="table table-striped table-hover">
-					<tbody>
-						{% for letter, pkgs in sorted(packages.items()) %}
-							<tr>
-								<td colspan="2">
-									<a name="{{ letter }}"></a>
-									<h2>{{ letter.upper() }}</h2>
-								</td>
-							</tr>
-							{% for pkg in pkgs %}
-								<tr>
-									<td>
-										<a href="/package/{{ pkg.name }}">{{ pkg.name }}</a>
-									</td>
-									<td>
-										{{ pkg.summary }}
-									</td>
-								</tr>
-							{% end %}
-						{% end %}
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
+				{% for package in pkgs %}
+					<tr>
+						<td>
+							<a href="/packages/{{ package.name }}">
+								{{ package.name }}
+							</a>
+						</td>
+						<td>
+							{{ package.summary }}
+						</td>
+					</tr>
+				{% end %}
+			{% end %}
+		</tbody>
+	</table>
 {% end block %}