Bootstrap 4 migration: downloads.dev.ipfire.org

diff --git a/static/css/style.css b/static/css/style.css
index 68f1a09092f111916192bf9b221ccaa7de96b590..44255d28f3a377b46fd8da498431de5a71e55672 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1248,6 +1248,123 @@ mark,
   .offset-xl-11 {
     margin-left: 91.6666666667%; } }
 
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 8px; }
+  .table th,
+  .table td {
+    padding: 0.75rem;
+    vertical-align: top;
+    border-top: 1px solid #eceeef; }
+  .table thead th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #eceeef; }
+  .table tbody + tbody {
+    border-top: 2px solid #eceeef; }
+  .table .table {
+    background-color: #eceff1; }
+
+.table-sm th,
+.table-sm td {
+  padding: 0.3rem; }
+
+.table-bordered {
+  border: 1px solid #eceeef; }
+  .table-bordered th,
+  .table-bordered td {
+    border: 1px solid #eceeef; }
+  .table-bordered thead th,
+  .table-bordered thead td {
+    border-bottom-width: 2px; }
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(0, 0, 0, 0.05); }
+
+.table-hover tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.075); }
+
+.table-active,
+.table-active > th,
+.table-active > td {
+  background-color: rgba(0, 0, 0, 0.075); }
+
+.table-hover .table-active:hover {
+  background-color: rgba(0, 0, 0, 0.075); }
+  .table-hover .table-active:hover > td,
+  .table-hover .table-active:hover > th {
+    background-color: rgba(0, 0, 0, 0.075); }
+
+.table-success,
+.table-success > th,
+.table-success > td {
+  background-color: #dff0d8; }
+
+.table-hover .table-success:hover {
+  background-color: #d0e9c6; }
+  .table-hover .table-success:hover > td,
+  .table-hover .table-success:hover > th {
+    background-color: #d0e9c6; }
+
+.table-info,
+.table-info > th,
+.table-info > td {
+  background-color: #d9edf7; }
+
+.table-hover .table-info:hover {
+  background-color: #c4e3f3; }
+  .table-hover .table-info:hover > td,
+  .table-hover .table-info:hover > th {
+    background-color: #c4e3f3; }
+
+.table-warning,
+.table-warning > th,
+.table-warning > td {
+  background-color: #fcf8e3; }
+
+.table-hover .table-warning:hover {
+  background-color: #faf2cc; }
+  .table-hover .table-warning:hover > td,
+  .table-hover .table-warning:hover > th {
+    background-color: #faf2cc; }
+
+.table-danger,
+.table-danger > th,
+.table-danger > td {
+  background-color: #f2dede; }
+
+.table-hover .table-danger:hover {
+  background-color: #ebcccc; }
+  .table-hover .table-danger:hover > td,
+  .table-hover .table-danger:hover > th {
+    background-color: #ebcccc; }
+
+.thead-inverse th {
+  color: #fff;
+  background-color: #292b2c; }
+
+.thead-default th {
+  color: #464a4c;
+  background-color: #eceeef; }
+
+.table-inverse {
+  color: #fff;
+  background-color: #292b2c; }
+  .table-inverse th,
+  .table-inverse td,
+  .table-inverse thead th {
+    border-color: #eceff1; }
+  .table-inverse.table-bordered {
+    border: 0; }
+
+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -ms-overflow-style: -ms-autohiding-scrollbar; }
+  .table-responsive.table-bordered {
+    border: 0; }
+
 .form-control {
   display: block;
   width: 100%;

diff --git a/static/scss/style.scss b/static/scss/style.scss
index 34a68875021bd745b0bf1ca22336243509dda837..cd5e508189ab2fa5bdcc37632e584df2ec7866c3 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -20,7 +20,7 @@
 //@import "bootstrap-4.0.0-alpha.6/scss/images";
 // @import "bootstrap-4.0.0-alpha.6/scss/code";
 @import "bootstrap-4.0.0-alpha.6/scss/grid";
-// @import "bootstrap-4.0.0-alpha.6/scss/tables";
+@import "bootstrap-4.0.0-alpha.6/scss/tables";
 @import "bootstrap-4.0.0-alpha.6/scss/forms";
 @import "bootstrap-4.0.0-alpha.6/scss/buttons";
 

diff --git a/templates/downloads-index.html b/templates/downloads-index.html
index c93851c812cb29ec5f1ce84c3195410fb7c60c2f..f1bb8899c717a4b1885b9e335ba5b165366097a9 100644 (file)
--- a/templates/downloads-index.html
+++ b/templates/downloads-index.html
@@ -3,56 +3,61 @@
 {% block title %}{{ _("Download Center") }}{% end block %}
 
 {% block body %}
-       <div class="page-header">
-               <h1>{{ _("IPFire Download Center") }}</h1>
-       </div>
+<div class="container">
+       <section class="features-content col-12">
+               <h2 class="display-2 text-center">{{ _("IPFire Download Center") }}</h2>
+               
+               <div class="row">
+                       <div class="col-md-12">
+                               <img class="pull-right" src="{{ static_url("images/box_ipfire.png") }}" alt="{{ _("CD-Box") }}">
 
-       <div class="row">
-               <div class="col-lg-12 col-md-12">
-                       <img class="pull-right" src="{{ static_url("images/box_ipfire.png") }}" alt="{{ _("CD-Box") }}">
-
-                       {% if lang == "de" %}
-                               <p>
-                                       Willkommen in der Downloadsektion des IPFire-Projekts.
-                                       Hier findest du alle bisher veröffentlichten Releases zum Download..
-                               </p>
-                       {% else %}
-                               <p>
-                                       Welcome to the downloads section of the IPFire project.
-                                       You will find all published releases of IPFire for download.
-                               </p>
-                       {% end %}
+                               {% if lang == "de" %}
+                                       <p>
+                                               Willkommen in der Downloadsektion des IPFire-Projekts.
+                                               Hier findest du alle bisher veröffentlichten Releases zum Download..
+                                       </p>
+                               {% else %}
+                                       <p>
+                                               Welcome to the downloads section of the IPFire project.
+                                               You will find all published releases of IPFire for download.
+                                       </p>
+                               {% end %}
+                       </div>
                </div>
-       </div>
-
-       <hr>
-
-       <h3>{{ _("Available releases") }}</h3>
-
-       <table class="table table-striped table-hover">
-               <thead>
-                       <tr>
-                               <th>{{ _("Release") }}</th>
-                               <th>{{ _("Release type") }}</th>
-                               <th>{{ _("Release date") }}</th>
-                       </tr>
-               </thead>
-               <tbody>
-                       {% for release in releases %}
-                               <tr>
-                                       <td>
-                                               <a href="/release/{{ release.sname }}">{{ release.name }}</a>
-                                       </td>
-                                       <td>
-                                               {% if release.stable %}
-                                                       <span class="label label-success">{{ _("Stable") }}</span>
-                                               {% else %}
-                                                       <span class="label label-warning">{{ _("Development") }}</span>
+               
+               <div class="row">
+                       <div class="col">
+                               <h4>{{ _("Available releases") }}</h4>
+                               
+                               <table class="table table-striped table-hover">
+                                       <thead>
+                                               <tr>
+                                                       <th>{{ _("Release") }}</th>
+                                                       <th>{{ _("Release type") }}</th>
+                                                       <th>{{ _("Release date") }}</th>
+                                               </tr>
+                                       </thead>
+                                       <tbody>
+                                               {% for release in releases %}
+                                                       <tr>
+                                                               <td>
+                                                                       <a href="/release/{{ release.sname }}">{{ release.name }}</a>
+                                                               </td>
+                                                               <td>
+                                                                       {% if release.stable %}
+                                                                               <span class="label label-success">{{ _("Stable") }}</span>
+                                                                       {% else %}
+                                                                               <span class="label label-warning">{{ _("Development") }}</span>
+                                                                       {% end %}
+                                                               </td>
+                                                               <td>{{ locale.format_date(release.date, shorter=True) }}</td>
+                                                       </tr>
                                                {% end %}
-                                       </td>
-                                       <td>{{ locale.format_date(release.date, shorter=True) }}</td>
-                               </tr>
-                       {% end %}
-               </tbody>
-       </table>
+                                       </tbody>
+                               </table>
+                       </div>
+               </div>
+       </section>
+</div>
+
 {% end block %}