commit 850182c21a97fb4e76c14b3b49687d8fdd777ea4
parent 81ea16eccbc6440703fb2afacaf6cee4e2fc0760
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Sat, 13 Mar 2021 14:38:43 -0800
Add more links to settings page
Diffstat:
6 files changed, 79 insertions(+), 79 deletions(-)
diff --git a/css/filtersPage.css b/css/filtersPage.css
@@ -58,12 +58,19 @@
margin-bottom: 20px;
}
+/* Hide non-quizzer settings & labels */
+.filtersPage main .settingsInput .appearanceSettings {
+ display: none;
+}
+
/* Start button */
.settingsStart {
margin-bottom: 10px;
width: 100px;
height: 40px;
}
+
+/* Mobile devices */
@media only screen and (max-width: 510px) {
/* Expand settings component*/
.settingsInput {
@@ -79,13 +86,7 @@
}
@media only screen and (max-width: 800px) {
/* Hide settings */
- .filtersPage main .settingsInput {
- display: none;
- }
-}
-@media only screen and (min-width: 801px) {
- /* Hide settings icon */
- .filtersPage header img:last-child {
+ .filtersPage main .settingsInput, .filtersPage main>h1 {
display: none;
}
}
diff --git a/css/settingsPage.css b/css/settingsPage.css
@@ -1,8 +1,4 @@
/******** settings-input component ********/
-.settingsInput h1 {
- text-align: center;
- margin-bottom: 5px;
-}
.settingsInput div, .settingsInput h2 {
text-align: left;
margin-bottom: 5px;
@@ -24,3 +20,6 @@
align-items: center;
padding: 10px;
}
+.settingsPage main h1 {
+ text-align: center;
+}
diff --git a/js/app.js b/js/app.js
@@ -83,7 +83,7 @@ const homePage = Vue.component("homePage", {
},
template: `
<div class="home">
- <page-header></page-header>
+ <page-header icon2="settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
<main>
<h1>What do you want to study?</h1>
<div>
diff --git a/js/filtersPage.js b/js/filtersPage.js
@@ -352,13 +352,6 @@ const filtersPage = Vue.component("filtersPage", {
},
/**
- * Open the settings page
- */
- openSettings: function() {
- this.$router.push({name:"settings", params:{referer:this.category}});
- },
-
- /**
* Handle a keyup event (implements some keyboard shortcuts).
* @param {object} e - The event args.
*/
@@ -385,9 +378,10 @@ const filtersPage = Vue.component("filtersPage", {
template: `
<div class="filtersPage">
- <page-header icon1="arrow-left" @click1="$emit('back');" icon2="settings" @click2="openSettings"></page-header>
+ <page-header icon1="arrow-left" @click1="$emit('back');" icon2="settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
<main>
<filter-input ref="filters" :category="category" v-model="filters"></filter-input>
+ <h1>Quizzer Settings</h1>
<settings-input v-model="settings"></settings-input>
<button class="settingsStart" @click="StartSession();">Start</button>
</main>
diff --git a/js/reference.js b/js/reference.js
@@ -109,7 +109,7 @@ const referenceTables = Vue.component("referenceTables", {
const referencePage = Vue.component("referencePage", {
template: `
<div class="referencePage">
- <page-header @click1="$emit('back');" icon1="arrow-left"></page-header>
+ <page-header icon1="arrow-left" @click1="$emit('back');" icon2="settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
<main>
<reference-tables :data="this.$root.$data.data"></reference-tables>
</main>
diff --git a/js/settingsPage.js b/js/settingsPage.js
@@ -25,68 +25,73 @@ const settingsInput = Vue.component("settingsInput", {
template: `
<div class="settingsInput" ref="container">
- <h1>Settings</h1>
- <h2>Appearance</h2>
- <div>
- <input type="checkbox" id="settingsDarkTheme" v-model="value.darkTheme">
- <label for="settingsDarkTheme">Dark Mode</label>
+ <div class="appearanceSettings">
+ <h2>Appearance</h2>
+ <div>
+ <input type="checkbox" id="settingsDarkTheme" v-model="value.darkTheme">
+ <label for="settingsDarkTheme">Dark Mode</label>
+ </div>
</div>
- <h2>Quizzer Prompts</h2>
- <div>
- <label for="settingsPromptType">Prompt type</label>
- <select id="settingsPromptType" v-model="value.promptType">
- <option>Text</option>
- <option>Audio</option>
- <option>Both</option>
- </select>
- </div>
- <div>
- <label for="settingsInputType">Input type</label>
- <select id="settingsInputType" v-model="value.inputType">
- <option>Text</option>
- <option>Voice</option>
- <option>Either</option>
- </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 class="quizzerPromptsSettings">
+ <h2>Quizzer Prompts</h2>
+ <div>
+ <label for="settingsPromptType">Prompt type</label>
+ <select id="settingsPromptType" v-model="value.promptType">
+ <option>Text</option>
+ <option>Audio</option>
+ <option>Both</option>
+ </select>
+ </div>
+ <div>
+ <label for="settingsInputType">Input type</label>
+ <select id="settingsInputType" v-model="value.inputType">
+ <option>Text</option>
+ <option>Voice</option>
+ <option>Either</option>
+ </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>
</div>
- <h2>Quizzer Grading</h2>
- <div>
- <label for="settingsOnMissedPrompt">When I miss a prompt</label>
- <select id="settingsOnMissedPrompt" v-model="value.onMissedPrompt">
- <option>Correct me</option>
- <option>Tell me</option>
- <option>Ignore it</option>
- </select>
- </div>
- <div>
- <label for="settingsRepeatPrompts">Repeat missed prompts</label>
- <select id="settingsRepeatPrompts" v-model="value.repeatPrompts">
- <option>Never</option>
- <option>Immediately</option>
- <option>5 prompts later</option>
- <option>5 & 10 prompts later</option>
- <option>At the end</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 class="quizzerGradingSettings">
+ <h2>Quizzer Grading</h2>
+ <div>
+ <label for="settingsOnMissedPrompt">When I miss a prompt</label>
+ <select id="settingsOnMissedPrompt" v-model="value.onMissedPrompt">
+ <option>Correct me</option>
+ <option>Tell me</option>
+ <option>Ignore it</option>
+ </select>
+ </div>
+ <div>
+ <label for="settingsRepeatPrompts">Repeat missed prompts</label>
+ <select id="settingsRepeatPrompts" v-model="value.repeatPrompts">
+ <option>Never</option>
+ <option>Immediately</option>
+ <option>5 prompts later</option>
+ <option>5 & 10 prompts later</option>
+ <option>At the end</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>
</div>
`,
@@ -107,6 +112,7 @@ const settingsPage = Vue.component("settingsPage", {
<div class="settingsPage">
<page-header @click1="$emit('back', referer);" icon1="x"></page-header>
<main>
+ <h1>Settings</h1>
<settings-input></settings-input>
</main>
</div>
