[Web] Make mobile usage less annoying; anchors for maps; sidebar for maps

data/web/admin.php

@@ -11,7 +11,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
 ?>
 <div class="container">
 
-  <ul class="nav nav-tabs" role="tablist">
+  <ul class="nav nav-tabs nav-justified" role="tablist">
     <li role="presentation" class="active"><a href="#tab-access" aria-controls="tab-access" role="tab" data-toggle="tab"><?=$lang['admin']['access'];?></a></li>
     <li role="presentation"><a href="#tab-config" aria-controls="tab-config" role="tab" data-toggle="tab"><?=$lang['admin']['configuration'];?></a></li>
     <li role="presentation"><a href="#tab-routing" aria-controls="tab-routing" role="tab" data-toggle="tab"><?=$lang['admin']['routing'];?></a></li>
@@ -350,7 +350,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
 
   <div role="tabpanel" class="tab-pane" id="tab-config">
     <div class="row">
-    <div id="sidebar-admin-config" class="col-sm-2 hidden-xs">
+    <div id="sidebar-admin-config" class="col-sm-3 hidden-xs">
       <div id="scrollbox-config" class="list-group">
         <a href="#dkim" class="list-group-item"><?=$lang['admin']['dkim_keys'];?></a>
         <a href="#fwdhosts" class="list-group-item"><?=$lang['admin']['forwarding_hosts'];?></a>
@@ -362,7 +362,7 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
         <a href="#top" class="list-group-item" style="border-top:1px dashed #dadada">↸ <?=$lang['admin']['to_top'];?></a>
       </div>
     </div>
-    <div class="col-sm-10">
+    <div class="col-sm-9">
     <span class="anchor" id="dkim"></span>
     <div class="panel panel-default">
       <div class="panel-heading"><?=$lang['admin']['dkim_keys'];?></div>
@@ -1168,10 +1168,20 @@ if (!isset($_SESSION['gal']) && $license_cache = $redis->Get('LICENSE_STATUS_CAC
           <span class="anchor" id="regexmaps"></span>
           <h4>Regex Maps</h4>
           <p><?=$lang['admin']['rspamd_global_filters_regex'];?></p>
+          <ul>
+          <?php
+          foreach ($RSPAMD_MAPS['regex'] as $rspamd_regex_desc => $rspamd_regex_map):
+          ?>
+          <li><a href="#<?=$rspamd_regex_map;?>"><?=$rspamd_regex_desc;?></a> (<small><?=$rspamd_regex_map;?></small>)</li>
+          <?php
+          endforeach;
+          ?>
+          </ul>
           <?php
           foreach ($RSPAMD_MAPS['regex'] as $rspamd_regex_desc => $rspamd_regex_map):
           ?>
           <hr>
+          <span class="anchor" id="<?=$rspamd_regex_map;?>"></span>
           <form class="form-horizontal" data-id="<?=$rspamd_regex_map;?>" role="form" method="post">
             <div class="form-group">
               <label class="control-label col-sm-3" for="<?=$rspamd_regex_map;?>"><?=$rspamd_regex_desc;?><br><small><?=$rspamd_regex_map;?></small></label>

data/web/css/site/admin.css

@@ -77,3 +77,7 @@ table tbody tr {
 table tbody tr td input[type="checkbox"] {
   cursor: pointer;
 }
+.nav-tabs>li>a:hover, .nav-tabs>li>a:focus, .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus, .nav-tabs .open>a, .nav-tabs .open>a:hover, .nav-tabs .open>a:focus {
+  padding-bottom: 10px;
+  margin-top: 6px;
+}

data/web/css/site/debug.css

@@ -11,7 +11,7 @@ table.footable>tbody>tr.footable-empty>td {
 .table-responsive {
   overflow: visible !important;
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 1280px) {
   .table-responsive {
     overflow-x: scroll !important;
   }

data/web/css/site/mailbox.css

@@ -59,3 +59,7 @@ table tbody tr {
 table tbody tr td input[type="checkbox"] {
   cursor: pointer;
 }
+.nav-tabs>li>a:hover, .nav-tabs>li>a:focus, .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus, .nav-tabs .open>a, .nav-tabs .open>a:hover, .nav-tabs .open>a:focus {
+  padding-bottom: 10px;
+  margin-top: 6px;
+}

data/web/js/site/admin.js

@@ -442,6 +442,22 @@ jQuery(function($){
   });
 });
 $(window).load(function(){
+  $('.sidebar').affix({
+        offset: {
+            top: 0
+        }
+    }).on('affix.bs.affix',function(){
+        setAffixContainerSize();
+    });
+
+    /*Setting the width of the sidebar (I took 10px of its value which is the margin between cols in my Bootstrap CSS*/
+    function setAffixContainerSize(){
+        $('.sidebar').width($('.sidebar').parent().innerWidth()-10);
+    }
+
+    $(window).resize(function(){
+        setAffixContainerSize();
+    });
   initial_width_config = $("#sidebar-admin-config").width();
   initial_width_maps = $("#sidebar-admin-maps").width();
   $("#scrollbox-config").css("width", initial_width_config);

data/web/mailbox.php

@@ -7,7 +7,7 @@ $_SESSION['return_to'] = $_SERVER['REQUEST_URI'];
 ?>
 <div class="container">
 
-  <ul class="nav nav-tabs" role="tablist">
+  <ul class="nav nav-tabs nav-justified" role="tablist">
     <li role="presentation" class="active"><a href="#tab-domains" aria-controls="tab-domains" role="tab" data-toggle="tab"><?=$lang['mailbox']['domains'];?></a></li>
     <li role="presentation"><a href="#tab-mailboxes" aria-controls="tab-mailboxes" role="tab" data-toggle="tab"><?=$lang['mailbox']['mailboxes'];?></a></li>
     <li role="presentation"><a href="#tab-resources" aria-controls="tab-resources" role="tab" data-toggle="tab"><?=$lang['mailbox']['resources'];?></a></li>