From: Sven Hoehn <shoehn@ipfire.org>
Date: Thu, 4 Jan 2018 14:31:31 +0000 (+0100)
Subject: Bootstap migration talk.ipfire.org
X-Git-Url: http://git.ipfire.org/?p=people%2Fshoehn%2Fipfire.org.git;a=commitdiff_plain;h=1e5f513f74b57dd91fd5b16b97c338bbf32cc81b

Bootstap migration talk.ipfire.org
---

diff --git a/static/css/style.css b/static/css/style.css
index f9ef945..3be2ffc 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -6052,6 +6052,9 @@ button.navbar-toggler div {
   position: relative;
   top: -4px; }
 
+.btn-group {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25); }
+
 .btn {
   height: 36px;
   text-transform: uppercase;
@@ -6071,6 +6074,9 @@ button.navbar-toggler div {
   .btn-outline-secondary:hover {
     transition: background-color .25s ease-in-out; }
 
+.btn-light {
+  box-shadow: none; }
+
 .btn-xlg {
   height: 72px;
   margin: 0 36px;
@@ -6330,19 +6336,25 @@ section#fireinfo {
 section#appliances {
   padding-bottom: 48px; }
 
-.features-content {
+.features-content,
+.fixed-top + .blog-content {
   padding-top: 88px;
   margin-bottom: 40px; }
   @media (min-width: 992px) {
-    .features-content {
+    .features-content,
+    .fixed-top + .blog-content {
       padding-top: 161px; } }
-  .features-content .content {
+  .features-content .content,
+  .fixed-top + .blog-content .content {
     background: white;
     border-radius: 4px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
     padding: 40px 24px;
     position: relative; }
 
+.blog-content {
+  margin-bottom: 80px; }
+
 .divider {
   width: 128px;
   height: 4px;
diff --git a/static/scss/_buttons.scss b/static/scss/_buttons.scss
index f71a5d1..789dfb3 100644
--- a/static/scss/_buttons.scss
+++ b/static/scss/_buttons.scss
@@ -17,6 +17,10 @@ button.navbar-toggler div {
 	top: -4px;
 }
 
+.btn-group {
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
+}
+
 .btn {
 	height: 36px;
 	text-transform: uppercase;
@@ -39,6 +43,10 @@ button.navbar-toggler div {
 	}
 }
 
+.btn-light {
+	box-shadow: none;
+}
+
 .btn-xlg {
 	height: 72px;
 	margin: 0 36px;
diff --git a/static/scss/style.scss b/static/scss/style.scss
index cd5e508..38f0367 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -268,7 +268,8 @@ section#appliances {
 	padding-bottom: 48px;
 }
 
-.features-content {
+.features-content,
+.fixed-top + .blog-content {
 	padding-top: 88px;
 	margin-bottom: 40px;
 	@include media-breakpoint-up(lg) {
@@ -283,6 +284,10 @@ section#appliances {
 	}
 }
 
+.blog-content {
+	margin-bottom: 80px;
+}
+
 .divider {
 	width: 128px;
 	height: 4px;
diff --git a/templates/base.html b/templates/base.html
index ab3431c..61f0751 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -43,8 +43,7 @@
 						{% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
 							IP<strong>Fire</strong>
 						{% elif hostname in ("planet.ipfire.org", "planet.dev.ipfire.org") %}
-							{{ _("IPFire Planet") }} &nbsp;
-							<span class="text-muted">{{ _("The Blog of the IPFire Team") }}</span>
+							IP<strong>Fire</strong> Planet
 						{% elif hostname in ("wishlist.ipfire.org", "wishlist.dev.ipfire.org") %}
 							{{ _("IPFire Wishlist") }} &nbsp;
 							<span class="text-muted">{{ _("The IPFire Crowd-Funding Platform") }}</span>
diff --git a/templates/modules/menu.html b/templates/modules/menu.html
index 615996d..32673be 100644
--- a/templates/modules/menu.html
+++ b/templates/modules/menu.html
@@ -71,20 +71,15 @@
 		<li class="nav-item">
 			<a class="nav-link diagnosis" href="/diagnosis">{{ _("Diagnosis") }}</a>
 		</li>
+	{% elif hostname == "planet.ipfire.org" %}
+		<form class="form-inline" role="search" method="GET" action="/search">
+			<input type="text" class="form-control mx-2" name="q" placeholder="{{ _("Search") }}">
+			<button type="submit" class="btn btn-default m-2"><span class="fa fa-search"></span></button>
+		</form>
+	
 	{% end %}
 </ul>
 
-{% if hostname == "planet.ipfire.org" %}
-	<form class="navbar-form navbar-left" role="search" method="GET" action="/search">
-		<div class="form-group">
-			<input type="text" class="form-control" name="q" placeholder="{{ _("Search") }}">
-		</div>
-		<button type="submit" class="btn btn-default">
-			<span class="fa fa-search"></span>
-		</button>
-	</form>
-{% end %}
-
 {% if current_user %}
 	<ul class="nav navbar-nav navbar-right">
 		<li class="nav-item">
@@ -109,9 +104,8 @@
 {% elif not hostname in ("www.ipfire.org", "dev.ipfire.org")  %}
 	<ul class="nav navbar-nav navbar-right">
 		<li class="nav-item">
-		<a class="nav-link" href="http://www.ipfire.org">
-			<i class="glyphicon glyphicon-home glyphicon-white"></i> &nbsp;
-			www.ipfire.org
+		<a class="nav-link" href="//www.ipfire.org">
+			<i class="fa fa-home" aria-hidden="true"></i> &nbsp; www.ipfire.org
 		</a>
 		</li>
 	</ul>	
diff --git a/templates/modules/planet-entry.html b/templates/modules/planet-entry.html
index f946962..c0760a1 100644
--- a/templates/modules/planet-entry.html
+++ b/templates/modules/planet-entry.html
@@ -1,27 +1,36 @@
-<section id="{{ entry.slug }}" class="container content-section">
-	{% if entry.is_draft() %}
-		<div class="alert alert-info alert-dismissable">
-			<button type="button" class="close" data-dismiss="alert">&times;</button>
-			<strong>{{ _("Heads up!") }}</strong> {{ _("This post is a draft and has not been published, yet.") }}
+<div class="container blog-content">
+	<section id="{{ entry.slug }}" class="col-12 blog-entry">
+		{% if entry.is_draft() %}
+			<div class="alert alert-info alert-dismissable">
+				<button type="button" class="close" data-dismiss="alert">&times;</button>
+				<strong>{{ _("Heads up!") }}</strong> {{ _("This post is a draft and has not been published, yet.") }}
+			</div>
+		{% end %}
+		
+		<div class="row">
+			<div class="col-9">	
+				<h3 class="display-3 mb-3">
+					<a href="/post/{{ entry.slug }}">{{ entry.title }}</a>
+				</h3>
+			
+				{% raw entry.text %}
+			</div>
+		
+			{% if show_avatar %}
+			<div class="col-3 pt-4">
+				<div class="row mb-3 d-flex justify-content-end">
+					<small>
+						{{ _("by") }} <a href="/user/{{ entry.author.uid }}">{{ entry.author.name }}</a>,
+						{{ locale.format_date(entry.published, shorter=True) }}
+					</small>
+				</div>
+				<div class="row d-flex justify-content-end">
+					<a href="/user/{{ entry.author.uid }}">
+						<img class="rounded" src="{{ entry.author.gravatar_icon(128) }}" alt="{{ entry.author.name }}" />
+					</a>
+				</div>
+			</div>
+			{% end %}
 		</div>
-	{% end %}
-
-	{% if show_avatar %}
-		<a class="pull-right" href="/user/{{ entry.author.uid }}">
-			<img class="img-rounded img-padding" src="{{ entry.author.gravatar_icon(128) }}" alt="{{ entry.author.name }}" />
-		</a>
-	{% end %}
-
-	<h3>
-		<a href="/post/{{ entry.slug }}">{{ entry.title }}</a>
-
-		<br>
-
-		<small>
-			{{ _("by") }} <a href="/user/{{ entry.author.uid }}">{{ entry.author.name }}</a>,
-			{{ locale.format_date(entry.published, shorter=True) }}
-		</small>
-	</h3>
-
-	{% raw entry.text %}
-</section>
+	</section>
+</div>
\ No newline at end of file
diff --git a/templates/planet/hottest.html b/templates/planet/hottest.html
index ae0004e..6edacff 100644
--- a/templates/planet/hottest.html
+++ b/templates/planet/hottest.html
@@ -3,9 +3,8 @@
 {% block title %}{{ _("Hottest posts") }}{% end block %}
 
 {% block container %}
-	<div class="container page-header">
-		<h1>{{ _("The hottest posts of the last month") }}</h1>
-	</div>
+<div class="container features-content">
+	<h2 class="display-2 text-center">{{ _("The hottest posts of the last month") }}</h2>
 
 	<section class="container">
 		<dl>
@@ -23,4 +22,5 @@
 			{% end %}
 		</dl>
 	</section>
+</div>
 {% end block %}
diff --git a/templates/planet/index.html b/templates/planet/index.html
index 73892e2..dc3fb45 100644
--- a/templates/planet/index.html
+++ b/templates/planet/index.html
@@ -3,28 +3,28 @@
 {% block title %}{{ _("IPFire Planet") }}{% end block %}
 
 {% block container %}
+<div class="container">
+	<h2 class="display-2 text-center features-content">The Blog of the IPFire Team</h2>
+	
 	{% for entry in entries %}
 		{% module PlanetEntry(entry) %}
 	{% end %}
-
-	<div class="container">
-		<ul class="pager">
-			<li class="previous">
-				<a href="?offset={{ offset }}">&larr; {{ _("Older posts") }}</a>
-			</li>
-			{% if offset - limit %}
-				<li class="next">
-					<a href="?offset={{ offset - (2 * limit) }}">{{ _("Newer posts") }} &rarr;</a>
-				</li>
-			{% end %}
-		</ul>
+	
+	<div class="col-9 my-4">
+		<div class="row d-flex flex-row justify-content-between">
+			<a href="?offset={{ offset }}">&larr; {{ _("Older posts") }}</a>
+			<a href="?offset={{ offset - (2 * limit) }}">{{ _("Newer posts") }} &rarr;</a>
+		</div>
 	</div>
 
-	<div class="btn-toolbar text-center">
-		<a class="btn btn-default" href="/hottest">{{ _("Hottest posts") }}</a>
+	<div class="btn-toolbar mb-6">
+		<div class="btn-group">
+			<button type="button" class="btn btn-light"><a href="/hottest">{{ _("Hottest posts") }}</a></button>
 
-		{% for y in range(year, 2010, -1) %}
-			<a class="btn btn-default" href="/year/{{ y }}">{{ y }}</a>
-		{% end %}
+			{% for y in range(year, 2010, -1) %}
+				<button tyle="button" class="btn btn-light"><a href="/year/{{ y }}">{{ y }}</a></button>
+			{% end %}
+		</div>
 	</div>
+</div>
 {% end block %}
diff --git a/templates/planet/list.html b/templates/planet/list.html
index 56ff13a..082c229 100644
--- a/templates/planet/list.html
+++ b/templates/planet/list.html
@@ -3,17 +3,18 @@
 {% block title %}{{ _("IPFire Planet") }} - {% if author %}{{ _("%s's posts") % author.name }}{% elif year %}{{ _("Posts from %s") % year }}{% end %}{% end block %}
 
 {% block body %}
+<div class="container features-content">
 	<div class="row">
 		<div class="{% if author %}col-md-9{% else %}col-md-12{% end %}">
 			{% block bodyA %}
 				<div class="page-header">
-					<h1>
+					<h2 class="display-2">
 						{% if author %}
 							{{ _("%s's posts") % author.name }}
 						{% elif year %}
 							{{ _("Posts from %s") % year }}
 						{% end %}
-					</h1>
+					</h2>
 				</div>
 
 				{% if entries %}
@@ -53,4 +54,5 @@
 			</div>
 		{% end %}
 	</div>
+</div>
 {% end block %}
diff --git a/templates/planet/posting.html b/templates/planet/posting.html
index 6b01bd8..ede692e 100644
--- a/templates/planet/posting.html
+++ b/templates/planet/posting.html
@@ -5,13 +5,15 @@
 {% block container %}
 	{% module PlanetEntry(entry) %}
 
-	<hr class="clear">
-
-	<p class="text-muted ac">
-		{{ _("Posted:") }} {{ locale.format_date(entry.published, shorter=True, relative=False) }}
-
-		&bull;
-
-		{{ _("One view", "%(views)s views", entry.views) % { "views" : entry.views } }}
-	</p>
+	<div class="container mb-6">
+		<div class="col-12">
+			<small>
+				{{ _("Posted:") }} {{ locale.format_date(entry.published, shorter=True, relative=False) }}
+		
+				&bull;
+		
+				{{ _("One view", "%(views)s views", entry.views) % { "views" : entry.views } }}
+			</small>
+		</div>
+	</div>
 {% end block %}