From 6a98fa4a7adb1d27eb37f1c53caeac6b516216dd Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Wed, 15 Oct 2014 17:27:34 +0200
Subject: [PATCH] Design fixes and enhancements.

see #585
---
 modoboa/core/templatetags/core_tags.py        |   2 +-
 .../admin/templates/admin/listing.html        |   1 -
 .../amavis/static/amavis/css/quarantine.css   |  14 ++-
 .../amavis/static/amavis/js/quarantine.js     |   3 +-
 .../amavis/templates/amavis/emails_page.html  |   2 +-
 .../amavis/templates/amavis/index.html        |  12 +-
 .../templates/amavis/main_action_bar.html     | 106 +++++++++---------
 .../radicale/static/radicale/css/radicale.css |   5 +
 .../templates/radicale/calendars.html         |   2 +-
 .../templates/radicale/calendars_page.html    |   2 +-
 .../static/sievefilters/css/style.css         |   4 +
 .../templates/sievefilters/index.html         |   6 +-
 .../stats/static/stats/css/stats.css          |   4 +
 .../stats/templates/stats/index.html          |  12 +-
 .../webmail/static/webmail/css/webmail.css    | 105 +++++++----------
 .../webmail/static/webmail/js/webmail.js      |  69 ++++--------
 .../webmail/templates/webmail/compose.html    |  23 ++--
 .../webmail/templates/webmail/index.html      |  73 +++++-------
 .../templates/webmail/main_action_bar.html    |   8 +-
 .../webmail/templatetags/webmail_tags.py      |   6 +-
 modoboa/static/css/custom.css                 |  64 ++++++-----
 modoboa/templates/common/buttons_list.html    |   2 +-
 modoboa/templates/fluid.html                  |   4 +-
 modoboa/templates/nlayout.html                |  37 +++---
 modoboa/templates/twocols.html                |   8 +-
 25 files changed, 258 insertions(+), 316 deletions(-)

diff --git a/modoboa/core/templatetags/core_tags.py b/modoboa/core/templatetags/core_tags.py
index 3ba0d65fb..4113e8b48 100644
--- a/modoboa/core/templatetags/core_tags.py
+++ b/modoboa/core/templatetags/core_tags.py
@@ -88,7 +88,7 @@ def user_menu(user, selection):
         + [{"name": "logout",
             "url": reverse("core:logout"),
             "label": _("Logout"),
-            "img": "fa fa-off"}]
+            "img": "fa fa-sign-out"}]
 
     return render_to_string("common/menulist.html", {
         "selection": selection, "entries": entries, "user": user
diff --git a/modoboa/extensions/admin/templates/admin/listing.html b/modoboa/extensions/admin/templates/admin/listing.html
index eb48aef94..6ea35533e 100644
--- a/modoboa/extensions/admin/templates/admin/listing.html
+++ b/modoboa/extensions/admin/templates/admin/listing.html
@@ -37,4 +37,3 @@ var admin;
   </table>
 </div>
 {% endblock %}
-{% block footerright %}{% endblock %}
diff --git a/modoboa/extensions/amavis/static/amavis/css/quarantine.css b/modoboa/extensions/amavis/static/amavis/css/quarantine.css
index 0d0d2e6cb..41aaa963d 100644
--- a/modoboa/extensions/amavis/static/amavis/css/quarantine.css
+++ b/modoboa/extensions/amavis/static/amavis/css/quarantine.css
@@ -28,11 +28,15 @@
 }
 
 #menubar {
-    top: 60px;
+    position: absolute;
+    top: 51px;
     padding-left: 6px;
-    padding-bottom:10px;
+    padding-right: 15px;
+    padding-top: 20px;
+    padding-bottom: 10px;
     left: 0;
     right: 0;
+    margin: 0;
     z-index: 10;
 }
 
@@ -43,11 +47,13 @@
 #listing {
     position: absolute;
     top: 125px;
+    left: 0;
+    right: 0;
     bottom: 0;
     margin: 0;
     overflow: auto;
     padding-left: 15px;
-    padding-right: 15px;   
+    padding-right: 15px;
 }
 
 #mailcontent {
@@ -62,8 +68,6 @@
     color: #0088cc;
 }
 
