Fix various Bootstrap container/row/column abuses resulting in broken layouts

Every column has to be in a row, and every row has to be in a container (except
where a row is nested directly within a column).

This also includes a change to index.html that pushes the footer to the bottom
of the page on those where it otherwise wouldn't be.

management/templates/aliases.html

@@ -1,8 +1,13 @@
+<div class="container-fluid">
+
     <style>
         #alias_table .actions > * { padding-right: 3px; }
         #alias_table .alias-required .remove { display: none }
     </style>
 
+    <div class="row">
+        <div class="col-sm-12">
+
             <h2>Aliases</h2>
 
             <h3>Add a mail alias</h3>
@@ -52,7 +57,7 @@
             </tbody>
             </table>
 
-<p style="margin-top: 1.5em"><small>Hostmaster@, postmaster@, and admin@ email addresses are required on some domains.</small></p>
+            <p style="margin-top: 1.5em"><small>Hostmaster@, postmaster@ and admin@ email addresses are required on some domains.</small></p>
 
             <div style="display: none">
                 <table>
@@ -71,6 +76,8 @@
                 </table>
             </div>
 
+        </div>
+    </div>
 
     <script>
     function show_aliases() {
@@ -189,10 +196,6 @@ function aliases_remove(elem) {
             });
         });
     }
-
-function scroll_top() {
-        $('html, body').animate({
-            scrollTop: $("#panel_aliases").offset().top
-        }, 1000);
-}
     </script>
+
+</div>

management/templates/custom-dns.html

@@ -1,5 +1,6 @@
-<style>
+<div class="container-fluid">
-</style>
+    <div class="row">
+        <div class="col-sm-12">
 
             <h2>Custom DNS</h2>
 
@@ -68,6 +69,9 @@ curl -d "" --user me@mydomain.com:###### https://{{hostname}}/admin/dns/set/bar.
             curl -d "value=something%20here" --user me@mydomain.com:###### https://{{hostname}}/admin/dns/set/foo.mydomain.com/txt
             </pre>
 
+        </div>
+    </div>
+
     <script>
     function show_custom_dns() {
      api(
@@ -97,3 +101,5 @@ function do_set_secondary_dns() {
         });
     }
     </script>
+
+</div>

management/templates/external-dns.html

@@ -1,3 +1,5 @@
+<div class="container-fluid">
+
     <style>
         #external_dns_settings .heading td {
             font-weight: bold;
@@ -25,6 +27,9 @@
         }
     </style>
 
+    <div class="row">
+        <div class="col-sm-12">
+
             <h2>External DNS</h2>
 
             <p class="text-warning">This is an advanced configuration page.</p>
@@ -45,6 +50,9 @@
                 </tbody>
             </table>
 
+        </div>
+    </div>
+
     <script>
     function show_external_dns() {
       $('#external_dns_settings tbody').html("<tr><td colspan='2' class='text-muted'>Loading...</td></tr>")
@@ -75,3 +83,5 @@ function show_external_dns() {
         })
     }
     </script>
+
+</div>

management/templates/index.html

@@ -21,9 +21,39 @@
                 overflow-y: scroll;
             }
 
