From 8122fb2ac41b264b453c1ffc80f325ea3bb2e764 Mon Sep 17 00:00:00 2001
From: Jonatan Schlag <jonatan.schlag@ipfire.org>
Date: Sun, 12 Nov 2017 14:48:21 +0100
Subject: [PATCH] bootstrap4: port package index to bootstrap4

Signed-off-by: Jonatan Schlag <jonatan.schlag@ipfire.org>
---
 src/templates/packages/index.html | 95 ++++++++++++++++---------------
 1 file changed, 50 insertions(+), 45 deletions(-)

diff --git a/src/templates/packages/index.html b/src/templates/packages/index.html
index 6b8f583d..f8df3c38 100644
--- a/src/templates/packages/index.html
+++ b/src/templates/packages/index.html
@@ -3,65 +3,70 @@
 {% block title %}{{ _("Package list") }}{% end block %}
 
 {% block body %}
-	<ul class="breadcrumb">
-		<li>
-			<a href="/">{{ _("Home") }}</a>
-			<span class="divider">/</span>
-		</li>
-		<li class="active">
-			<a href="/packages">{{ _("Packages") }}</a>
-		</li>
-	</ul>
 
-	<div class="page-header">
-		<h1>{{ _("Package list") }}</h1>
+	<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>
 
-	<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 class="row">
-		<div class="span12">
-			<hr>
+			<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>
 
-			<div class="btn-toolbar ac">
-				<div class="btn-group">
-					{% for letter in sorted(packages.keys()) %}
-						<a class="btn" href="#{{ letter }}">{{ letter.upper() }}</a>
-					{% end %}
-				</div>
+	<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>
-
-			<hr>
 		</div>
 	</div>
 
 	<div class="row">
-		<div class="span12">
-			<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 %}
+		<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>
-									<a href="/package/{{ pkg.name }}">{{ pkg.name }}</a>
-								</td>
-								<td>
-									{{ pkg.summary }}
+								<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 %}
-					{% end %}
-				</tbody>
-			</table>
+					</tbody>
+				</table>
+			</div>
 		</div>
 	</div>
 {% end block %}
-- 
2.47.2