changeset 2798:371230784e21

add basic theme support for sm and xs viewport sizes
author RogerHaase <haaserd@gmail.com>
date Wed, 01 Oct 2014 07:55:21 -0700
parents 1a14f5755290
children 47e970d1af3f
files MoinMoin/static/js/basic.js MoinMoin/themes/basic/static/css/theme.css MoinMoin/themes/basic/static/custom-less/theme.less MoinMoin/themes/basic/templates/itemviews.html MoinMoin/themes/basic/templates/layout.html
diffstat 5 files changed, 283 insertions(+), 130 deletions(-) [+]
line wrap: on
line diff
--- a/MoinMoin/static/js/basic.js	Tue Sep 30 08:16:59 2014 -0700
+++ b/MoinMoin/static/js/basic.js	Wed Oct 01 07:55:21 2014 -0700
@@ -14,4 +14,8 @@
     if ($('li.active > a.moin-modify-button').length) {
         $('.moin-loginsettings').addClass('moin-pull-right');
     }
+    // Support for extra small viewports, sidebar is initially hidden by CSS, made visible when user clicks button
+    $('#hideshowsidebar').click(function() {
+        $('#moin-main-wrapper').toggleClass('showsidebar');
+    });
 });
--- a/MoinMoin/themes/basic/static/css/theme.css	Tue Sep 30 08:16:59 2014 -0700
+++ b/MoinMoin/themes/basic/static/css/theme.css	Wed Oct 01 07:55:21 2014 -0700
@@ -5,6 +5,7 @@
 
         ./m css  # or "m css" for windows
 */
