bootstrap4: port search sites

Signed-off-by: Jonatan Schlag <jonatan.schlag@ipfire.org>

diff --git a/src/templates/search-form.html b/src/templates/search-form.html
index e2b696ae99f54fdea023a36519eade5eb80c0031..f434e3f267614084a2e7682941e5438fbf15d674 100644 (file)
--- a/src/templates/search-form.html
+++ b/src/templates/search-form.html
@@ -3,37 +3,45 @@
 {% block title %}{{ _("Advanced search") }}{% end block %}
 
 {% block body %}
 {% block title %}{{ _("Advanced search") }}{% end block %}
 
 {% block body %}

-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/search">{{ _("Search") }}</a>
-               </li>
-       </ul>
-
-       {% if pattern %}
-               <div class="page-header">
-                       <h1>{{ _("No results for '%s'.") % pattern }}</h1>
-               </div>
-       {% else %}
-               <div class="page-header">
-                       <h2>{{ _("Search") }}</h2>
+       <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="/search">{{ _("Search") }}</a>
+                                       </li>
+                               </ol>
+                       </nav>

                </div>
                </div>

+       </div>

 
 

-               <p class="lead ac">
-                       {{ _("Type a search pattern into the box below and hit the button.") }}
-               </p>
-       {% end %}
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       {% if pattern %}
+                               <h2 style="word-wrap: break-word;">
+                                       {{ _("No results for '%s'.") % pattern }}
+                               </h2>
+                       {% else %}
+                               <h2 style="word-wrap: break-word;">
+                                       {{ _("Search") }}
+                               </h2>
+
+                               <p class="">
+                                       {{ _("Type a search pattern into the box below and hit the button.") }}
+                               </p>
+                       {% end %}
+               </div>
+       </div>

 
        <div class="row">
 
        <div class="row">

-               <div class="span4 offset4">
-                       <form class="well ac" method="GET" action="/search">
-                               <div class="input-append">
-                                       <input type="text" class="input-large typeahead-packages-autocomplete" name="q" placeholder="{{ _("Search") }}"
-                                               value="{{ pattern }}" autocomplete="off"><button type="submit" class="btn">{{ _("Go!") }}</button>
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <form class="form-inline" method="GET" action="/search">
+                               <div class="form-group">
+                                       <input type="text" class="form-control mr-2" id="q" name="q" placeholder="{{ _("Search") }}"
+                                               value="{{ pattern }}">

                                </div>
                                </div>

+                               <button type="submit" class="btn btn-primary">{{ _("Go!") }}</button>

                        </form>
                </div>
        </div>
                        </form>
                </div>
        </div>


@@ -41,48 +49,44 @@
        <hr>
 
        <div class="row">
        <hr>
 
        <div class="row">

-               <div class="span12">
-                       <div class="well">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">

                                <h4>{{ _("Search for packages by name or description") }}</h4>
                                <p>
                                        {{ _("If you type a package name to the search box you will get a link to the package.") }}
                                        {{ _("The search is performed in case insensitive mode.") }}
                                </p>
                                <h4>{{ _("Search for packages by name or description") }}</h4>
                                <p>
                                        {{ _("If you type a package name to the search box you will get a link to the package.") }}
                                        {{ _("The search is performed in case insensitive mode.") }}
                                </p>

-                       </div>

                </div>
        </div>
 
        <div class="row">
                </div>
        </div>
 
        <div class="row">

-               <div class="span6">
-                       <div class="well">
-                               <h4>{{ _("Search for UUIDs") }}</h4>
-                               <p>
-                                       {{ _("If you type a UUID to the search box, you will be directed to the job, build or package it belongs to.") }}
-                                       {{ _("This is a handy feature if you have a UUID and search for the corresponding package or build.") }}
-                               </p>
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <h4>{{ _("Search for UUIDs") }}</h4>
+                       <p>
+                               {{ _("If you type a UUID to the search box, you will be directed to the job, build or package it belongs to.") }}
+                               {{ _("This is a handy feature if you have a UUID and search for the corresponding package or build.") }}
+                       </p>

 
 

-                               <h5>{{ _("Examples") }}</h5>
-                               <ul>
-                                       <li>fde110ca-f7d9-4ae5-a6c4-1e465a05662a</li>
-                               </ul>
-                       </div>
+                       <h5>{{ _("Examples") }}</h5>
+                       <ul>
+                               <li>fde110ca-f7d9-4ae5-a6c4-1e465a05662a</li>
+                       </ul>

                </div>
                </div>

