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 2ee5845ffa3446e48102f4d9da41f8cf954e7192..af9afa1ad4f4a35f16dc2d903b7a7c0a96d35b32 100644 (file)
--- 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 %}