Mobile work for Check Selection section

Expand buttons restyled
wcolding · Jan 19, 2024 · 1a3f60b · 1a3f60b
1 parent d7116e1
commit 1a3f60b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 14 deletions.
diff --git a/static/App.css b/static/App.css
@@ -59,6 +59,10 @@ button {
     font-size: small;
 }
 
+.gameContainer {
+    height: auto;
+}
+
 .checkElement {
     margin: 0px;
     padding: 0px;
@@ -101,7 +105,7 @@ button {
     color: #44355B;
 }
 
-#loadPresetButtonMobile {
+.mobileButton {
     display: none;
 }
 
@@ -140,14 +144,26 @@ select {
     color: #BB342F;
 }
 
-.expandButton {
-    margin: 0px;
-    border: 0;
+.expandButtonHolder {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
     height: 20px;
     width: 20px;
+    vertical-align: text-top;
+}
+
+.expandButton {
+    display: block;
+    margin: 0;
+    padding:0;
+    border: 0;
+    height: 100%;
+    width: 100%;
     font-size: smaller;
-    background-color: #221E22;
+    background-color: transparent;
     color: white;
+    text-align: center;
 }
 
 .scrollingGamesList {
@@ -254,16 +270,23 @@ footer {
         margin-bottom: 5px;
     }
 
-    #copyAsPresetButton {
-        display: none;
+    input[type=checkbox] {
+        transform: scale(1.5);
+        -webkit-transform: scale(1.5);
     }
 
-    #loadPresetButton {
+    label {
+        font-size: larger;
+        padding-left: 10px;
+        margin-bottom: 20px;
+    }
+
+    #copyAsPresetButton, #loadPresetButton, #generateButton {
         display: none;
     }
 
-    #loadPresetButtonMobile 
-    {
+    .mobileButton {
+        display: block;
         width: 100%;
         font-size: large;
         font-weight: bold;
@@ -272,7 +295,12 @@ footer {
         margin-top: 20px;
         padding: 10px;
         font-size: x-large;
-        display: block;
+        color: #ECA72C;
+        background-color: #221E22;
+    }
+
+    .mobileButton:disabled {
+        color: #44355B;
     }
 
     .presetLabel {
@@ -283,4 +311,42 @@ footer {
     .presetInfo {
         font-size: larger;
     }
+
+    .checksCounter, .objsCounter {
+        display: inline-block;
+        margin-right:10px;
+        font-size: large;
+    }
+
+    .optionsSection input[type=checkbox], .gameSelect input[type=checkbox]{
+        margin-bottom: 10px;
+    }
+
+    .scrollingGamesList {
+        margin-top: 0;
+        height: auto;
+    }
+
+    .expandButtonHolder {
+        transform: scale(1.5);
+        -webkit-transform: scale(1.5);
+    }
+
+    .gameName {
+        padding-left: 10px;
+    }
+
+    .checksCount {
+        display: block;
+        padding-left: 80px;
+    }
+
+    .checkElement {
+        display: block;
+        padding-left: 10px;
+    }
+
+    footer {
+        display: none;
+    }
 }
diff --git a/static/App.js b/static/App.js
@@ -316,8 +316,12 @@ function updateCounterDisplay() {
     objsCounter.innerHTML = `Exclusive Checks: ${objectivesCounter}`;
     setColor(checksCounter, selectCounter, randoCount);
     let enoughObjectives = setColor(objsCounter, objectivesCounter, randoCount);
+
     let generateButton = document.getElementById("generateButton");
     generateButton.disabled = !enoughObjectives;
+
+    let mobileGenerateButton = document.getElementById("generateButtonMobile");
+    mobileGenerateButton.disabled = !enoughObjectives;
 }
 
 function setColor(object, counter, required) {

diff --git a/templates/App.html b/templates/App.html
@@ -37,7 +37,7 @@ <h3>Presets</h3>
                 <button class="smallButton" id="loadPresetButton" onclick="loadSelectedPreset()">Load Preset</button><br>
                 <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>
+                <button class="mobileButton" id="loadPresetButtonMobile" onclick="loadSelectedPreset()">Load Preset</button>
             </div>
 
             <div class="section" id="checkSelection">
@@ -56,8 +56,9 @@ <h3>Check Selection</h3>
                                 <input type="checkbox" name="includeGameName" id="includeGameNameBox" onclick="writeSettings()">
                                 <label for="includeGameNameBox">Include game name in squares</label>
                             </div>
+
+                            <input class="mobileButton" id="generateButtonMobile" type="submit" value="Generate" disabled>
                         </div>
-
                     </form>
                     <button class="smallButton" id="copyAsPresetButton" onclick="copySelectedAsPreset()">Copy selected as Preset</button>
                     <br>
@@ -68,7 +69,9 @@ <h3>Check Selection</h3>
 
                     <div class="gameContainer">
                         <div class="gameSelect">
-                            <button class="expandButton" onclick="showGameChecks('{{entry.game}}')" style="display: inline;" id="{{entry.game}}_expandButton">+</button>
+                            <div class="expandButtonHolder">
+                                <button class="expandButton" onclick="showGameChecks('{{entry.game}}')" id="{{entry.game}}_expandButton">+</button>
+                            </div>
                             <label>
                                 <input type=checkbox 
                                     id="{{entry.game}}_allSelect"