-
-
 thead tr {
     position: relative;
     z-index: 1;
diff --git a/modoboa/extensions/amavis/static/amavis/js/quarantine.js b/modoboa/extensions/amavis/static/amavis/js/quarantine.js
index 3ca47ad36..0dbbf59bb 100644
--- a/modoboa/extensions/amavis/static/amavis/js/quarantine.js
+++ b/modoboa/extensions/amavis/static/amavis/js/quarantine.js
@@ -352,11 +352,12 @@ Quarantine.prototype = {
         if (this.navobj.hasparam("reset_page")) {
             this.navobj.delparam("reset_page").update(false, true);
         }
+        $("#listing").css("overflow", "auto");
     },
 
     viewmail_cb: function(data) {
         this.update_page(data);
-        $("body").css("overflow", "hidden");
+        $("#listing").css("overflow", "hidden");
     },
 
     action_cb: function(data) {
diff --git a/modoboa/extensions/amavis/templates/amavis/emails_page.html b/modoboa/extensions/amavis/templates/amavis/emails_page.html
index 0e7b2c3da..b534a8d46 100644
--- a/modoboa/extensions/amavis/templates/amavis/emails_page.html
+++ b/modoboa/extensions/amavis/templates/amavis/emails_page.html
@@ -1,7 +1,7 @@
 {% load amavis_tags %}
 
 {% for email in email_list %}
-<tr id="{{ email.mailid }}" name="{{ forloop.counter }}">
+<tr id="{{ email.mailid }}">
   <td name="selection" width="5px">
     <input id="selection" type="checkbox" name="select_{{ email.mailid }}" value="{{ email.mailid }}">
   </td>
diff --git a/modoboa/extensions/amavis/templates/amavis/index.html b/modoboa/extensions/amavis/templates/amavis/index.html
index c63d1442a..dd5a25d22 100644
--- a/modoboa/extensions/amavis/templates/amavis/index.html
+++ b/modoboa/extensions/amavis/templates/amavis/index.html
@@ -1,4 +1,4 @@
-{% extends "fixed.html" %}{% load i18n amavis_tags %}
+{% extends "fluid.html" %}{% load i18n amavis_tags %}
 {% block pagetitle %}{% trans "Quarantine management" %}{% endblock %}
 {% block html_head %}
 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}amavis/css/quarantine.css" />
@@ -20,11 +20,11 @@ $(document).ready(function() {
 });
 </script>
 {% endblock %}
-{% block fixed_content %}
-<div id="menubar" class="row" style="padding-top: 20px">
+
+{% block container_content %}
+<div id="menubar">
   {% quar_menu %}
 </div>
-<div class="row">
-  <div id="listing" class="col-xs-12"></div>
-</div>
+
+<div id="listing"></div>
 {% endblock %}
diff --git a/modoboa/extensions/amavis/templates/amavis/main_action_bar.html b/modoboa/extensions/amavis/templates/amavis/main_action_bar.html
index a4cb5cf06..ce0f1d44f 100644
--- a/modoboa/extensions/amavis/templates/amavis/main_action_bar.html
+++ b/modoboa/extensions/amavis/templates/amavis/main_action_bar.html
@@ -1,60 +1,62 @@
 {% load lib_tags i18n %}
-<div class="col-lg-9 col-md-8 col-xs-12">
-  <div class="navbar-nav">
-    <div>
-      <div class="btn-group" title="{% trans 'Select' %}">
-        <a class="btn btn-default"><input type="checkbox" id="selectall" /></a>
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-          <li><a name="selectmsgs" href="S">{% trans "Spam" %}</a></li>
-          <li><a name="selectmsgs" href="V">{% trans "Virus" %}</a></li>
-          <li><a name="selectmsgs" href="H">{% trans "Bad Header" %}</a></li>
-          <li><a name="selectmsgs" href="M">{% trans "Bad MIME" %}</a></li>
-          <li><a name="selectmsgs" href="B">{% trans "Banned" %}</a></li>
-        </ul>
-      </div>
-      <div class="btn-group">
-        <a name="release-multi" href="{% url 'amavis:mail_process' %}" class="btn btn-success disabled">
-          <span class="fa fa-check"></span> <span>{% trans "Release" %}</span>
-        </a>
-      </div>
-      <div class="btn-group">
-        <a name="delete-multi" href="{% url 'amavis:mail_process' %}" class="btn btn-danger disabled">
-          <span class="fa fa-trash"></span> <span>{% trans "Delete" %}</span>
-        </a>
-      </div>
-      <div class="btn-group">
-        {% include "common/email_searchbar.html" with extraopts=extraopts %}
+<div class="row">
+  <div class="col-lg-9 col-md-8 col-xs-12">
+    <div class="navbar-nav">
+      <div>
+        <div class="btn-group" title="{% trans 'Select' %}">
+          <a class="btn btn-default"><input type="checkbox" id="selectall" /></a>
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a name="selectmsgs" href="S">{% trans "Spam" %}</a></li>
+            <li><a name="selectmsgs" href="V">{% trans "Virus" %}</a></li>
+            <li><a name="selectmsgs" href="H">{% trans "Bad Header" %}</a></li>
+            <li><a name="selectmsgs" href="M">{% trans "Bad MIME" %}</a></li>
+            <li><a name="selectmsgs" href="B">{% trans "Banned" %}</a></li>
+          </ul>
+        </div>
+        <div class="btn-group">
+          <a name="release-multi" href="{% url 'amavis:mail_process' %}" class="btn btn-success disabled">
+            <span class="fa fa-check"></span> <span>{% trans "Release" %}</span>
+          </a>
+        </div>
+        <div class="btn-group">
+          <a name="delete-multi" href="{% url 'amavis:mail_process' %}" class="btn btn-danger disabled">
+            <span class="fa fa-trash"></span> <span>{% trans "Delete" %}</span>
+          </a>
+        </div>
+        <div class="btn-group">
+          {% include "common/email_searchbar.html" with extraopts=extraopts %}
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<div class="col-lg-3 col-md-4">
-  <div class="btn-group">
-    <div id="filters_bar" class="navbar-nav navbar-right">
-      <span class="label label-default">{% trans "Display" %}</span>
-      <div id="filters" class="btn-group" data-toggle="buttons">
-        <label class="btn btn-default active">
-          <input type="radio" name="msgtype_all" title="{% trans 'All messages' %}" checked> {% trans "All" %}
-        </label>
-        <label class="btn btn-danger">
-          <input type="radio" name="msgtype_S" title="{% trans 'Spam only' %}"> S
-        </label>
-        <label class="btn btn-danger">
-          <input type="radio" name="msgtype_V" title="{% trans 'Virus only' %}"> V
-        </label>
-        <label class="btn btn-warning">
-          <input type="radio" name="msgtype_S" title="{% trans 'Bad Header only' %}"> H
-        </label>
-        <label class="btn btn-warning">
-          <input type="radio" name="msgtype_M" title="{% trans 'Bad MIME only' %}"> M
-        </label>
-        <label class="btn btn-warning">
-          <input type="radio" name="msgtype_B" title="{% trans 'Banned only' %}"> B
-        </label>
+  <div class="col-lg-3 col-md-4">
+    <div class="btn-group">
+      <div id="filters_bar" class="navbar-nav navbar-right">
+        <span class="label label-default">{% trans "Display" %}</span>
+        <div id="filters" class="btn-group" data-toggle="buttons">
+          <label class="btn btn-default active">
+            <input type="radio" name="msgtype_all" title="{% trans 'All messages' %}" checked> {% trans "All" %}
+          </label>
+          <label class="btn btn-danger">
+            <input type="radio" name="msgtype_S" title="{% trans 'Spam only' %}"> S
+          </label>
+          <label class="btn btn-danger">
+            <input type="radio" name="msgtype_V" title="{% trans 'Virus only' %}"> V
+          </label>
+          <label class="btn btn-warning">
+            <input type="radio" name="msgtype_S" title="{% trans 'Bad Header only' %}"> H
+          </label>
+          <label class="btn btn-warning">
+            <input type="radio" name="msgtype_M" title="{% trans 'Bad MIME only' %}"> M
+          </label>
+          <label class="btn btn-warning">
+            <input type="radio" name="msgtype_B" title="{% trans 'Banned only' %}"> B
+          </label>
+        </div>
       </div>
     </div>
   </div>
diff --git a/modoboa/extensions/radicale/static/radicale/css/radicale.css b/modoboa/extensions/radicale/static/radicale/css/radicale.css
index d8daf5408..1be71507f 100644
--- a/modoboa/extensions/radicale/static/radicale/css/radicale.css
+++ b/modoboa/extensions/radicale/static/radicale/css/radicale.css
@@ -13,4 +13,9 @@
 
 .addrule, .delrule { 
     margin-left: 10px;
+}
+
+table tr td[name=actions],
+table tr th#actions { 
+    text-align: right;
 }
