Bootstap migration talk.ipfire.org

diff --git a/static/css/style.css b/static/css/style.css
index f9ef945841c1c9fb8cd20e1f78b3c823d902a809..3be2ffc9ecf520d535cd697d0b734e353382c3b0 100644 (file)
--- 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 f71a5d1c445fb9168f323e4655d05e552463ef1e..789dfb3f7f400ee9bf32d8b0a076e5e2569b2da0 100644 (file)
--- 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 cd5e508189ab2fa5bdcc37632e584df2ec7866c3..38f0367a4df7cf4d18e77447a0a34949b5e42a18 100644 (file)
--- 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 ab3431c520ca509cd046c15c40111c3b8337a51e..61f075106bb28f97ff69f2b2c8db0682ff3bd241 100644 (file)
--- 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 615996d8862992019d38b896e076d99a3834fbf0..32673be1240ba76232a6bad945eef2d237ad2905 100644 (file)
--- 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 f946962e06ce046cf859b314d479ed31491daefe..c0760a1e063039111e46f5e49019166d45d021b2 100644 (file)
--- 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 ae0004ecc5d951a64dbccc6b9d754154fc2bf0ce..6edacffd3bad57b2d71d4195d82102d5baa416be 100644 (file)
--- 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 73892e27b451ebbbf599863efc93ba6e81ea6fe4..dc3fb453c49564130ae7568fe48fe5d57ff3f271 100644 (file)
--- 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 56ff13aa575d98e5741663eb20f7d2d1b68cbd16..082c22964820fa694f324aef60695a534850aaff 100644 (file)
--- 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 6b01bd8c72487477c5cc16e1c5fd937574ef429a..ede692ecc7433b893d040f207b52a9ad6959b617 100644 (file)
--- 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 %}