Add mobile design enhancements

stickz · rumblefrog · commit d361b3c0c02d · 2023-03-06T05:10:13.000-05:00
This pull requests starts on mobile design enhancements. It maintains a desktop first philosophy. [*] On the dashboard tab, the player ban blocks and comm block sections are separated bellow 1279px. [*] The header is compressed bellow 1279px to better use screen space. To re-simulate these changes, visit https://develop.bans.redstonend.uk/ Afterwards, reduce the size of your web browser until the width stops scaling on the source-bans interface.
diff --git a/web/themes/default/core/header.tpl b/web/themes/default/core/header.tpl
@@ -2,6 +2,7 @@
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
         <title>{$title}</title>
         <link rel="Shortcut Icon" href="themes/{$theme}/images/favicon.ico" />
         <script type="text/javascript" src="./scripts/fontawesome-all.min.js"></script>
diff --git a/web/themes/default/css/main.css b/web/themes/default/css/main.css
@@ -1243,3 +1243,52 @@ hr {
 .tabcontent:first-of-type {
     display: block;
 }
+
+/** ======= Mobile Design Styles ======= **/
+
+@media only screen and (min-width: 1280px) {
+    .dashboard-comm-blocks {
+        float: left;
+        width: 49%;
+    }
+    .dashboard-ban-blocks {
+        float: right;
+        width: 49%;
+    }
+    .dashboard-blocks-separate {
+        display: none;
+    }
+    .dashboard-ban-block-date {
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 1279px) {
+    .dashboard-comm-blocks {
+        width: 100%;
+    }
+    .dashboard-ban-blocks {
+        width: 100%;
+    }    
+    .dashboard-blocks-separate {
+        display: block;
+    }
+    .dashboard-ban-block-date {
+        text-align: left;
+    }
+    
+    #header {
+        width: 984px;
+        margin: 0 auto 0 auto;  /*centers the box, no matter the overall width */
+        height: 150px;
+        border: 0;
+    }    
+    #head-logo {
+        float: left;
+        margin-top: 60px;
+    }
+    #search {
+        text-align: right;
+        margin-top: 40px;
+    }
+}
diff --git a/web/themes/default/page_dashboard.tpl b/web/themes/default/page_dashboard.tpl
@@ -52,7 +52,7 @@
     </table>
 </div>
 <br /><br /><br />
-<div class="front-module" style="float:right;width:49%">
+<div class="front-module dashboard-ban-blocks">
     <table width="100%" cellpadding="1" class="listtable">
         <tr>
             <td colspan="3">
@@ -70,7 +70,7 @@
         </tr>
         <tr>
             <td width="16px" height="16" class="listtable_top">&nbsp;</td>
-            <td height="25%" class="listtable_top" align="center"><b>Date/Time</b></td>
+            <td height="25%" class="listtable_top dashboard-ban-block-date"><b>Date/Time</b></td>
             <td height="16" class="listtable_top"><b>Name</b></td>
         </tr>
         {foreach from=$players_blocked item=player}
@@ -83,7 +83,11 @@
     </table>
 </div>
 
-<div class="front-module" style="float:left;width:49%">
+<div class="dashboard-blocks-separate">
+    <br /><br /><br />
+</div>
+
+<div class="front-module dashboard-comm-blocks">
     <table width="100%" cellpadding="1" class="listtable">
         <tr>
             <td colspan="4">
