From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 9 May 2023 16:23:11 +0000 (+0000)
Subject: search: Refactor page with bulma
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1f359a497d41d9382006b8b22565ae28c78e0538;p=pbs.git

search: Refactor page with bulma

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

diff --git a/src/templates/search.html b/src/templates/search.html
index 2ee5845f..af9afa1a 100644
--- a/src/templates/search.html
+++ b/src/templates/search.html
@@ -2,105 +2,119 @@
 
 {% block title %}{{ _("Search") }}{% if q %} - {{ q }}{% end %}{% end block %}
 
-{% 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> {{ _("Search") }}
-			</li>
-		</ul>
-	</nav>
+{% block body %}
+	<section class="section">
+		<div class="container">
+			<nav class="breadcrumb" aria-label="breadcrumbs">
+				<ul>
+					<li class="is-active">
+						<a href="#" aria-current="page">{{ _("Search") }}</a>
+					</li>
+				</ul>
+			</nav>
 
-	{# Did we find anything? #}
-	{% set nothing_found = q and not packages and not files and not users %}
+			{# Did we find anything? #}
+			{% set nothing_found = q and not packages and not files and not users %}
 
-	<div class="grid-x grid-padding-x">
-		<div class="cell large-6 float-center">
-			{% if nothing_found %}
-				<div class="small warning callout">
-					{{ _("We could not find anything for '%s'") % q }}
-				</div>
-			{% end %}
-
-			<form method="GET" action="/search">
-				<div class="input-group">
-					<input type="text" class="input-group-field"
-						name="q" {% if q %}value="{{ q }}"{% end %}
-						placeholder="{{ _("Search") }}">
+			<div class="columns is-centered">
+				<div class="column is-6">
+					{% if nothing_found %}
+						<div class="notification is-warning">
+							{{ _("We could not find anything for '%s'") % q }}
+						</div>
+					{% end %}
 
-					<div class="input-group-button">
-						<button type="submit" class="primary button">
-							{{ _("Go!") }}
-						</button>
-					</div>
+					<form method="GET" action="/search">
+						<div class="field has-addons">
+							<div class="control is-expanded">
+								<input class="input" type="text" name="q"
+									{% if q %}value="{{ q }}"{% end %}
+									placeholder="{{ _("Search...") }}">
+							</div>
+							<div class="control">
+								<button type="submit" class="button is-primary">
+									{{ _("Search!") }}
+								</button>
+							</div>
+						</div>
+					</form>
 				</div>
-			</form>
+			</div>
 		</div>
-	</div>
+	</section>
 
 	{# Packages #}
 	{% if packages %}
-		<h4>
-			{{ _("Packages") }} <span class="badge">{{ len(packages) }}</span>
-		</h4>
+		<section class="section">
+			<div class="container">
+				<h4 class="title is-4">
+					{{ _("Packages") }} <span class="tag">{{ len(packages) }}</span>
+				</h4>
 
-		<table>
-			<tbody>
-				{% for package in packages %}
-					<tr>
-						<th scope="row">
-							<a href="/packages/{{ package.name }}">{{ package.name }}</a>
-						</th>
-						<td>
-							{{ package.summary }}
-						</td>
-					</tr>
-				{% end %}
-			</tbody>
-		</table>
+				<table class="table is-fullwidth">
+					<tbody>
+						{% for package in packages %}
+							<tr>
+								<th scope="row">
+									<a href="/packages/{{ package.name }}">{{ package.name }}</a>
+								</th>
+								<td>
+									{{ package.summary }}
+								</td>
+							</tr>
+						{% end %}
+					</tbody>
+				</table>
+			</div>
+		</section>
 	{% end %}
 
 	{# Files #}
 	{% if files %}
-		<h4>
-			{{ _("Files") }} <span class="badge">{{ len(files) }}</span>
-		</h4>
+		<section class="section">
+			<div class="container">
+				<h4 class="title is-4">
+					{{ _("Files") }} <span class="tag">{{ len(files) }}</span>
+				</h4>
 
-		<table>
-			<tbody>
-				{% for file in files %}
-					<tr>
-						<th scope="row">
-							<a href="/packages/{{ file.uuid }}">{{ file.name }}</a>
-						</th>
-						<td>
-							{{ file }}
-						</td>
-					</tr>
-				{% end %}
-			</tbody>
-		</table>
+				<table class="table is-fullwidth">
+					<tbody>
+						{% for file in files %}
+							<tr>
+								<th scope="row">
+									<a href="/packages/{{ file.uuid }}">{{ file.name }}</a>
+								</th>
+								<td>
+									{{ file }}
+								</td>
+							</tr>
+						{% end %}
+					</tbody>
+				</table>
+			</div>
+		</section>
 	{% end %}
 
 	{# Users #}
 	{% if users %}
-		<h4>
-			{{ _("Users") }} <span class="badge">{{ len(users) }}</span>
-		</h4>
+		<section class="section">
+			<div class="container">
+				<h4 class="title is-4">
+					{{ _("Users") }} <span class="tag">{{ len(users) }}</span>
+				</h4>
 
-		<table>
-			<tbody>
-				{% for user in users %}
-					<tr>
-						<th scope="row">
-							<a href="/users/{{ user.name }}">{{ user }}</a>
-						</th>
-					</tr>
-				{% end %}
-			</tbody>
-		</table>
+				<table class="table is-fullwidth">
+					<tbody>
+						{% for user in users %}
+							<tr>
+								<th scope="row">
+									<a href="/users/{{ user.name }}">{{ user }}</a>
+								</th>
+							</tr>
+						{% end %}
+					</tbody>
+				</table>
+			</div>
+		</section>
 	{% end %}
 {% end block %}