commit b24c7c0ea8699cb94a7215971f36dcad39b4b057
parent 5c35c631fce39e546476724079942c9f86300271
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Sun, 27 Sep 2020 20:22:15 -0700
Improve settings page layout for mobile devices.
Diffstat:
6 files changed, 137 insertions(+), 103 deletions(-)
diff --git a/css/global.css b/css/global.css
@@ -18,6 +18,7 @@ body, html {
/* Override default browser padding and margin styles */
padding: 0px;
margin: 0px;
+ box-sizing: border-box;
}
body {
@@ -35,12 +36,10 @@ body {
display: grid;
grid-template-rows: auto auto 1fr auto;
- grid-template-columns: 1fr auto 1fr;
}
#jsError {
grid-row: 2;
- grid-column: 2;
color: red;
font-weight: normal;
font-size: 20px;
@@ -73,7 +72,6 @@ button:disabled {
/******** Other styles ********/
header {
grid-row: 1;
- grid-column: 1 / 4;
text-align: center;
width: 100%;
background-color: var(--theme-color);
@@ -83,14 +81,12 @@ header {
color: inherit;
text-decoration: none;
margin: 0px;
- margin-bottom: 10px;
padding-top: 15px;
padding-bottom: 15px;
}
main {
grid-row: 2;
- grid-column: 2;
text-align: center;
}
@@ -108,7 +104,6 @@ main {
footer {
grid-row: 4;
- grid-column: 1 / 4;
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
diff --git a/css/home.css b/css/home.css
@@ -2,7 +2,7 @@
#home h1 {
font-size: 20px;
font-weight: bold;
- margin-top: 5px;
+ margin-top: 15px;
margin-bottom: 5px;
}
diff --git a/css/quizzer.css b/css/quizzer.css
@@ -1,7 +1,9 @@
/******** Quizzer styles ********/
/* Container */
#quizzer {
- margin: auto;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 10px;
padding: 10px;
width: fit-content;
width: -moz-fit-content;
diff --git a/css/reference.css b/css/reference.css
@@ -5,7 +5,7 @@ main {
/* Heading */
h1 {
- margin-top: 0px;
+ margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
font-weight: normal;
@@ -13,6 +13,7 @@ h1 {
/* Controls */
#controls {
+ margin-top: 10px;
margin-bottom: 15px;
}
diff --git a/css/settings.css b/css/settings.css
@@ -1,62 +1,102 @@
-/******** Settings styles ********/
+/* Settings */
#settings {
- margin: auto;
- text-align: left;
- max-width: 300px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-
-
-
-/******** vocab/Verb Settings styles ********/
-/* Instructions */
#settings h1 {
- text-align: center;
font-size: 16px;
font-weight: normal;
+ margin-bottom: 10px;
}
-
-/* Headings */
-h2 {
- font-size: 18px;
- margin-top: 15px;
+#settings h2 {
+ font-size: 20px;
margin-bottom: 5px;
}
-h2 button {
- padding: 2px 5px 2px 5px;
+#vocabSettings, #verbSettings, #quizzerSettings, #studyMethodDiv {
+ margin-left: 5px;
+ margin-right: 5px;
+ margin-top: 10px;
}
-/* List item */
-.vocabSet, .verbFilter {
- padding-top: 5px;
-}
-/* Vocab list item parts */
-.vocabSetName {
- width: 115px;
-}
-.vocabSetFilter {
- width: 160px;
+
+/* Filters */
+#vocabSettings h2 button, #verbSettings h2 button {
+ padding: 3px;
}
+.filter {
+ width: max-content;
-/* List item remove */
-.itemRemove {
+ background-color: var(--background-color);
+ border: 1px solid var(--border-color);
+ box-shadow: 0 0 15px var(--border-color);
+
+ margin: 5px auto;
+ padding: 5px;
+ border-radius: 5px;
+}
+.filter button {
border: none;
- padding: 0px;
- margin: 0px;
- cursor: pointer;
- color: var(--foreground-color);
background-color: var(--background-color);
+ color: var(--foreground-color);
+ cursor: pointer;
+}
+
+
+
+/* Quizzer Settings div */
+#quizzerSettings div {
+ text-align: left;
+}
+#quizzerSettings input[type=number] {
+ width: 50px;
}
-/******** Settings Button styles ********/
+/* Start/Resume Button */
#settingButtons {
- text-align: center;
+ margin-top: 20px;
+ margin-bottom: 10px;
}
#settingButtons button {
- margin-top: 15px;
- margin-bottom: 5px;
- width: 75px;
- height: 25px;
+ width: 100px;
+ height: 40px;
+ font-size: 18px;
+ margin: 0px 5px;
+}
+
+
+
+/* Error Message */
+#settingsError {
+ margin: 0px 10px;
+}
+
+
+
+@media only screen and (max-width: 300px) {
+ /* Filters */
+ #vocabSettings, #verbSettings {
+ width: calc(100% - 20px);
+ }
+ .filter {
+ width: 100%;
+ margin: 10px auto;
+ }
+ .filter select, .filter button {
+ width: 100%;
+ height: 30px;
+ margin: 3px 0px;
+ }
+
+ /* Start/Resume Buttons */
+ #settingButtons {
+ width: calc(100% - 10px);
+ }
+ #settingButtons button {
+ width: calc(50% - 15px);
+ height: 50px;
+ }
}
diff --git a/index.html b/index.html
@@ -49,21 +49,19 @@
Verb Filters
<button @click="AddVerbFilter();">Add Filter</button>
</h2>
-
- <div id="verbFilters">
- <div v-for="(filter, index) in verbFilters" class="verbFilter">
- <select v-model="filter.tense">
- <option>All Tenses</option>
- <option>Present Participles</option>
- <option>Present Tense</option>
- <option>Preterite Tense</option>
- <option>Imperfect Tense</option>
- </select>
- <select v-model="filter.type">
- <option v-for="(available, type) in getTenseTypes(index)" :disabled="!available">{{ type }}</option>
- </select>
- <button class="itemRemove" @click="RemoveVerbFilter(index);">╳</button>
- </div>
+
+ <div v-for="(filter, index) in verbFilters" class="filter">
+ <select v-model="filter.tense">
+ <option>All Tenses</option>
+ <option>Present Participles</option>
+ <option>Present Tense</option>
+ <option>Preterite Tense</option>
+ <option>Imperfect Tense</option>
+ </select>
+ <select v-model="filter.type">
+ <option v-for="(available, type) in getTenseTypes(index)" :disabled="!available">{{ type }}</option>
+ </select>
+ <button class="itemRemove" @click="RemoveVerbFilter(index);">╳</button>
</div>
</div>
@@ -76,39 +74,37 @@
<button @click="AddVocabFilter();">Add set</button>
</h2>
- <div id="vocabSets">
- <div v-for="(filter, index) in vocabFilters" class="vocabSet">
- <select class="vocabSetName" v-model="filter.set">
- <optgroup label="Common Words">
- <option>Verbs</option>
- <option>Adjectives</option>
- <option>Adverbs</option>
- <option>Prepositions</option>
- <option>Transitions</option>
- </optgroup>
- <optgroup label="Spanish 1">
- <option>Colors</option>
- <option>Days</option>
- <option>Months</option>
- <option>Questions</option>
- <option>Weather</option>
- <option>Family</option>
- <option>Clothes</option>
- </optgroup>
- <optgroup label="Spanish 2">
- <option>Nature</option>
- <option>House</option>
- <option>Vacation</option>
- <option>Childhood</option>
- <option>Professions</option>
- <option>Health</option>
- </optgroup>
- </select>
- <select class="vocabSetFilter" v-model="filter.type">
- <option v-for="type in getSetFilters(index)" >{{ type }}</option>
- </select>
- <button class="itemRemove" @click="RemoveVocabFilter(index);">╳</button>
- </div>
+ <div v-for="(filter, index) in vocabFilters" class="filter">
+ <select class="vocabSetName" v-model="filter.set">
+ <optgroup label="Common Words">
+ <option>Verbs</option>
+ <option>Adjectives</option>
+ <option>Adverbs</option>
+ <option>Prepositions</option>
+ <option>Transitions</option>
+ </optgroup>
+ <optgroup label="Spanish 1">
+ <option>Colors</option>
+ <option>Days</option>
+ <option>Months</option>
+ <option>Questions</option>
+ <option>Weather</option>
+ <option>Family</option>
+ <option>Clothes</option>
+ </optgroup>
+ <optgroup label="Spanish 2">
+ <option>Nature</option>
+ <option>House</option>
+ <option>Vacation</option>
+ <option>Childhood</option>
+ <option>Professions</option>
+ <option>Health</option>
+ </optgroup>
+ </select>
+ <select class="vocabSetFilter" v-model="filter.type">
+ <option v-for="type in getSetFilters(index)" >{{ type }}</option>
+ </select>
+ <button class="itemRemove" @click="RemoveVocabFilter(index);">╳</button>
</div>
</div>
@@ -145,14 +141,14 @@
<option>At the end</option>
</select>
</div>
-
- <div id="settingButtons">
- <button id="settingsStart" onclick="CreateSession();">Start</button>
- <button id="settingsResume" onclick="ResumeSession();">Resume</button>
- </div>
-
- <div id="settingsError" v-show="errorMsg" class="centered bad">{{ errorMsg }}</div>
</div>
+
+ <div id="settingButtons">
+ <button id="settingsStart" onclick="CreateSession();">Start</button>
+ <button id="settingsResume" onclick="ResumeSession();">Resume</button>
+ </div>
+
+ <div id="settingsError" v-show="errorMsg" class="centered bad">{{ errorMsg }}</div>
</div>