+/* start of bootstrap.less */
 /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
 html {
   font-family: sans-serif;
@@ -605,7 +606,7 @@
 dd {
   margin-left: 0;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .dl-horizontal dt {
     float: left;
     width: 160px;
@@ -3115,7 +3116,7 @@
   bottom: 100%;
   margin-bottom: 1px;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-right .dropdown-menu {
     left: auto;
     right: 0;
@@ -3642,12 +3643,12 @@
   margin-bottom: 20px;
   border: 1px solid transparent;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar {
     border-radius: 4px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-header {
     float: left;
   }
@@ -3664,7 +3665,7 @@
 .navbar-collapse.in {
   overflow-y: auto;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-collapse {
     width: auto;
     border-top: 0;
@@ -3693,7 +3694,7 @@
   margin-right: -15px;
   margin-left: -15px;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .container > .navbar-header,
   .container-fluid > .navbar-header,
   .container > .navbar-collapse,
@@ -3706,7 +3707,7 @@
   z-index: 1000;
   border-width: 0 0 1px;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-static-top {
     border-radius: 0;
   }
@@ -3718,7 +3719,7 @@
   left: 0;
   z-index: 1030;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-fixed-top,
   .navbar-fixed-bottom {
     border-radius: 0;
@@ -3744,7 +3745,7 @@
 .navbar-brand:focus {
   text-decoration: none;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar > .container .navbar-brand,
   .navbar > .container-fluid .navbar-brand {
     margin-left: -15px;
@@ -3774,7 +3775,7 @@
 .navbar-toggle .icon-bar + .icon-bar {
   margin-top: 4px;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-toggle {
     display: none;
   }
@@ -3787,7 +3788,7 @@
   padding-bottom: 10px;
   line-height: 20px;
 }
-@media (max-width: 991px) {
+@media (max-width: 479px) {
   .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
@@ -3809,7 +3810,7 @@
     background-image: none;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-nav {
     float: left;
     margin: 0;
@@ -3825,7 +3826,7 @@
     margin-right: -15px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-left {
     float: left !important;
   }
@@ -3879,12 +3880,12 @@
     top: 0;
   }
 }
-@media (max-width: 991px) {
+@media (max-width: 479px) {
   .navbar-form .form-group {
     margin-bottom: 5px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-form {
     width: auto;
     border: 0;
@@ -3924,7 +3925,7 @@
   margin-top: 15px;
   margin-bottom: 15px;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .navbar-text {
     float: left;
     margin-left: 15px;
@@ -3989,7 +3990,7 @@
   background-color: #e7e7e7;
   color: #555555;
 }
-@media (max-width: 991px) {
+@media (max-width: 479px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
     color: #777777;
   }
@@ -4072,7 +4073,7 @@
   background-color: #080808;
   color: #ffffff;
 }
-@media (max-width: 991px) {
+@media (max-width: 479px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
     border-color: #080808;
   }
@@ -5785,6 +5786,8 @@
     display: none !important;
   }
 }
+/* end of bootstrap.less */
+/* start of pygments colorful.css */
 .hll {
   background-color: #ffffcc;
 }
@@ -6060,7 +6063,9 @@
   font-weight: bold;
 }
 /* Literal.Number.Integer.Long */
-@media screen and (min-width: 992px) {
+/* end of pygments colorful.css */
+/* start of basic theme custom css for moin2 */
+@media screen and (min-width: 480px) {
   .moin-pull-right {
     float: right !important;
   }
@@ -6174,6 +6179,7 @@
   padding: 10px 15px;
   margin-bottom: -1px;
   background-color: #ffffff;
+  text-align: left;
   padding: 5px 10px;
   background-color: #c8ddf1;
   border: 1px solid #c8ddf1;
@@ -6214,6 +6220,7 @@
   float: right;
 }
 .list-group-item {
+  text-align: left;
   padding: 5px 10px;
   background-color: #c8ddf1;
   border: 1px solid #c8ddf1;
@@ -6318,10 +6325,18 @@
 .moin-nonexistent:hover {
   color: #d9534f;
 }
-.moin-sidebar {
+.moin-sidebar-panels {
   margin-bottom: 20px;
   padding-left: 0;
   overflow: hidden;
+  padding-top: 15px;
+}
+.moin-sidebar-panels a .hidden-sm,
+.moin-sidebar-panels a .hidden-xs {
+  display: inline !important;
+}
+.moin-sidebar-panels .moin-sidebar-form {
+  padding-bottom: 10px;
 }
 .moin-navbar-inverse {
   background-color: #222222;
@@ -6381,7 +6396,7 @@
   background-color: #080808;
   color: #ffffff;
 }
-@media (max-width: 991px) {
+@media (max-width: 479px) {
   .moin-navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
     border-color: #080808;
   }
@@ -6556,12 +6571,12 @@
     top: 0;
   }
 }
-@media (max-width: 991px) {
+@media (max-width: 479px) {
   .moin-navbar-form .form-group {
     margin-bottom: 5px;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .moin-navbar-form {
     width: auto;
     border: 0;
@@ -6580,11 +6595,14 @@
   padding-left: 0px;
   padding-right: 0px;
 }
-@media (min-width: 992px) {
+@media (min-width: 480px) {
   .moin-navbar-header {
     float: left;
   }
 }
+.moin-navbar-header > button {
+  float: left;
+}
 .moin-toggle-comments-button,
 .moin-transclusions-button {
   font-weight: normal;
@@ -7187,3 +7205,48 @@
 .moin-tongue:before {
   content: url("../img/smileys/tongue.png");
 }
+/* Support for extra small viewports */
+@media screen and (max-width: 768px) {
+  #moin-main-wrapper {
+    position: relative;
+  }
+  /* Set sidebar width and shift off canvas */
+  .moin-sidebar {
+    position: absolute;
+    top: 0;
+    width: 33%;
+  }
+  .moin-sidebar {
+    left: -33%;
+  }
+  /* When user toggles button (see basic.js) show/hide sidebar */
+  #moin-main-wrapper.showsidebar {
+    left: 33%;
+  }
+  /* TODO why does bootstrap display navbar-toggle only at width < 480 when <780 is wanted */
+  .navbar-toggle {
+    position: relative;
+    float: left;
+    margin-right: 15px;
+    padding: 9px 10px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    display: inline;
+  }
+  .navbar-toggle:focus {
+    outline: none;
+  }
+  .navbar-toggle .icon-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+  }
+  .navbar-toggle .icon-bar + .icon-bar {
+    margin-top: 4px;
+  }
+}
--- a/MoinMoin/themes/basic/static/custom-less/theme.less	Tue Sep 30 08:16:59 2014 -0700
+++ b/MoinMoin/themes/basic/static/custom-less/theme.less	Wed Oct 01 07:55:21 2014 -0700
@@ -1,11 +1,18 @@
 @import "notice.less";
+
+/* start of bootstrap.less */
 @import "bootstrap.less";
+/* end of bootstrap.less */
+
 @import "moin-variables.less";
+
+/* start of pygments colorful.css */
 @import (less) "colorful.css";
+/* end of pygments colorful.css */
 
-// ---- Customising the top navbar breakpoint
-@grid-float-breakpoint: @screen-md;
+/* start of basic custom css */
 
+@grid-float-breakpoint: @screen-xs;
 @media screen and (min-width: @grid-float-breakpoint) {
   .moin-pull-right {
     .pull-right;
@@ -85,6 +92,7 @@
 }
 
 .list-group-item {
+  text-align: left;
   padding: 5px 10px;
   background-color: @search_option_bar_text_color;
   border: 1px solid @search_option_bar_text_color;
@@ -145,9 +153,19 @@
   }
 }
 
-.moin-sidebar {
+.moin-sidebar-panels {
   .list-group;
   overflow: hidden;
+  padding-top: 15px;
+}
+
+.moin-sidebar-panels a .hidden-sm,
+.moin-sidebar-panels a .hidden-xs {
+  display: inline !important;
+}
+
+.moin-sidebar-panels .moin-sidebar-form {
+  padding-bottom: 10px;
 }
 
 .moin-navbar-inverse {
@@ -280,6 +298,10 @@
   padding-right: 0px;
 }
 
+.moin-navbar-header > button {
+  float: left;
+}
+
 .moin-toggle-comments-button, .moin-transclusions-button{
   font-weight: normal;
 }
@@ -909,3 +931,50 @@
 .moin-tongue:before {
   content: url("../img/smileys/tongue.png");
 }
+
+/* Support for extra small viewports */
+@media screen and (max-width: @screen-sm-min) {
+  #moin-main-wrapper {
+    position: relative;
+  }
+  /* Set sidebar width and shift off canvas */
+  .moin-sidebar {
+    position: absolute;
+    top: 0;
+    width: 33%;
+  }
+  .moin-sidebar {
+    left: -33%;
+  }
+  /* When user toggles button (see basic.js) show/hide sidebar */
+  #moin-main-wrapper.showsidebar {
+    left: 33%;
+  }
+  /* TODO why does bootstrap display navbar-toggle only at width < 480 when <780 is wanted */
+  .navbar-toggle {
+    position: relative;
+    float: left;
+    margin-right: 15px;
+    padding: 9px 10px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    display: inline;
+  }
+  .navbar-toggle:focus {
+    outline: none;
+  }
+  .navbar-toggle .icon-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+  }
+  .navbar-toggle .icon-bar + .icon-bar {
+    margin-top: 4px;
+  }
+
+}
--- a/MoinMoin/themes/basic/templates/itemviews.html	Tue Sep 30 08:16:59 2014 -0700
+++ b/MoinMoin/themes/basic/templates/itemviews.html	Wed Oct 01 07:55:21 2014 -0700
@@ -9,7 +9,7 @@
                 <li {% if maincls %}class="{{ maincls }}"{% endif %}>
                     <a {% if linkcls %}class="{{ linkcls }}"{% endif %} href="{{ href }}" title="{{ title }}" rel="nofollow">
                         <span class="{{ iconcls }}"></span>
-                        {{ label }}
+                        <span class="hidden-sm hidden-xs">{{ label }}</span>
                     </a>
                 </li>
             {% endfor %}
--- a/MoinMoin/themes/basic/templates/layout.html	Tue Sep 30 08:16:59 2014 -0700
+++ b/MoinMoin/themes/basic/templates/layout.html	Wed Oct 01 07:55:21 2014 -0700
@@ -10,6 +10,7 @@
 {% set current_url = request.url %}
 {% set current_path = request.path %}
 {% set current_url_showview = url_for_item(endpoint='frontend.show_item', item_name=item_name) %}
+{% set login_url = theme_supp.login_url() %}
 
 {# Helper macro to generate the local panel #}
 {% macro local_panel_main(panelname) -%}
@@ -35,40 +36,110 @@
         rel="nofollow"
         {% if title %} title="{{ title }}" {% endif %}>
         {% if iconcls %} <i class="{{ iconcls }}"> </i> {% endif %}
-        {{ label }}
+        {% if href == login_url %}
+            {{label }}
+        {% else %}
+            <span class="hidden-sm hidden-xs">{{ label }}</span>
+        {% endif %}
     </a>
 {% endmacro %}
 
+{# Helper macro to generate a search form #}
+{% macro make_search_form(klass, clas) %}
+    <div class="{{klass}}">
+        <form class="{{clas}}" action="{{ url_for('frontend.search') }}" method="get" role="search">
+            <div class="input-group">
+                <input name='q' type="text" class="form-control" placeholder="Search ...">
+                <div class="input-group-btn">
+                    <button class="btn btn-primary" type="submit">
+                        <i class="icon-search"></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+{% endmacro %}
+
+
+{% block head_meta %}
+    {{ super() }}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+{% endblock %}
+
 {% block layout %}
     <div class="container">
-        <div class="row moin-header">
-            <div class="col-md-2 moin-logo">
-                {% if logo %}
-                    <a href="{{ url_for('frontend.show_item', item_name=cfg.item_root) }}">
-                        <img class="img-circle" src="{{ '/static/logos/moinmoin.png' }}" alt="Site Logo"/>
-                    </a>
-                {% endif %}
-            </div>
-            <div class="col-md-10">
+        <div id="moin-main-wrapper" class="row">
+
+            <div class="col-md-2 col-sm-3 col-xs-4 moin-sidebar">
+                <div class="moin-logo">
+                    {% if logo %}
+                        <a href="{{ url_for('frontend.show_item', item_name=cfg.item_root) }}">
+                            <img class="img-circle" src="{{ '/static/logos/moinmoin.png' }}" alt="Site Logo"/>
+                        </a>
+                    {% endif %}
+                </div>
+                <div class="moin-sidebar-panels">
+                    {% set navibar_items = theme_supp.navibar(item_name) %}
+                    {% set quicklinks = 'false' %}
+
+                    {% if search_form %}
+                        {{ make_search_form("hidden-lg hidden-md hidden-sm", "moin-sidebar-form") }}
+                    {% endif %}
+
+                    {% if navibar_items %}
+                        <div class="list-group-item moin-list-heading"> {{ _("Site Navigation") }} </div>
+                        {% for cls, url, text, title in navibar_items if cls != 'userlink' %}
+                            <a class="list-group-item {{ cls }}
+                                {% if url in [current_url, current_path, current_url_showview] %} active{% endif %}" href="{{ url }}"
+                                {% if title %}title="{{ title }}"{% endif %}>
+                                {{ text|shorten_item_name }}
+                            </a>
+                        {% endfor %}
+                        {% if item_navigation %}
+                            <div class="list-group-item moin-list-heading"> {{ _("Supplementation") }} </div>
+                            {{ local_panel_main(item_navigation) }}
+                        {% endif %}
+                    {% endif %}
+
+                    {% for cls, url, text, title in navibar_items if cls == 'userlink' %}
+                        {% if loop.first %}
+                            <div class="list-group-item moin-list-heading">Quick Links</div>
+                        {% endif %}
+                        <div class="moin-quicklink">
+                            <a class="moin-quicklink-label {{ cls }}" href="{{ url }}" {% if title %}title="{{ title }} : {{ url|safe }}"{% else %}"{{ url|safe }}"{% endif %}>{{ text|shorten_item_name(20) }}
+                            </a>
+                        </div>
+                    {% endfor %}
+
+                    {% if self.local_panel %}
+                        {{ self.local_panel() }}
+                    {% endif %}
+                </div> {# moin-sidebar-panels #}
+            </div> {# moin-sidebar #}
+
+            <div class="col-md-10 col-sm-9 col-xs-12">
                 <nav class="navbar moin-navbar-inverse">
-                    <div class="container">
-                        <div class="col-md-3">
+                    <div class="row">
+                        <div class="col-md-3 col-sm-5 col-xs-6">
                             <div class="moin-navbar-header">
-                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#target">
-                                  <span class="sm-only"></span>
-                                  <span class="icon-bar"></span>
-                                  <span class="icon-bar"></span>
-                                  <span class="icon-bar"></span>
+
+                                <button type="button" id="hideshowsidebar" class="navbar-toggle">
+                                    <span class="icon-bar"></span>
+                                    <span class="icon-bar"></span>
+                                    <span class="icon-bar"></span>
                                 </button>
+
                                 {% if cfg.sitename %}
                                     <a class="navbar-brand" href="{{ url_for('frontend.show_item', item_name=cfg.item_root) }}">
                                         {{ cfg.sitename }}
                                     </a>
                                 {% endif %}
+
                             </div>
                         </div>
-                        <div class="col-md-6 moin-loginsettings">
-                            <div class="moin-navbar-collapse navbar-collapse collapse in" id="target">
+
+                        <div class="col-md-6 col-sm-4 col-xs-6 moin-loginsettings">
+                            <div class="moin-navbar-collapse navbar-collapse collapse in">
                                 <ul class="nav navbar-nav moin-pull-right">
                                     {% if user.valid -%}
                                         {% set avatar = user.avatar(20) %}
@@ -94,7 +165,7 @@
                                             </li>
                                         {% endif %}
                                     {% else %}
-                                        {% set login_url = theme_supp.login_url() %}
+
                                         {% if login_url %}
                                             <li>
                                                 {{ hyperlink(login_url, None, True, _('Login'), None, None) }}
@@ -105,21 +176,10 @@
                             </div>
                         </div>
                         {% if search_form %}
-                            <div class="col-md-3">
-                                <form class="moin-navbar-form" action="{{ url_for('frontend.search') }}" method="get" role="search">
-                                    <div class="input-group">
-                                        <input name='q' type="text" class="form-control" placeholder="Search ...">
-                                        <div class="input-group-btn">
-                                            <button class="btn btn-primary" type="submit">
-                                                <i class="icon-search"></i>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </form>
-                            </div>
+                            {{ make_search_form("col-sm-3 hidden-xs", "moin-navbar-form") }}
                         {% endif %}
                     </div>
-                </nav> <!-- navbar-inverse-->
+                </nav> {# navbar moin-navbar-inverse #}
 
                 <ul class="moin-breadcrumb">
                     {% set trail_items = theme_supp.path_breadcrumbs() %}
@@ -187,83 +247,40 @@
                             {% endif %}
                         {% endfor %}
                     {% endif %}
-                </ul><!-- complete list of breadcrumbs -->
-
-            </div> <!-- col-md-10 -->
-        </div> <!-- row-topnavbar -->
-
-        <div class="row moin-content">
-            <div class="col-md-2">
-                <div class="moin-sidebar">
-                    {% set navibar_items = theme_supp.navibar(item_name) %}
-                    {% set quicklinks = 'false' %}
-                    {% if navibar_items %}
-                        <div class="list-group-item moin-list-heading"> {{ _("Site Navigation") }} </div>
-                        {% for cls, url, text, title in navibar_items if cls != 'userlink' %}
-                            <a class="list-group-item {{ cls }}
-                                {% if url in [current_url, current_path, current_url_showview] %} active{% endif %}" href="{{ url }}"
-                                {% if title %}title="{{ title }}"{% endif %}>
-                                {{ text|shorten_item_name }}
-                            </a>
-                        {% endfor %}
-                        {% if item_navigation %}
-                            <div class="list-group-item moin-list-heading"> {{ _("Supplementation") }} </div>
-                            {{ local_panel_main(item_navigation) }}
-                        {% endif %}
-                    {% endif %}
+                </ul> {# moin-breadcrumb #}
 
-                    {% for cls, url, text, title in navibar_items if cls == 'userlink' %}
-                        {% if loop.first %}
-                            <div class="list-group-item moin-list-heading">Quick Links</div>
-                        {% endif %}
-                        <div class="moin-quicklink">
-                            <a class="moin-quicklink-label {{ cls }}" href="{{ url }}" {% if title %}title="{{ title }} : {{ url|safe }}"{% else %}"{{ url|safe }}"{% endif %}>{{ text|shorten_item_name(20) }}
-                            </a>
-                        </div>
-                    {% endfor %}
+                <div class="moin-content">
+                    {# id -> moin-flash is used to add special alerts for ex. for changes to User Settings via JS, see common.js #}
+                    <div id="moin-flash">
+                        {% for category, msg in get_flashed_messages(with_categories=true) %}
+                            <div class="moin-flash moin-flash-{{ category }}">
+                                {{ msg }}
+                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+                            </div>
+                        {% endfor %}
+                    </div>
 
-                    {% if self.local_panel %}
-                        {{ self.local_panel() }}
-                    {% endif %}
-                </div>
-            </div><!--/span-->
-
-            <div class="col-md-10">
+                    {% block views %}
+                    {% endblock %}
 
-                {# id -> moin-flash is used to add special alerts for ex. for changes to User Settings via JS, see common.js #}
-                <div id="moin-flash">
-                    {% for category, msg in get_flashed_messages(with_categories=true) %}
-                        <div class="moin-flash moin-flash-{{ category }}">
-                            {{ msg }}
-                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-                        </div>
-                    {% endfor %}
+                    {% set content_id = self.local_panel and 'moin-content' or 'moin-content-no-panel' %}
+                    <div id="{{ content_id }}" lang="{{ theme_supp.content_lang }}" dir="{{ theme_supp.content_dir }}">
+                        {% block content %}
+                            {# All content templates should implement this block. #}
+                        {% endblock %}
+                    </div>
                 </div>
 
-                {% block views %}
-                {% endblock %}
-
-                {% set content_id = self.local_panel and 'moin-content' or 'moin-content-no-panel' %}
-                <div id="{{ content_id }}" lang="{{ theme_supp.content_lang }}" dir="{{ theme_supp.content_dir }}">
-                    {% block content %}
-                        {# All content templates should implement this block. #}
-                    {% endblock %}
-                </div>
-
-            </div><!--/col-md-10-->
-        </div> <!--/row sidebar, tabs, content - main-->
-
-        {% block footer %}
-            <div class="row moin-footer">
-                <div class="col-md-12">
-                    <div class="navbar"> <!--footer-->
+                {% block footer %}
+                    <div class="navbar">
                         {{ footer_logos }}
                         {{ credits }}
                     </div>
-                </div>
-            </div> <!--/row for footer-->
-        {% endblock %}
-    </div><!--/container-->
+                {% endblock %}
+            </div> {# parent of header, breadcrumbs, content, footer #}
+        </div>
+
+    </div>
 {% endblock %}
 
 {% block body_scripts %}