From: Sven Hoehn <shoehn@ipfire.org>
Date: Wed, 6 Dec 2017 16:18:53 +0000 (+0100)
Subject: Bootstrap 4 migration: downloads.dev.ipfire.org
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=7f32b1623a61edae26ffd5f7709cf99a57f1199b;p=ipfire.org.git

Bootstrap 4 migration: downloads.dev.ipfire.org
---

diff --git a/static/css/style.css b/static/css/style.css
index 3f3942f3..110f0c41 100644
--- 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 1eb92eb8..f1b981bb 100644
--- 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 c93851c8..f1bb8899 100644
--- 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 %}