+            html,
+            body {
+                height: 100%;
+            }
+
+            #wrap {
+                min-height: 100%;
+                height: auto !important;
+                height: 100%;
+                margin: 0 auto -50px;
+            }
+
+            #push,
+            #footer {
+                height: 50px;
+            }
+
+            @media (max-width: 767px) {
+                #footer {
+                    margin-left: -20px;
+                    margin-right: -20px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                }
+            }
+
             body {
                 padding-top: 50px;
-                padding-bottom: 20px;
+            }
+            footer {
+                padding-top: 10px;
+                font: bold italic medium;
+                border-top: 1px solid #e5e5e5;
             }
 
             p {
@@ -73,6 +103,7 @@
         <!--[if lt IE 7]>
             <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
         <![endif]-->
+        <div id="wrap">
           <div class="navbar navbar-inverse navbar-fixed-top">
             <div class="container">
               <div class="navbar-header">
@@ -115,20 +146,22 @@
             </div>
           </div>
 
-    <div class="container-fluid">
+          <div class="container">
-      <div id="panel_system_status" class="container panel">
+            <div class="row">
+              <div class="col-sm-12">
+                <div id="panel_system_status" class="panel">
                 {% include "system-status.html" %}
                 </div>
 
-      <div id="panel_system_backup" class="container panel">
+                <div id="panel_system_backup" class="panel">
                 {% include "system-backup.html" %}
                 </div>
 
-      <div id="panel_external_dns" class="container panel">
+                <div id="panel_external_dns" class="panel">
                 {% include "external-dns.html" %}
                 </div>
 
-      <div id="panel_custom_dns" class="container panel">
+                <div id="panel_custom_dns" class="panel">
                 {% include "custom-dns.html" %}
                 </div>
 
@@ -136,36 +169,45 @@
                 {% include "login.html" %}
                 </div>
 
-      <div id="panel_mail-guide" class="container panel">
+                <div id="panel_mail-guide" class="panel">
                 {% include "mail-guide.html" %}
                 </div>
 
-      <div id="panel_users" class="container panel">
+                <div id="panel_users" class="panel">
                 {% include "users.html" %}
                 </div>
 
-      <div id="panel_aliases" class="container panel">
+                <div id="panel_aliases" class="panel">
                 {% include "aliases.html" %}
                 </div>
 
-      <div id="panel_sync_guide" class="container panel">
+                <div id="panel_sync_guide" class="panel">
                 {% include "sync-guide.html" %}
                 </div>
 
-      <div id="panel_web" class="container panel">
+                <div id="panel_web" class="panel">
                 {% include "web.html" %}
                 </div>
 
-      <div id="panel_ssl" class="container panel">
+                <div id="panel_ssl" class="panel">
                 {% include "ssl.html" %}
                 </div>
-
+              </div>
-      <hr>
+            </div>
-
+            <div id="push"></div>
+          </div>
+        </div>
+        <div id="footer">
+          <div class="container">
+            <div class="row">
+              <div class="col-sm-12">
                 <footer>
                   <p>This is a <a href="https://mailinabox.email">Mail-in-a-Box</a>.</p>
                 </footer>
-    </div> <!-- /container -->
+              </div>
+            </div>
+          </div>
+        </div>
 
         <div id="ajax_loading_indicator" style="display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; background-color: rgba(255,255,255,.75)">
           <div style="margin: 20% auto">

management/templates/login.html

@@ -1,19 +1,27 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+
             <h1 style="margin: 1em; text-align: center">{{hostname}}</h1>
 
+        </div>
+    </div>
 {% if no_admins_exist %}
-<div class="container">
+    <div class="row">
         <div class="col-md-offset-2 col-md-8">
+
             <p class="text-danger">There are no administrative users on this system! To make an administrative user,
             log into this machine using SSH (like when you first set it up) and run:</p>
             <pre>cd mailinabox
             sudo tools/mail.py user make-admin your@emailaddress.com</pre>
             <hr>
+
         </div>
     </div>
 {% endif %}
-
     <div class="row">
-  <div class="col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
+        <div class="col-sm-12 col-md-offset-2 col-md-10 col-lg-offset-3 col-lg-6">
+
             <center>
                 <p style="margin: 2em">Log in here for your Mail-in-a-Box control panel.</p>
             </center>
@@ -46,9 +54,9 @@ sudo tools/mail.py user make-admin your@emailaddress.com</pre>
                     </div>
                 </div>
             </form>
-  </div>
-</div>
 
+        </div>
+    </div>
 
     <script>
     function do_login() {
@@ -116,3 +124,5 @@ function do_logout() {
       show_panel('login');
     }
     </script>
+
+</div>

management/templates/mail-guide.html

@@ -1,10 +1,17 @@
+<div class="container-fluid">
+
     <style>#panel_mail-guide table.table { width: auto; margin-left: .5em; }</style>
 
-<div class="container">
+	<div class="row">
+        <div class="col-sm-12">
+
             <h2 style="margin-bottom: 0">Checking and Sending Mail</h2>
 
+        </div>
+    </div>
 	<div class="row">
 		<div class="col-sm-6">
+
 			<h3>How to log in</h3>
 
 			<p>Your username and password are the same no matter how you check your mail:</p>
@@ -30,6 +37,7 @@
 
             <div class="row">
                 <div class="col-lg-6">
+
                     <h4>IMAP/SMTP settings</h4>
 
                     <p>This method is preferred on Android devices but is not available on iOS devices.</p>
@@ -45,9 +53,10 @@
                     </table>
 
                     <p>In addition to setting up your email, you&rsquo;ll also need to set up <a href="#sync_guide" onclick="return show_panel(this);">contacts and calendar synchronization</a> separately.</p>
-				</div>
 
+                </div>
                 <div class="col-lg-6">
+
                     <h4>Exchange/ActiveSync settings</h4>
 
                     <p>On iOS devices and devices on this <a href="http://z-push.org/compatibility/">compatibility list</a>, set up your mail as an Exchange or ActiveSync server. Use these settings when prompted:</p>
@@ -58,11 +67,13 @@
                     </table>
 
                     <p>Your device should also provide a contacts list and calendar that syncs to this box when you use this method.</p>
-				</div>
+
                 </div>
             </div>
 
+		</div>
 		<div class="col-sm-6">
+
 			<h3>Other information about mail on your box</h3>
 
 			<h4>Greylisting</h4>
@@ -70,6 +81,7 @@
 
 			<h4>Use this box to send as you</h4>
 			<p>Your box sets strict email sending policies for your domain names to make it harder for spam and other fraudulent mail to claim to be you. Only this machine is authorized to send email on behalf of your domain names. If you use any other service to send email as you, it will likely get spam filtered by recipients.</p>
+
 		</div>
 	</div>
 </div>

management/templates/ssl.html

@@ -1,11 +1,11 @@
-<style>
+<div class="container-fluid">
-</style>
+    <div class="row">
+        <div class="col-sm-12">
 
             <h2>SSL Certificates</h2>
 
             <h3>Certificate Status</h3>
 
-
             <table id="ssl_domains" class="table" style="margin-bottom: 2em; width: auto;">
                 <thead>
                     <tr>
@@ -46,6 +46,9 @@
                 <button class="btn-primary" onclick="install_cert()">Install</button>
             </div>
 
+        </div>
+    </div>
+
     <script>
     function show_ssl() {
      api(
@@ -116,3 +119,5 @@ function install_cert() {
         });
     }
     </script>
+
+</div>

management/templates/sync-guide.html

@@ -1,10 +1,15 @@
-<div class="container">
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+
             <h2>Contacts &amp; Calendar Synchronization</h2>
 
             <p>This box can hold your contacts and calendar, just like it holds your email.</p>
 
             <hr>
 
+            </div>
+        </div>
     <div class="row">
         <div class="col-sm-6">
             <h4>In your browser</h4>
@@ -19,8 +24,8 @@
 
             <p>Log in settings are the same as with <a href="#mail-guide" onclick="return show_panel(this);">mail</a>: your
             complete email address and your mail password.</p>
-		</div>
 
+        </div>
         <div class="col-sm-6">
             <h4>On your mobile device</h4>
 
@@ -44,6 +49,7 @@
                 <tr><td>Username</td> <td>Your complete email address.</td></tr>
                 <tr><td>Password</td> <td>Your mail password.</td></tr>
             </table>
+
         </div>
     </div>
 </div>

management/templates/system-backup.html

@@ -1,8 +1,13 @@
+<div class="container-fluid">
+
     <style>
         #backup-status th { text-align: center; }
         #backup-status tr.full-backup td { font-weight: bold; }
     </style>
 
+    <div class="row">
+        <div class="col-sm-12">
+
             <h2>Backup Status</h2>
 
             <h3>Copying Backup Files</h3>
@@ -30,6 +35,9 @@
 
             <p style="margin-top: 2em"><small>The size column in the table indicates the size of the encrpyted backup, but the total size on disk shown above includes storage for unencrpyted intermediate files.</small></p>
 
+        </div>
+    </div>
+
     <script>
     function nice_size(bytes) {
       var powers = ['bytes', 'KB', 'MB', 'GB', 'TB'];
@@ -87,3 +95,5 @@ function show_system_backup() {
         })
     }
     </script>
+
+</div>

management/templates/system-status.html

@@ -1,4 +1,4 @@
-<h2>System Status Checks</h2>
+<div class="container-fluid">
 
     <style>
         #system-checks .heading td {
@@ -36,6 +36,11 @@
         }
     </style>
 
