spanish-quizzer

commit 5b6b13c9d626143db779f84bc1b984ef4fba0e04
parent 8b64a692f3190798a137aa5f0c58967c75edd586
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Mon,  8 Mar 2021 10:26:11 -0800

Reorganize settings-input component

Diffstat:
M
css/filtersPage.css
 | 
8
++++++--
M
js/filtersPage.js
 | 
31
++++++++++++++++++-------------

2 files changed, 24 insertions(+), 15 deletions(-)
diff --git a/css/filtersPage.css b/css/filtersPage.css
@@ -52,8 +52,13 @@
     text-align: center;
     margin-bottom: 5px;
 }
-.settingsInput div {
+.settingsInput div, .settingsInput h3 {
     text-align: left;
+    margin-bottom: 5px;
+}
+.settingsInput h3 {
+    margin-top: 10px;
+    font-size: 16px;
 }
 .settingsInput input[type=number] {
     width: 50px;
@@ -74,7 +79,6 @@
 
 /* Start button */
 .settingsStart {
-    margin-top: 20px;
     margin-bottom: 10px;
     width: 100px;
     height: 40px;
diff --git a/js/filtersPage.js b/js/filtersPage.js
@@ -321,11 +321,14 @@ let settingsInput = Vue.component("settingsInput", {
 
     template: `
         <div class="settingsInput" ref="container">
-            <h2>Quizzer Settings</h2>
+            <h2>Settings</h2>
+            <h3>Appearance</h3>
             <div>
                 <input type="checkbox" id="settingsDarkTheme" v-model="value.darkTheme">
                 <label for="settingsDarkTheme">Dark Mode</label>
             </div>
+
+            <h3>Prompts</h3>
             <div>
                 <label for="settingsPromptType">Prompt type</label>
                 <select id="settingsPromptType" v-model="value.promptType">
@@ -343,6 +346,20 @@ let settingsInput = Vue.component("settingsInput", {
                 </select>
             </div>
             <div>
+                <label for="settingsMultiplePrompts">Multiple prompts</label>
+                <select id="settingsMultiplePrompts" v-model="value.multiplePrompts">
+                    <option>Show together</option>
+                    <option>Show separately</option>
+                    <option>Show one</option>
+                </select>
+            </div>
+            <div>
+                <input type="checkbox" id="settingsRemoveDuplicates" v-model="value.removeDuplicates">
+                <label for="settingsRemoveDuplicates">Remove duplicate prompts</label>
+            </div>
+
+            <h3>Grading</h3>
+            <div>
                 <label for="settingsOnMissedPrompt">When I miss a prompt</label>
                 <select id="settingsOnMissedPrompt" v-model="value.onMissedPrompt">
                     <option>Correct me</option>
@@ -361,24 +378,12 @@ let settingsInput = Vue.component("settingsInput", {
                 </select>
             </div>
             <div>
-                <label for="settingsMultiplePrompts">Multiple prompts</label>
-                <select id="settingsMultiplePrompts" v-model="value.multiplePrompts">
-                    <option>Show together</option>
-                    <option>Show separately</option>
-                    <option>Show one</option>
-                </select>
-            </div>
-            <div>
                 <label for="settingsMultipleAnswers">Multiple answers</label>
                 <select id="settingsMultipleAnswers" v-model="value.multipleAnswers">
                     <option>Require all</option>
                     <option>Require any</option>
                 </select>
             </div>
-            <div>
-                <input type="checkbox" id="settingsRemoveDuplicates" v-model="value.removeDuplicates">
-                <label for="settingsRemoveDuplicates">Remove duplicate prompts</label>
-            </div>
         </div>
     `,
 });