+       </div>

 
 

-               <div class="span6">
-                       <div class="well">
-                               <h4>{{ _("Search for files") }}</h4>
-                               <p>
-                                       {{ _("You may also search for file names.") }}
-                                       {{ _("You will get a list of packages that contain the file.") }}
-                                       {{ _("The search pattern must start with a slash that it will be recognized as a file.") }}
-                               </p>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <h4>{{ _("Search for files") }}</h4>
+                       <p>
+                               {{ _("You may also search for file names.") }}
+                               {{ _("You will get a list of packages that contain the file.") }}
+                               {{ _("The search pattern must start with a slash that it will be recognized as a file.") }}
+                       </p>

 
 

-                               <h5>{{ _("Examples") }}</h5>
-                               <ul>
-                                       <li>/bin/bash</li>
-                                       <li>/usr/bin/gcc</li>
-                               </ul>
-                       </div>
+                       <h5>{{ _("Examples") }}</h5>
+                       <ul>
+                               <li>/bin/bash</li>
+                               <li>/usr/bin/gcc</li>
+                       </ul>

                </div>
        </div>
 {% end block %}
                </div>
        </div>
 {% end block %}

diff --git a/src/templates/search-results.html b/src/templates/search-results.html
index 5c251afd65032cd7c8a8a1dda6722e76c78ba4e2..f93922b3f68f27ff2f1e853549d573544b5e2c0c 100644 (file)
--- a/src/templates/search-results.html
+++ b/src/templates/search-results.html
@@ -3,116 +3,124 @@
 {% block title %}{{ _("Search results for '%s'") % pattern }}{% end block %}
 
 {% block body %}
 {% block title %}{{ _("Search results for '%s'") % pattern }}{% end block %}
 
 {% block body %}

-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/search">{{ _("Search results") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/search?q={{ pattern }}">{{ pattern }}</a>
-               </li>
-       </ul>

 
 

-       <div class="page-header">
-               <h1>
-                       {{ _("Search results for '%s'") % pattern }}
-               </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"><a href="/search">{{ _("Search results") }}</a></li>
+                                       <li class="breadcrumb-item active">
+                                               <a href="/search?q={{ pattern }}">{{ pattern }}</a>
+                                       </li>
+                               </ol>
+                       </nav>
+               </div>

        </div>
 
        </div>
 

-       {% if not pkgs and not files and not users %}
-               <div class="alert alert-block">
-                       <h4 class="alert-heading">{{ _("No results found.") }}</h4>
-                       <a href="/search">
-                               {{ _("Visit the advanced search page to find about how to define your query.") }}
-                       </a>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <h2 style="word-wrap: break-word;">
+                               {{ _("Search results for '%s'") % pattern }}
+                       </h2>

                </div>
                </div>

-       {% end %}
+       </div>

 
        <div class="row">
 
        <div class="row">

-               <div class="span4 offset4">
-                       <form class="well ac" method="GET" action="/search">
-                               <div class="input-append">
-                                       <input type="text" class="input-large" name="q" placeholder="{{ _("Search") }}"
-                                               value="{{ pattern }}"><button type="submit" class="btn">{{ _("Go!") }}</button>
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-2">
+                       <form class="form-inline" method="GET" action="/search">
+                               <div class="form-group">
+                                       <input type="text" class="form-control mr-2" id="q" name="q" placeholder="{{ _("Search") }}"
+                                               value="{{ pattern }}">

                                </div>
                                </div>

+                               <button type="submit" class="btn btn-primary">{{ _("Go!") }}</button>

                        </form>
                </div>
        </div>
 
                        </form>
                </div>
        </div>
 

-       <hr>

 
        {% if pkgs %}
 
        {% if pkgs %}

