spanish-quizzer

commit 0d7edb1d31849a069bb4dbb0cfb2998ce59561eb
parent d196e531858b0696483782863182440f43a7b678
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sun, 21 Mar 2021 18:53:00 -0700

Add reset button in settings page

Diffstat:
M
css/filtersPage.css
 | 
2
+-
M
css/settingsPage.css
 | 
13
+++++++++++++
M
js/settingsPage.js
 | 
14
+++++++++++++-

3 files changed, 27 insertions(+), 2 deletions(-)
diff --git a/css/filtersPage.css b/css/filtersPage.css
@@ -59,7 +59,7 @@
 }
 
 /* Hide non-quizzer settings & labels */
-.filtersPage main .settingsInput>div:not(.quizzerPromptsSettings, .quizzerGradingSettings) {
+.filtersPage main .settingsInput>*:not(.quizzerPromptsSettings, .quizzerGradingSettings) {
     display: none;
 }
 
diff --git a/css/settingsPage.css b/css/settingsPage.css
@@ -20,6 +20,19 @@
         height: 35px;
     }
 }
+.settingsInput .resetSettings {
+    margin-top: 10px;
+    text-align: center;
+}
+.settingsInput .resetSettings button {
+    padding: 5px 15px;
+}
+@media only screen and (max-width: 500px) {
+    .settingsInput .resetSettings button {
+        width: 100%;
+        height: 50px;
+    }
+}
 
 
 
diff --git a/js/settingsPage.js b/js/settingsPage.js
@@ -3,7 +3,7 @@ const settingsInput = Vue.component("settingsInput", {
     props: {
         value: {
             type: Object,
-            default: getSettings(),
+            default: getSettings,
         },
     },
 
@@ -18,6 +18,14 @@ const settingsInput = Vue.component("settingsInput", {
         },
     },
 
+    methods: {
+        reset: function(args) {
+            localStorage.removeItem("settings");
+            this.value = getSettings();
+            args.target.blur();
+        },
+    },
+
     activated: function() {
         // Refresh settings
         this.value = getSettings();
@@ -180,6 +188,10 @@ const settingsInput = Vue.component("settingsInput", {
                     </select>
                 </div>
             </div>
+
+            <div class="resetSettings">
+                <button title="Reset" @click="reset">Reset</button>
+            </div>
         </div>
     `,
 });