\ No newline at end of file
diff --git a/modoboa/extensions/radicale/templates/radicale/calendars.html b/modoboa/extensions/radicale/templates/radicale/calendars.html
index 99ac8864a..bab37dbf9 100644
--- a/modoboa/extensions/radicale/templates/radicale/calendars.html
+++ b/modoboa/extensions/radicale/templates/radicale/calendars.html
@@ -29,7 +29,7 @@ $(document).ready(function() {
   <div class="col-sm-5">
     {% include "admin/searchform.html" %}
   </div>
-  <div id="taglist" class="col-sm-5 col-md-5">
+  <div id="taglist" class="col-sm-5">
     
   </div>
 </div>
diff --git a/modoboa/extensions/radicale/templates/radicale/calendars_page.html b/modoboa/extensions/radicale/templates/radicale/calendars_page.html
index a5876e4ff..13a642ec8 100644
--- a/modoboa/extensions/radicale/templates/radicale/calendars_page.html
+++ b/modoboa/extensions/radicale/templates/radicale/calendars_page.html
@@ -1,6 +1,6 @@
 {% load i18n lib_tags radicale_tags %}
 {% for cal in calendars %}
-<tr id="{{ cal.id }}" class="" name="{{ forloop.counter }}">
+<tr id="{{ cal.id }}">
   <td name="name">{% calendar_modify_link cal %}</td>
   {% if with_owner %}<td name="owner">{{ cal.owner }}</td>{% endif %}
   <td name="tags">{% render_tags cal.tags %}</td>
diff --git a/modoboa/extensions/sievefilters/static/sievefilters/css/style.css b/modoboa/extensions/sievefilters/static/sievefilters/css/style.css
index 0f0e47c01..6ff656c85 100644
--- a/modoboa/extensions/sievefilters/static/sievefilters/css/style.css
+++ b/modoboa/extensions/sievefilters/static/sievefilters/css/style.css
@@ -1,3 +1,7 @@
+.fset_container { 
+    padding: 0 15px;
+}
+
 #set_content textarea {
     width: 100%;
     height: 500px;
diff --git a/modoboa/extensions/sievefilters/templates/sievefilters/index.html b/modoboa/extensions/sievefilters/templates/sievefilters/index.html
index d2633e210..0f1448460 100644
--- a/modoboa/extensions/sievefilters/templates/sievefilters/index.html
+++ b/modoboa/extensions/sievefilters/templates/sievefilters/index.html
@@ -73,9 +73,7 @@ $(document).ready(function() {
 {% block leftcol %}
 <ul id="menu" class="nav nav-sidebar">
   <li class="nav-header">{% trans "Filter sets" %}</li>
-  <li class="">
-    <div class="row">
-      <div class="col-md-offset-1 col-md-10">
+  <li class="fset_container">
     <select id="curfset" class="form-control">
       {% if active_script %}
       <option value="{{ active_script }}">{{ active_script }} ({% trans "active" %})</option>
@@ -84,8 +82,6 @@ $(document).ready(function() {
       <option value="{{ script }}">{{ script }}</option>
       {% endfor %}
     </select>
-      </div>
-    </div>
   </li>
   {# It will add a li item : #}
   {% sfilters_menu user %}
diff --git a/modoboa/extensions/stats/static/stats/css/stats.css b/modoboa/extensions/stats/static/stats/css/stats.css
index adb4ac2c7..edd761be7 100644
--- a/modoboa/extensions/stats/static/stats/css/stats.css
+++ b/modoboa/extensions/stats/static/stats/css/stats.css
@@ -1,3 +1,7 @@
+#menubar { 
+    padding-left: 15px;
+}
+
 .chart {
     position: relative;
     margin-bottom: 20px;
diff --git a/modoboa/extensions/stats/templates/stats/index.html b/modoboa/extensions/stats/templates/stats/index.html
index ba6426259..62a0547ac 100644
--- a/modoboa/extensions/stats/templates/stats/index.html
+++ b/modoboa/extensions/stats/templates/stats/index.html
@@ -28,19 +28,17 @@ $(document).ready(function() {
 {% endblock %}
 
 {% block apparea %}
-<div class="row">
+<div id="menubar" class="row">
   <div class="col-sm-5">
     <form class="form-horizontal" role="form">
       <div class="form-group has-feedback">
-        <div class="col-sm-12">
-          <input class="form-control" id="searchquery" type="text" value="{% trans 'Search a domain' %}">
-          <span class="fa fa-search form-control-feedback"></span>
-        </div>
+        <input class="form-control" id="searchquery" type="text" value="{% trans 'Search a domain' %}">
+        <span class="fa fa-search form-control-feedback"></span>
       </div>
     </form>
   </div>
 
-  <div class="col-md-3">
+  <div class="col-sm-7">
     <div class="btn-group" data-toggle="buttons">
       {% for p in periods %}
       <label class="btn btn-primary period_selector">
@@ -67,7 +65,7 @@ $(document).ready(function() {
             <input id="id_to" class="form-control" name="date_to" value="{{ end }}" type="text" readonly="readonly" />
           </div>
         </div>
-        <button class="btn btn-primary" id="customsend">{% trans "Apply" %}</button>
+        <button type="submit" class="btn btn-primary" id="customsend">{% trans "Apply" %}</button>
       </span>
     </form>
   </div>
diff --git a/modoboa/extensions/webmail/static/webmail/css/webmail.css b/modoboa/extensions/webmail/static/webmail/css/webmail.css
index 6add291a7..570e12875 100644
--- a/modoboa/extensions/webmail/static/webmail/css/webmail.css
+++ b/modoboa/extensions/webmail/static/webmail/css/webmail.css
@@ -1,35 +1,15 @@
 /* MEDIA */
-#listing {
-    position: absolute;
-    top: 75px;
-    bottom: 0;
-    margin: 0;
-    overflow: auto;
-    padding-left: 15px;
-    padding-right: 15px;     
-}
-
-@media (max-width: 400px) {
-   
-}
-
-@media (max-width: 500px) {
-    
-}
-
-@media (max-width: 768px) {
-    #searchbox {
-        margin-left: 20px;
-    }
-}
 
 @media (min-width: 768px) {
-  
+    .main {
+        padding-left: 0;
+        padding-right: 0;
+    }
 }
 
 @media (max-width: 1198px) {
     .container-fluid {
-        padding:0;
+        padding: 0;
     }
   
     .display-up-1198-webmail {
@@ -41,47 +21,57 @@
 
 }
 
-@media (min-width: 1198px) { 
-
-}
-
 /* GENERAL */
 
-#rightcol { 
-    position: fixed;
+.main {
+    position: absolute;
     top: 51px;
+    left: 0;
+    right: 0;
     bottom: 0;
+    overflow-x: hidden;
+}
+
+#listing {
+    position: absolute;
+    top: 75px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-left: 15px;
+    padding-right: 15px;
 }
 
 #folders {
-    position: absolute;
     top: 73px;
     left: 15px;
     right: 15px;
-    overflow-x: hidden;
+    overflow-x: auto;
     overflow-y: auto;
 }
 
-#folders .ui-resizable-handle {
+.sidebar .ui-resizable-handle {
     background-position: center center;
     background-repeat: no-repeat;
 }
 
-#folders .ui-resizable-n {
+.sidebar .ui-resizable-n {
     top: 0px;
 }
 
-#folders .ui-resizable-s {
+.sidebar .ui-resizable-s {
     bottom: 0px;
 }
 
-#folders .ui-resizable-e {
+.sidebar .ui-resizable-e {
     right: 0px;
     background-image: url("../../pics/grippy.png");
     width: 8px;
 }
 
-#folders .ui-resizable-w {
+.sidebar .ui-resizable-w {
     left: 0px;
     background-image: url("../../pics/grippy.png");
     width: 8px;
@@ -93,12 +83,12 @@
 }
 
 .nav-sidebar li li { 
-    margin-left: 10px;
+    padding-left: 10px;
 }
 
 #mboxes_container a[name=loadfolder] {
     white-space: nowrap;
-    overflow: hidden;
+    overflow: auto;
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
 }
@@ -117,7 +107,9 @@
 
 #left-toolbar { 
     position: absolute;
+    margin-left: 0px;
     width: 100%;
+    left: 0;
     bottom: 0;
 }
 
@@ -135,21 +127,12 @@
 }
 
 
-/*
- * TOP NAVBAR
- */
-
-.navbar-header{
-    display: inline-block;
-}
-
 /*
  * Mailboxes list
  */
 .email {
     border-top: 1px solid #ddd;
     padding-top: 10px;
-   
 }
 
 div.email:hover { 
@@ -170,7 +153,7 @@ div.email:hover {
 
 div.clickbox {
     position: absolute;
-    left: 15px;
+    left: 10px;
     top: 5px;
     width: 14px;
     height: 14px;
@@ -187,7 +170,7 @@ div.expanded {
     background-repeat: no-repeat;
 }
 
-div#leftcol #mboxes_container .nav .droppable div.clickbox {
+#mboxes_container .nav .droppable div.clickbox {
     z-index: 800;
 }
 
@@ -301,13 +284,12 @@ list {
 
 
 /*
- *Action buttons
+ * Action buttons
  */
 
-#menubar { 
-    position: absolute;
-    top: 0;
-    padding-top: 20px;
+#menubar {
+    padding-left: 15px;
+    padding-bottom: 20px;
     z-index: 100;
 }
 
@@ -319,14 +301,3 @@ list {
     margin: 0px;
 }
 
-#rightcol #menubar #searchbox #searchfield{
-    margin-left:5px;
-}
-
-#menubar .sm-margin-left-back{
-    margin-left: 6px;
-}
-
-#menubar .md-margin-left-back{
-    margin-left: 16px;
-}
diff --git a/modoboa/extensions/webmail/static/webmail/js/webmail.js b/modoboa/extensions/webmail/static/webmail/js/webmail.js
index ce737b638..be8c40f13 100644
--- a/modoboa/extensions/webmail/static/webmail/js/webmail.js
+++ b/modoboa/extensions/webmail/static/webmail/js/webmail.js
@@ -56,45 +56,22 @@ Webmail.prototype = {
             $this.data("original_menu").removeAttr("style");
         });
 
-        /*$("#mboxactions").css({
-            bottom: $("#bottom-bar").outerHeight(true) + "px"
-        });*/
-
-        /* Responsive -> on resizing folders (leftcol) */
-        // $("#folders").resizable({
-        //     start: function(event, ui) {
-        //         $('#listing iframe').css('pointer-events','none');
-        //     },
-        //     handles: "e",
-        //     minWidth: $("#folders").width(),
-        //     maxWidth: 400,
-        //     stop: function(event, ui) {
-        //         $('#listing iframe').css('pointer-events','auto');
-        //     }
-        // });
-
-        // $("#folders").resizable({
-        //     resize: function(event, ui) {
-        //         if ($(window).width() > 1198) {
-        //             var width = ui.size.width;
-        //             /*$("#rightcol").css({
-        //                 marginLeft: width + 'px'
-        //             });*/
-        //             $("#folders").css({
-        //                 width : width + 'px'
-        //             });
-        //             /*$("#rightcol").css({
-        //                 paddingRight: width - 110 + 'px'
-        //             });
-        //             if ($(window).width() < 1800) {
-        //                 $("#rightcol").css({
-        //                     paddingRight: width - 110 + 'px'
-        //                 });
-        //             }*/
-        //         }
-        //     }
-        // });
-        /* end Responsive */
+        $(".sidebar").resizable({
+            start: function(event, ui) {
+                $('#listing iframe').css('pointer-events', 'none');
+            },
+            handles: "e",
+            minWidth: $(".sidebar").width(),
+            maxWidth: 400,
+            stop: function(event, ui) {
+                $('#listing iframe').css('pointer-events', 'auto');
+            },
+            resize: function(event, ui) {               
+                $(".main").css({
+                    marginLeft: ui.size.width + "px"
+                });
+            }
+        });
 
         this.resize();
 
@@ -247,11 +224,11 @@ Webmail.prototype = {
             $("#left-toolbar").offset().top - $("#folders").offset().top
         );
 
-        if ($window.width() > 1198) {
-            // $("#folders").css({
-            //     width: this.options.mboxes_col_width + 'px'
-            // });
-        }
+        // if ($window.width() <= 768) {        
+        //     $(".main").css("margin-left", "0");
+        // } else {
+        //     $(".main").css("margin-left", $(".sidebar").width() + "px");
+        // }
         if (current_action == "compose") {
             this.resize_compose_body();
         }
@@ -1043,7 +1020,7 @@ Webmail.prototype = {
         });
         this.htmltable = $("#emails").data("htmltable");
         this.init_draggables();
-        $("#listing").css("overflow", "auto");
+        $("#listing").css("overflow-y", "auto");
         if (this.navobject.hasparam("reset_page")) {
             this.navobject.delparam("reset_page").update(false, true);
         }
@@ -1096,7 +1073,7 @@ Webmail.prototype = {
      */
     viewmail_callback: function(resp) {
         this.page_update(resp);
-        $("#listing").css("overflow", "hidden");
+        $("#listing").css("overflow-y", "hidden");
         $("a[name=back]").click($.proxy(function(e) {
             e.preventDefault();
             this.go_back_to_listing();
diff --git a/modoboa/extensions/webmail/templates/webmail/compose.html b/modoboa/extensions/webmail/templates/webmail/compose.html
index 555d5f402..4fb607529 100644
--- a/modoboa/extensions/webmail/templates/webmail/compose.html
+++ b/modoboa/extensions/webmail/templates/webmail/compose.html
@@ -2,10 +2,11 @@
 
 <form class="form-horizontal" method="POST" action="{{ posturl }}" id="composemail">
   {% csrf_token %}
-  <div id="compose-container" class="col-lg-12">
+
+  <div id="compose-container">
     <div id="mailheader">
       <div class="form-group{% if form.errors.to %} has-error{% endif %}">
-        <label class="col-sm-1 control-label" for="id_to">{% trans "To:" %}</label>
+        <label class="col-sm-1 control-label" for="id_to">{% trans "To" %}</label>
         <div class="col-sm-8">
           <input id="id_to" name="to" class="form-control" value="{% if form.to.value %}{{ form.to.value }}{% endif %}"{% if form.to.errors %} placeholder="{% for error in form.to.errors %}{{ error }}{% endfor %}"{% endif %}>
         </div>
@@ -26,17 +27,17 @@
       {% render_field form.subject label_width="col-sm-1" %}
       
     </div>
-
+    
     <div id="body_container">
-    {% if body %}
-    <textarea id="id_body" name="body" class="form-control editor">{% if bodyheader %}{{ bodyheader }}{% endif %}
-      {{ body }}
-    </textarea>
-    {% else %}
-    <textarea id="id_body" name="body" class="form-control editor"></textarea>
-    {% endif %}
+      {% if body %}
+      <textarea id="id_body" name="body" class="form-control editor">{% if bodyheader %}{{ bodyheader }}{% endif %}
+        {{ body }}
+      </textarea>
+      {% else %}
+      <textarea id="id_body" name="body" class="form-control editor"></textarea>
+      {% endif %}
+    </div>
   </div>
 
-  </div>
 </form>
 
diff --git a/modoboa/extensions/webmail/templates/webmail/index.html b/modoboa/extensions/webmail/templates/webmail/index.html
index 3bc8c5418..4982b1985 100644
--- a/modoboa/extensions/webmail/templates/webmail/index.html
+++ b/modoboa/extensions/webmail/templates/webmail/index.html
@@ -1,4 +1,4 @@
-{% extends "fixed.html" %}{% load i18n lib_tags webmail_tags %}{% load url from future %}
+{% extends "twocols.html" %}{% load i18n lib_tags webmail_tags %}{% load url from future %}
 {% block pagetitle %}Webmail{% endblock %}
 {% block html_head %}
 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery-ui.css" />
@@ -32,51 +32,40 @@ $(document).ready(function() {
 </script>
 {% endblock %}
 
-{% block fixed_content %}
-<div class="row">
-  <div id="leftcol" class="col-xs-0 col-sm-3 col-lg-2 sidebar">
-    <div class="leftcol-heading text-center">
-      <a name="compose" class="btn btn-success btn-lg" href="compose">
-        <span class="fa fa-edit"></span>
-        {% trans "Compose" %}
-      </a>
-    </div>
+{% block leftcol %}
+<div class="leftcol-heading text-center">
+  <a name="compose" class="btn btn-success btn-lg" href="compose">
+    <span class="fa fa-edit"></span>
+    {% trans "Compose" %}
+  </a>
+</div>
 
-    <div id="folders" class="row">
-      <div class="col-sm-12">
-        {{ mboxes }}
-      </div>
-    </div>
+<div id="folders">
+  {{ mboxes }}
+</div>
 
-
-    <div id="left-toolbar" class="row">
-      <div class="col-sm-2">
-        <div id="mboxactions" class="btn-group dropup">
-          <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-            <span class="fa fa-cog"></span>
-          </button>
-          {% mboxes_menu %}
-        </div>
-      </div>
-      {% if quota != -1 %}
-      <div id="quotabox" class="col-sm-10">
-        <div id="quotabar" class="progress">
-          <div class="progress-bar {% progress_color quota %}" role="progressbar" style="width: {{ quota }}%" aria-valuenow="{{ quota }}" aria-valuemin="0" aria-valuemax="100">{{ quota }}%</div>
-        </div>
-      </div>
-      {% endif %}
-
-    </div>
-    
-  </div>
-  <div id="rightcol" class="col-lg-offset-2 col-lg-10 col-md-offset-3 col-md-9 col-sm-offset-3 col-sm-9 col-xs-12">
-    <div class="row">
-      <div id="menubar" role="navbar" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
-    </div>
-    <div class="row">
-    <div id="listing" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
+<div id="left-toolbar" class="row">
+  <div class="col-sm-2">
+    <div id="mboxactions" class="btn-group dropup">
+      <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+        <span class="fa fa-cog"></span>
+      </button>
+      {% mboxes_menu %}
     </div>
   </div>
+  {% if quota != -1 %}
+  <div id="quotabox" class="col-sm-10">
+    <div id="quotabar" class="progress">
+      <div class="progress-bar {% progress_color quota %}" role="progressbar" style="width: {{ quota }}%" aria-valuenow="{{ quota }}" aria-valuemin="0" aria-valuemax="100">{{ quota }}%</div>
+    </div>
+  </div>
+  {% endif %}
 </div>
 {% endblock %}
 
+{% block apparea %}
+<div id="menubar" role="navbar"></div>
+<div id="listing"></div>
+
+{% endblock %}
+
diff --git a/modoboa/extensions/webmail/templates/webmail/main_action_bar.html b/modoboa/extensions/webmail/templates/webmail/main_action_bar.html
index 627b71a32..9a520d7ea 100644
--- a/modoboa/extensions/webmail/templates/webmail/main_action_bar.html
+++ b/modoboa/extensions/webmail/templates/webmail/main_action_bar.html
@@ -1,13 +1,9 @@
 {% extends "common/buttons_list.html" %}{% load i18n %}
 
 {% block before_menubar %}
-<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
+<div class="col-xs-5">
   {% include "common/email_searchbar.html" with extraopts=extraopts %}
 </div>
 {% endblock %}
 
-{% block menubar_classes %}col-lg-2{% endblock %}
-
-{% block after_menubar %}
-<div id="pagination" class="col-lg-2"></div>
-{% endblock %}
+{% block menubar_classes %}col-xs-7{% endblock %}
diff --git a/modoboa/extensions/webmail/templatetags/webmail_tags.py b/modoboa/extensions/webmail/templatetags/webmail_tags.py
index 238bad08a..576fe7d04 100644
--- a/modoboa/extensions/webmail/templatetags/webmail_tags.py
+++ b/modoboa/extensions/webmail/templatetags/webmail_tags.py
@@ -18,11 +18,9 @@ def viewmail_menu(selection, folder, user, mail_id=None):
     """Menu of the viewmail location."""
     entries = [
         {"name": "back",
-         # "url": reverse("modoboa.extensions.webmail.views.index")
-         # + "#?action=listmailbox&mbox=%s" % folder,
          "url": "javascript:history.go(-1)",
          "img": "fa fa-arrow-left",
-         "class": "btn-default sm-margin-left-back",
+         "class": "btn-default",
          "label": _("Back")},
         {"name": "reply",
          "url": "action=reply&mbox=%s&mailid=%s" % (folder, mail_id),
@@ -71,7 +69,7 @@ def compose_menu(selection, backurl, user, **kwargs):
         {"name": "back",
          "url": "javascript:history.go(-2);",
          "img": "fa fa-arrow-left",
-         "class": "md-margin-left-back btn-default",
+         "class": "btn-default",
          "label": _("Back")},
         {"name": "sendmail",
          "url": "",
diff --git a/modoboa/static/css/custom.css b/modoboa/static/css/custom.css
index b6b66edb4..aa6cd5f7e 100644
--- a/modoboa/static/css/custom.css
+++ b/modoboa/static/css/custom.css
@@ -13,20 +13,19 @@
 
 @media (max-width: 768px) {
 
-     .navbar .navbar-header,
-
      tr th#tags,
      td[name="tags"] {
          display: none;
      }
-     button.navbar-toggle[data-target="#navigate-navbar-collapse"]{
-         margin-left: 20px;
-     }
 
-     .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
-         margin-left: 0;
-         margin-right: 0;
-     }
+     /* button.navbar-toggle[data-target="#navigate-navbar-collapse"]{ */
+     /*     margin-left: 20px; */
+     /* } */
+
+     /* .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { */
+     /*     margin-left: 0; */
+     /*     margin-right: 0; */
+     /* } */
 
 }
 
@@ -46,23 +45,33 @@
 @media (min-width: 768px) {
 
     .sidebar {
-        position: fixed;
+        position: fixed !important;
         top: 51px;
         bottom: 0;
         left: 0;
+        width: 250px;
         z-index: 1000;
         display: block;
-        padding: 20px 15px;
-        overflow-x: hidden;
-        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+        padding: 15px 0;
+        overflow: auto;
         background-color: #f5f5f5;
         border-right: 1px solid #ddd;
     }
 
+    .main {
+        position: relative;
+        margin-left: 250px;
+    }
+
 }
 
  /* --------- general --------- */
 
+.container-fluid { 
+    padding-left: 0;
+    padding-right: 0;
+}
+
 /* Form */
 
 #uprefs_content input[type="checkbox"],
@@ -82,18 +91,13 @@
 
 /* Colapse Nav */
 
-.navbar-inverse .navbar-toggle {
-    border-color: #999999;
-}
-
-.navbar-inverse .navbar-toggle span{
+.navbar-inverse .navbar-toggle span {
     color: white;
 }
 
-.navbar-toggle{
-    background-color: #000;
+.navbar-toggle {
+    margin-top: 4px;
     margin-bottom: 4px;
-    margin-top: 2px;
 }
 
 
@@ -180,9 +184,9 @@ label {
     display: none;
 }
 
-div#navigate-navbar-collapse.navbar-collapse{
-    z-index: 9999;
-}
+/* div#navigate-navbar-collapse.navbar-collapse { */
+/*     z-index: 9999; */
+/* } */
 html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse ul.nav li.dropdown a.dropdown-toggle{
     color: white;
 }
@@ -191,12 +195,12 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
 
 /* Sidebar navigation */
 .nav-sidebar {
-    margin-right: -21px; /* 20px padding + 1px border */
-    margin-left: -20px;
+    /*margin-right: -21px;
+    margin-left: -20px;*/
 }
 .nav-sidebar li > a {
-    padding-right: 20px;
-    padding-left: 20px;
+    /*padding-right: 20px;
+    padding-left: 20px;*/
 }
 
 .nav-sidebar > li > a:hover { 
@@ -227,7 +231,7 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
  }
 
 .main { 
-    padding: 20px;
+    padding: 20px 15px;
 }
 
  /* listing */
@@ -273,6 +277,6 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
 
  /* settings */
 
- .container-fluid #uprefs_content .form-horizontal .form-actions{
+ .container-fluid #uprefs_content .form-horizontal .form-actions {
      margin-right: 16px;
  }
\ No newline at end of file
diff --git a/modoboa/templates/common/buttons_list.html b/modoboa/templates/common/buttons_list.html
index d0c0b93a3..9dae979d6 100644
--- a/modoboa/templates/common/buttons_list.html
+++ b/modoboa/templates/common/buttons_list.html
@@ -3,7 +3,7 @@
 <!-- Brand and toggle get grouped for better mobile display -->
 <div class="row">
   {% block before_menubar %}{% endblock %}
-  <div class="btn-toolbar {{ extraclasses }}{% block menubar_classes %}col-xs-12 col-sm-12{% endblock %}">
+  <div class="btn-toolbar {{ extraclasses }} {% block menubar_classes %}col-xs-12{% endblock %}">
     {% for entry in entries %}
     <div class="btn-group">
       {% if entry.menu %}
diff --git a/modoboa/templates/fluid.html b/modoboa/templates/fluid.html
index 05ece2737..0ccd67788 100644
--- a/modoboa/templates/fluid.html
+++ b/modoboa/templates/fluid.html
@@ -1,8 +1,6 @@
 {% extends "nlayout.html" %}
 {% block content %}
 <div class="container-fluid">
-  <div class="row">
-    {% block rowcontent %}{% endblock %}
-  </div>
+  {% block container_content %}{% endblock %}
 </div>
 {% endblock %}
diff --git a/modoboa/templates/nlayout.html b/modoboa/templates/nlayout.html
index 01bee0b99..573f31137 100644
--- a/modoboa/templates/nlayout.html
+++ b/modoboa/templates/nlayout.html
@@ -43,14 +43,17 @@
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <button class="navbar-toggle" data-target="#navigate-navbar-collapse" data-toggle="collapse" type="button">
+          <button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
             <span class="sr-only">Toggle navigation</span>
-            <span class="">{% trans "Menu" %}</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
           </button>
         </div>
 
-        <div id="navigate-navbar-collapse" class="collapse navbar-collapse">
-          <ul class="nav navbar-nav display-less-1198">
+        <div id="navigate-navbar-collapse" class="navbar-collapse collapse">
+
+          <!--<ul class="nav navbar-nav display-less-1198">
             <li class="droppable active ui-droppable" name="INBOX">
               <a class="block" name="loadfolder" href="INBOX">
                 <i class="fa fa-inbox"></i>
@@ -81,10 +84,14 @@
                 Trash
               </a>
             </li>
-          </ul>
-          <ul class="nav navbar-nav display-up-1198-webmail">{% if selection %}
-            {% extensions_menu selection user %}{% core_menu selection user %}
-            {% else %}{% extensions_menu "" user %}{% core_menu "" user %}{% endif %}
+          </ul> -->
+
+          <ul class="nav navbar-nav">
+            {% if selection %}
+              {% extensions_menu selection user %}{% core_menu selection user %}
+            {% else %}
+              {% extensions_menu "" user %}{% core_menu "" user %}
+            {% endif %}
             {% load_optionalmenu user %}
             <li class="divider"></li>
           </ul>
@@ -96,20 +103,6 @@
       </div>
     </div>
     {% block content %}{% endblock %}
-    <!--<div id="bottom-bar" class="navbar navbar-inverse navbar-fixed-bottom">
-      <div class="container-fluid">
-        <div id="bottom-bar-left" class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
-          {% block footerleft %}{% endblock %}
-        </div>
-        <div id="bottom-bar-middle" class="col-lg-4 col-md-4 col-sm-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>-->
 
   </body>
 </html>
diff --git a/modoboa/templates/twocols.html b/modoboa/templates/twocols.html
index 6be22bac1..f71b19ab0 100644
--- a/modoboa/templates/twocols.html
+++ b/modoboa/templates/twocols.html
@@ -1,10 +1,12 @@
 {% extends "fluid.html" %}
+
 {% load core_tags %}
-{% block rowcontent %}
-<div class="col-md-2 col-sm-3 col-xs-12 sidebar">
+
+{% block container_content %}
+<div class="sidebar">
   {% block leftcol %}{% endblock %}
 </div>
-<div class="main col-lg-offset-2 col-lg-10 col-md-offset-2 col-md-10 col-sm-offset-3 col-sm-9 col-xs-12">
+<div class="main">
   {% if messages %}{% display_messages messages %}{% endif %}
   {% block apparea %}{% endblock %}
 </div>