+    <div class="row">
+        <div class="col-sm-12">
+
+            <h2>System Status Checks</h2>
+
             <table id="system-checks" class="table" style="max-width: 60em">
             <thead>
             </thead>
@@ -43,6 +48,9 @@
             </tbody>
             </table>
 
+        </div>
+    </div>
+
     <script>
     function show_system_status() {
       $('#system-checks tbody').html("<tr><td colspan='2' class='text-muted'>Loading...</td></tr>")
@@ -84,3 +92,5 @@ function show_system_status() {
         })
     }
     </script>
+
+</div>

management/templates/users.html

@@ -1,4 +1,4 @@
-<h2>Users</h2>
+<div class="container-fluid">
 
     <style>
         #user_table tr.account_inactive td.address { color: #888; text-decoration: line-through; }
@@ -10,6 +10,11 @@
         #user_table .account_active .if_inactive { display: none; }
     </style>
 
+    <div class="row">
+        <div class="col-sm-12">
+
+            <h2>Users</h2>
+
             <h3>Add a mail user</h3>
 
             <p>Add an email address to this system. This will create a new login username/password. (Use <a href="javascript:show_panel('aliases')">aliases</a> to create email addresses that forward to existing accounts.)</p>
@@ -85,6 +90,8 @@
                 </table>
             </div>
 
+        </div>
+    </div>
 
     <script>
     function show_users() {
@@ -250,3 +257,5 @@ function mod_priv(elem, add_remove) {
         });
     }
     </script>
+
+</div>

management/templates/web.html

@@ -1,5 +1,6 @@
-<style>
+<div class="container-fluid">
-</style>
+    <div class="row">
+        <div class="col-sm-12">
 
             <h2>Static Web Hosting</h2>
 
@@ -52,6 +53,8 @@
                 </tbody>
             </table>
 
+        </div>
+    </div>
 
     <script>
     function show_web() {
@@ -100,3 +103,5 @@ function do_web_update() {
         });
     }
     </script>
+
+</div>