Add new buttons "previous" and "next" page for the webmail for small screens

modoboa/extensions/webmail/static/webmail/css/webmail.css

@@ -1,40 +1,56 @@
+@media (max-width: 400px) {
+    td#subject,
+    td[name='subject']
+    {
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
 
 @media (max-width: 500px) {
+    th#date,
+    td[name="date"],
     #menubar .Actions{
         display: none;
     }
-
 }
 
 @media (max-width: 770px) {
     #searchbox{
         margin-left: 20px;
     }
-    td[name="date"] {
-        display: none;
+}
+
+@media (max-width: 1198px) {
+    th#date,
+    td[name="date"]{
+        max-width: 60px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
     .navbar .display-less-1198{
         display: inherit;
     }
-}
-
-@media (min-width: 770px) and (max-width: 1198px) {
-    .navbar .display-less-1198{
-        display: inline-block;
+    th#withatts,
+    td[name="withatts"],
+    th#drag,
+    td[name="drag"]{
+        display: none;
     }
-}
-
-@media (max-width: 1198px) {
     #leftcol.leftcol-display-none{
         display: none;
     }
     .display-up-1198{
         display: none;
     }
+
 }
 
 body, html {
-    overflow: hidden; 
+    overflow: hidden;
     height: 100%;
 }
 
@@ -72,7 +88,7 @@ body, html {
     width: 8px;
 }
 
-#mboxes_container { 
+#mboxes_container {
     overflow: auto;
 }
 
@@ -95,36 +111,49 @@ body, html {
     height: 100%;
 }
 
-.unseen { 
+.unseen {
     font-weight: bold;
 }
 
-td[name="date"] { 
+td[name="date"] {
     text-align: right;
 }
 
-#quotabar { 
+#quotabar {
     margin: 12px 0 0 15px;
     width: 200px;
 }
 
-#quotaraw { 
+#quotaraw {
     margin-left: 10px;
 }
 
+/*
+ * Top navbar
+ */
+
+.navbar-header{
+    display: inline-block;
+}
+.navbar .btn-link:hover,
+.navbar .btn-link:focus{
+    text-decoration: none;
+}
+
+
 /*
  * Mailboxes list
  */
-#mboxactions { 
+#mboxactions {
     position: fixed;
     padding-left: 14px;
 }
 
-#mboxactions .btn-toolbar { 
+#mboxactions .btn-toolbar {
     margin-bottom: 0px;
 }
 
-#folders li { 
+#folders li {
     position: relative;
 }
 
@@ -186,23 +215,23 @@ li.droppable li{
     padding-bottom: 5px;
 }
 
-#mailheader input { 
+#mailheader input {
     width: 99%;
     padding: 2px 0;
 }
 
-#mailheader textarea { 
+#mailheader textarea {
     width: 99%;
     height: 40px;
     padding: 2px 0;
 }
 
-#mailheader label { 
+#mailheader label {
     text-align: left;
 }
 
 #mailheader .options {
-    margin-left: 180px;
+    margin-bottom: 8px;
 }
 
 #add_cc {
@@ -240,7 +269,7 @@ li.droppable li{
 /*
  * Attachments form
  */
-#submit { 
+#submit {
     margin: 0 auto;
 }
 
@@ -253,7 +282,7 @@ li.droppable li{
 }
 
 #attachment_list i,
-#attachment_list label { 
+#attachment_list label {
     float: left;
 }
 
@@ -275,12 +304,12 @@ li.droppable li{
 /*
  * Folder form
  */
-.modal-body { 
+.modal-body {
     max-height: 300px;
     overflow-y: auto;
 }
 
-#folders2 li { 
+#folders2 li {
     position: relative;
 }
 
@@ -301,9 +330,6 @@ td[class*=openable] {
     margin-left: 1px;
     margin-right: 1px;
 }
-.action-buttons {
-    margin-bottom: 10px;
-}
 
 #menubar .btn-toolbar ul.navbar-right{
     margin-right: 3%;
@@ -313,6 +339,10 @@ td[class*=openable] {
     margin: 0px;
 }
 
+#rightcol #menubar #searchbox #searchfield{
+    margin-left:5px;
+}
+
 /* send mail */
 
 #body_container{

modoboa/templates/nlayout.html

@@ -34,10 +34,12 @@
                     <span class="sr-only">Toggle navigation</span>
                     <span class="">Mailbox</span>
                 </button>
-                <button class="navbar-toggle" data-target="#action" data-toggle="collapse" type="button">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span> Page </span>
-                </button>
+            </div>
+            <div class="display-less-1198 pull-right">
+                <a href="{{ baseurl }}page={{ page.previous_page_number }}" class="btn btn-lg btn-link glyphicon glyphicon-chevron-left" type="button">
+                </a>
+                <a href="{{ baseurl }}page={{ page.next_page_number }}" class="btn btn-lg btn-link glyphicon glyphicon-chevron-right" type="button">
+                </a>
             </div>
             <div id="navigate-navbar-collapse" class="collapse navbar-collapse">
                 <ul class="nav navbar-nav display-less-1198">
@@ -87,9 +89,8 @@
         </div>
     </div>
     {% block content %}{% endblock %}
-    <div id="action" class="collapse navbar-collapse nav-bottom">
-    <div id="bottom-bar" class="navbar navbar-inverse navbar-fixed-bottom">
-        <div class="navbar-inner">
+    <div class="display-up-1198 nav-bottom">
+        <div id="bottom-bar" class="navbar navbar-inverse navbar-fixed-bottom">
             <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-0 col-xs-offset-0">
@@ -103,6 +104,5 @@
             </div>
         </div>
     </div>
-    </div>
   </body>
 </html>