From 92cb0468bce01f739466bf42ad780e05e5bdc6da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Solard?= <mael.solard@laposte.net>
Date: Fri, 25 Jul 2014 09:08:52 +0200
Subject: [PATCH] Turn footer into a collapse button when screen is smaller
 than 750px

---
 modoboa/static/css/custom.css                | 49 +++++++++--------
 modoboa/templates/common/pagination_bar.html |  2 +-
 modoboa/templates/nlayout.html               | 55 +++++++++++---------
 3 files changed, 59 insertions(+), 47 deletions(-)

diff --git a/modoboa/static/css/custom.css b/modoboa/static/css/custom.css
index 41225b7e0..2e3bcfc4c 100644
--- a/modoboa/static/css/custom.css
+++ b/modoboa/static/css/custom.css
@@ -1,10 +1,6 @@
  /* Media */
 
 @media (max-width: 440px) {
-    #bottom-bar #bottom-bar-right{
-        text-align: center;
-    }
-
     .navbar .nav li a, .navbar .btn-group li .dropdown-toggle{
         padding-right:0;
     }
@@ -12,15 +8,17 @@
     .navbar .col-xs-8{
         padding-right:0;
     }
-    html body div#bottom-bar{
-        display: none;
-    }
 }
 
-@media (max-width: 1200px) and (min-width: 440px) {
-
-}
+ @media (max-width: 750px) {
 
+     #bottom-bar-middle{
+         display: none;
+     }
+     #bottom-bar #bottom-bar-right{
+         text-align: center;
+     }
+ }
 @media (max-width: 1200px){
     .dropdown{
         margin:0px;
@@ -31,7 +29,23 @@
 }
 
 
+     /* Colapse Nav */
 
+ .navbar-inverse .navbar-toggle {
+     border-color: #999999;
+ }
+
+ .navbar-inverse .navbar-toggle span{
+     color: white;
+ }
+
+ .navbar-toggle{
+     background-color: #000;
+     margin-bottom: 4px;
+     margin-right: 18px;
+     margin-top: 2px;
+     padding: 9px 10px;
+ }
 
      /*Global*/
 
@@ -244,6 +258,8 @@ div.container-fluid .row-fluid .well ul.nav div.side-bar-responsive li a i.glyph
     cursor: default;
 }
 
+
+
 /* Top navbar section */
 
 .top-navbar{
@@ -281,8 +297,9 @@ div.container-fluid .row-fluid .well ul.nav div.side-bar-responsive li a i.glyph
 .btn-group{
     margin-left: 20px;
 }
+
+ html body div.navbar div.container-fluid div#bs-example-navbar-collapse-1.collapse ul.nav li.active a,
  html body div.navbar div.container-fluid div#bs-example-navbar-collapse-1.collapse ul.nav li.dropdown a.dropdown-toggle{
-    background-color: black;
     color: white;
 }
 
@@ -316,16 +333,6 @@ html body div.navbar div.container-fluid ul.nav li.dropdown ul.dropdown-menu li
     color: white;
 }
 
-                    /* Top navbar section -> Button xs */
- .navbar-toggle{
-     background-color: #5B5B5B;
-     margin-bottom: 4px;
-     margin-right: 18px;
-     margin-top: 2px;
-     padding: 9px 10px;
- }
-
-
 /* listing */
 
 #listing{
diff --git a/modoboa/templates/common/pagination_bar.html b/modoboa/templates/common/pagination_bar.html
index ff07ff7fc..3c6e18310 100644
--- a/modoboa/templates/common/pagination_bar.html
+++ b/modoboa/templates/common/pagination_bar.html
@@ -1,4 +1,4 @@
-<div id="pagination_bar" class="simplepagination pull-right">
+<div id="pagination_bar" class="simplepagination">
   <ul>
     <li>      
       {% if page.has_previous %}<a href="{{ baseurl }}page=1">
diff --git a/modoboa/templates/nlayout.html b/modoboa/templates/nlayout.html
index 967c15435..5777b16bd 100644
--- a/modoboa/templates/nlayout.html
+++ b/modoboa/templates/nlayout.html
@@ -26,47 +26,52 @@
     {% extra_static_content "top" user %}
     {% block html_head %}{% endblock %}
   </head>
-
   <body>
     <div class="navbar navbar-inverse top-navbar" role="navigation">
         <div class="container-fluid">
-                <div class="navbar-header">
-                    <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="glyphicon glyphicon-bar"></span>
-                        <span class="glyphicon glyphicon-bar"></span>
-                        <span class="glyphicon glyphicon-bar"></span>
-                    </button>
-                </div>
-                <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
-                    <ul class="nav">{% if selection %}
-                      {% extensions_menu selection user %}{% core_menu selection user %}
-                      {% else %}{% extensions_menu "" user %}{% core_menu "" user %}{% endif %}
-                      {% load_optionalmenu user %}
-                    </ul>
+            <div class="navbar-header">
+                <button class="navbar-toggle" data-target="#action" data-toggle="collapse" type="button">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span> Action </span>
+                </button>
+                <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+            </div>
+            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
+                <ul class="nav">{% if selection %}
+                  {% extensions_menu selection user %}{% core_menu selection user %}
+                  {% else %}{% extensions_menu "" user %}{% core_menu "" user %}{% endif %}
+                  {% load_optionalmenu user %}
+                </ul>
                 <ul class="nav pull-right">
                 {% if selection %}{% user_menu user selection %}{% else %}{% user_menu user "" %}{% endif %}
-              </ul>
+                </ul>
               <div class="pull-right">{% load_notifications user %}
               </div>
             </div>
         </div>
     </div>
     {% block content %}{% endblock %}
+    <div id="action" class="collapse navbar-collapse">
     <div id="bottom-bar" class="navbar navbar-inverse navbar-fixed-bottom">
         <div class="navbar-inner">
             <div class="container-fluid">
                 <div class="row-fluid">
-                    <div id="bottom-bar-middle" class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
-            <p class="navbar-text"><i>{% trans "Powered by Modoboa" %}</i></p>
-            {% block footermiddle %}{% endblock %}
-          </div>
-          <div id="bottom-bar-right" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
-            {% block footerright %}{% endblock %}
-          </div>
-          </div>
+                    <div id="bottom-bar-middle" class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-0 col-xs-offset-0">
+                        <p class="navbar-text"><i>{% trans "Powered by Modoboa" %}</i></p>
+                        {% block footermiddle %}{% endblock %}
+                    </div>
+                    <div id="bottom-bar-right" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
+                    {% block footerright %}{% endblock %}
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
+    </div>
     </div>
   </body>
 </html>