-               <h2>
-                       {{ _("Packages") }} <small>({{ len(pkgs) }})</small>
-               </h2>
-
-               <table class="table table-striped table-hover">
-                       <tbody>
-                               {% for pkg in pkgs %}
-                                       <tr>
-                                               <td>
-                                                       <a href="/package/{{ pkg.name }}">
-                                                               {{ pkg.name }}
-                                                       </a>
-                                               </td>
-                                               <td>{{ pkg.summary }}</td>
-                                       </tr>
-                               {% end %}
-                       </tbody>
-               </table>
+               <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;">
+                                       {{ _("Packages") }} <small>({{ len(pkgs) }})</small>
+                               </h3>
+                               <div class="table-responsive mb-2">
+                                       <table class="table table-striped table-hover">
+                                               <tbody>
+                                                       {% for pkg in pkgs %}
+                                                               <tr>
+                                                                       <td>
+                                                                               <a href="/package/{{ pkg.name }}">
+                                                                                       {{ pkg.name }}
+                                                                               </a>
+                                                                       </td>
+                                                                       <td>{{ pkg.summary }}</td>
+                                                               </tr>
+                                                       {% end %}
+                                               </tbody>
+                                       </table>
+                               </div>
+                       </div>
+               </div>

        {% end %}
 
        {% if files %}
        {% end %}
 
        {% if files %}

-               <h2>
-                       {{ _("Files") }} <small>({{ len(files) }})</small>
-               </h2>
-
-               <p>
-                       {{ _("%s was found in the following package.", "%s was found in the following packages.", len(files)) % pattern }}
-               </p>
-
-               <table class="table table-striped table-hover">
-                       <tbody>
-                               {% for pkg, file in files %}
-                                       <tr>
-                                               <td>
-                                                       <a href="/package/{{ pkg.uuid }}">{{ pkg.friendly_name }}</a>
-                                               </td>
-                                               <td>
-                                                       <pre>{{ format_filemode(file.type, file.mode) }} {{ file.user }}:{{ file.group }} {% if file.size %}{{ format_size(file.size) }}{% else %}-{% end %} {{ file.name }}</pre>
-                                               </td>
-                                       </tr>
-                               {% end %}
-                       </tbody>
-               </table>
+               <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;">
+                                               {{ _("Files") }} <small>({{ len(files) }})</small>
+                               </h3>
+                               <p>
+                                       {{ _("%s was found in the following package.", "%s was found in the following packages.", len(files)) % pattern }}
+                               </p>
+                               <div class="table-responsive mb-2">
+                                       <table class="table table-striped table-hover">
+                                               <tbody>
+                                                       {% for pkg, file in files %}
+                                                               <tr>
+                                                                       <td>
+                                                                               <a href="/package/{{ pkg.uuid }}">{{ pkg.friendly_name }}</a>
+                                                                       </td>
+                                                                       <td>
+                                                                               <pre>{{ format_filemode(file.type, file.mode) }} {{ file.user }}:{{ file.group }} {% if file.size %}{{ format_size(file.size) }}{% else %}-{% end %} {{ file.name }}</pre>
+                                                                       </td>
+                                                               </tr>
+                                                       {% end %}
+                                               </tbody>
+                                       </table>
+                               </div>
+                       </div>
+               </div>

        {% end %}
 
        {% if users %}
        {% end %}
 
        {% if users %}

-               <h2>
-                       {{ _("Users") }} <small>({{ len(users) }})</small>
-               </h2>
-
-               <table class="table table-striped table-hover">
-                       <tbody>
-                               {% for user in users %}
-                                       <tr>
-                                               <td>
-                                                       <a href="/user/{{ user.name }}">{{ user.realname }}
-                                                               {% if not user.name == user.realname %}
-                                                                       ({{ user.name }})
-                                                               {% end %}
-                                                       </a>
-                                               </td>
-                                               <td>
-                                                       &nbsp;
-                                               </td>
-                                       </tr>
-                               {% end %}
-                       </tbody>
-               </table>
+               <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;">
+                                       {{ _("Users") }} <small>({{ len(users) }})</small>
+                               </h3>
+                               <div class="table-responsive mb-2">
+                                       <table class="table table-striped table-hover">
+                                               <tbody>
+                                                       {% for user in users %}
+                                                               <tr>
+                                                                       <td>
+                                                                               <a href="/user/{{ user.name }}">{{ user.realname }}
+                                                                                       {% if not user.name == user.realname %}
+                                                                                               ({{ user.name }})
+                                                                                       {% end %}
+                                                                               </a>
+                                                                       </td>
+                                                                       <td>
+                                                                               &nbsp;
+                                                                       </td>
+                                                               </tr>
+                                                       {% end %}
+                                               </tbody>
+                                       </table>
+                               </div>
+                       </div>
+               </div>

        {% end %}
 {% end block %}
        {% end %}
 {% end block %}