Mobile improvements

Todo: Checks and Generated sections
wcolding · Jan 19, 2024 · 8d0685d · 8d0685d
1 parent ad14d6b
commit 8d0685d
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 19 deletions.
diff --git a/static/App.css b/static/App.css
@@ -76,6 +76,7 @@ button {
 #generatedTable {
     display: none;
     table-layout: fixed;
+    width: 100%;
 }
 
 .checkCell {
@@ -100,6 +101,10 @@ button {
     color: #44355B;
 }
 
+#loadPresetButtonMobile {
+    display: none;
+}
+
 select {
     background-color: #221E22;
     color: white;
@@ -171,6 +176,10 @@ select {
     margin-right: 10px;
 }
 
+.presetInfo {
+    display: inline-block;
+}
+
 .infoLink {
     color: white;
     text-decoration: none;
@@ -203,11 +212,6 @@ select {
     color: transparent;
 }
 
-img.resize {
-    width:1039px;
-    height: auto;
-}
-
 #mainForm {
     display: block;
     margin: 0;
@@ -225,4 +229,58 @@ footer {
     position: absolute;
     bottom: 10px;
     right: 10px;
+}
+
+/* Mobile */
+@media only screen and (max-width: 980px) {
+    #presetLoad, #checkSelection, #generatedSection {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
+    #presetLoad {
+        height: auto;
+    }
+
+    #banner {
+        margin-top: 10px;
+        width: 100%;
+        margin-left: 25px;
+    }
+
+    select {
+        width: 100%;
+        font-size: large;
+        margin-bottom: 5px;
+    }
+
+    #copyAsPresetButton {
+        display: none;
+    }
+
+    #loadPresetButton {
+        display: none;
+    }
+
+    #loadPresetButtonMobile 
+    {
+        width: 100%;
+        font-size: large;
+        font-weight: bold;
+        border-radius: 10px;
+        border-width: 4px;
+        margin-top: 20px;
+        padding: 10px;
+        font-size: x-large;
+        display: block;
+    }
+
+    .presetLabel {
+        margin-top: 5px;
+        font-size: large;
+    }
+
+    .presetInfo {
+        font-size: larger;
+    }
 }
diff --git a/templates/App.html b/templates/App.html
@@ -19,13 +19,14 @@
         <script type="text/javascript" src="../static/App.js"></script>
         <div class="lastSettingString" id="lastSetting">{{ last_setting }}</div>
 
-        <div id="banner">
-            <form method="get" action="/">
-                <input id="bannerReset" type="submit"> 
-            </form>
-        </div>
-
         <div id="mainForm">
+
+            <div id="banner">
+                <form method="get" action="/">
+                    <input id="bannerReset" type="submit"> 
+                </form>
+            </div>
+
             <div class="section" id="presetLoad">
                 <h3>Presets</h3>
                 <select id="presetsDropdown" onchange="updatePresetDesc(options.selectedIndex)">
@@ -34,8 +35,9 @@ <h3>Presets</h3>
                     {% endfor %}
                 </select>
                 <button class="smallButton" id="loadPresetButton" onclick="loadSelectedPreset()">Load Preset</button><br>
-                <div class="presetLabel">Name:</div><div style="display: inline-block;" id="presetName"></div><br>
-                <div class="presetLabel">Description:</div><div style="display: inline-block;" id="presetDesc"></div>
+                <div class="presetLabel">Name:</div><div class="presetInfo" id="presetName"></div><br>
+                <div class="presetLabel">Description:</div><div class="presetInfo" id="presetDesc"></div>
+                <button class="smallButton" id="loadPresetButtonMobile" onclick="loadSelectedPreset()">Load Preset</button>
             </div>
 
             <div class="section" id="checkSelection">
@@ -57,7 +59,7 @@ <h3>Check Selection</h3>
                         </div>
 
                     </form>
-                    <button class="smallButton" onclick="copySelectedAsPreset()">Copy selected as Preset</button>
+                    <button class="smallButton" id="copyAsPresetButton" onclick="copySelectedAsPreset()">Copy selected as Preset</button>
                     <br>
                 </div>
 
@@ -68,11 +70,11 @@ <h3>Check Selection</h3>
                         <div class="gameSelect">
                             <button class="expandButton" onclick="showGameChecks('{{entry.game}}')" style="display: inline;" id="{{entry.game}}_expandButton">+</button>
                             <label>
-                            <input type=checkbox 
-                                id="{{entry.game}}_allSelect" 
-                                onclick="setAllGameChecks({{entry}}, checked)">
-                            <div class="gameName">{{entry.game}}</div>
-                            <div class="checksCount">(0 of {{entry.checks|length}} selected)</div></checkbox>
+                                <input type=checkbox 
+                                    id="{{entry.game}}_allSelect" 
+                                    onclick="setAllGameChecks({{entry}}, checked)">
+                                <div class="gameName">{{entry.game}}</div>
+                                <div class="checksCount">(0 of {{entry.checks|length}} selected)</div></checkbox>
                             </label>
                         </div>
                         <div class="gameChecksSelect" id="{{entry.game}}_checks" style="display: none;">