commit b8afe47f4fb69de6440c361f181981bbf88d7ee2
parent 5ef6d667d0e02e6a847ff799b123f784a4ce01c1
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Wed, 3 Mar 2021 19:02:00 -0800
Merge pull request #27 from AsherMorgan/improve-ui
Improve UI
Diffstat:
12 files changed, 216 insertions(+), 177 deletions(-)
diff --git a/css/app.css b/css/app.css
@@ -1,21 +1,31 @@
-/* Header */
+/******** home-page component ********/
+.home main {
+ text-align: center;
+}
.home main h1 {
- font-size: 20px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 5px;
}
-
-/* Vocab & Conjugation buttons*/
+.home main div {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
.home main button {
- width: 150px;
+ width: 175px;
height: 50px;
line-height: 50px;
margin: 10px;
- font-size: 15px;
}
-
-/* Link to Reference Tables */
-.home main a {
- margin-top: 10px;
+@media only screen and (max-width: 550px) {
+ .home main div {
+ flex-direction: column;
+ align-items: stretch;
+ }
+ .home main button {
+ width: auto;
+ height: 60px;
+ line-height: 60px;
+ }
}
diff --git a/css/filtersPage.css b/css/filtersPage.css
@@ -1,85 +1,57 @@
-/******** filter-input ********/
-.filtersInput h1 {
- font-size: 16px;
- font-weight: normal;
- margin-bottom: 10px;
-}
-.filtersInput h2 {
- font-size: 20px;
- margin-bottom: 5px;
-}
-.filtersInput div {
- margin-left: 10px;
- margin-right: 10px;
- margin-top: 10px;
-}
-.filtersInput div h2 button {
- padding: 3px;
+/******** filter-input component ********/
+.filtersInput>div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
/* Filter */
.filter {
width: max-content;
-
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;
- background-color: var(--background-color);
- color: var(--foreground-color);
- cursor: pointer;
+.filter select {
+ vertical-align: middle;
}
/* Conjugation settings on mobile devices */
-@media only screen and (max-width: 510px) {
- .verbSettings {
- width: calc(100% - 20px);
- }
+@media only screen and (max-width: 700px) {
.verbSettings .filter {
width: 100%;
margin: 10px auto;
}
.verbSettings .filter select, .verbSettings .filter button {
width: 100%;
- height: 30px;
+ height: 35px;
margin: 3px 0px;
}
}
/* Vocab settings on mobile devices */
-@media only screen and (max-width: 350px) {
- .vocabSettings {
- width: calc(100% - 20px);
- }
+@media only screen and (max-width: 450px) {
.vocabSettings .filter {
width: 100%;
margin: 10px auto;
}
.vocabSettings .filter select, .vocabSettings .filter button {
width: 100%;
- height: 30px;
+ height: 35px;
margin: 3px 0px;
}
}
-/******** settings-input ********/
+/******** settings-input component ********/
.settingsInput h2 {
- font-size: 20px;
+ text-align: center;
margin-bottom: 5px;
}
-.settingsInput {
- margin-left: 5px;
- margin-right: 5px;
- margin-top: 10px;
-}
.settingsInput div {
text-align: left;
}
@@ -89,11 +61,15 @@
-/******** filters-page ********/
+/******** filters-page component ********/
.filtersPage main {
display: flex;
flex-direction: column;
align-items: center;
+ padding: 10px;
+}
+.filtersPage main>div {
+ margin-bottom: 20px;
}
/* Start button */
@@ -102,12 +78,17 @@
margin-bottom: 10px;
width: 100px;
height: 40px;
- font-size: 18px;
}
@media only screen and (max-width: 510px) {
+ /* Expand settings component*/
+ .settingsInput {
+ width: 100%;
+ }
+
/* Expand start button */
.settingsStart {
- width: calc(100% - 20px);
+ width: 100%;
+ font-size: 18px;
height: 50px;
}
}
diff --git a/css/global.css b/css/global.css
@@ -9,11 +9,7 @@
-/******** Body styles ********/
-body, html {
- height: 100%;
-}
-
+/******** Default styles ********/
* {
/* Override default browser padding and margin styles */
padding: 0px;
@@ -21,105 +17,90 @@ body, html {
box-sizing: border-box;
}
+
+
+/******** Body ********/
body {
font-family: Arial, Helvetica, sans-serif;
color: var(--foreground-color);
background-color: var(--background-color);
margin: 0px;
-
touch-action: manipulation;
}
-#app>div {
- width: 100%;
- height: 100%;
- display: grid;
- grid-template-rows: auto auto 1fr;
- grid-template-columns: 1fr auto 1fr;
+
+/******** Header ********/
+header {
+ text-align: center;
+ background-color: var(--theme-color);
+ font-size: 25px;
+ font-weight: bold;
+ cursor: pointer;
+ color: inherit;
+ text-decoration: none;
+ margin: 0px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+header img {
+ position: absolute;
+ left: 10px;
+ height: 30px;
+ background-color: var(--theme-color);
}
-/******** Noscript styles ********/
+/******** Noscript ********/
#jsError {
- grid-row: 2;
margin-top: 15px;
margin-bottom: 10px;
text-align: center;
}
#jsError h1 {
margin-bottom: 5px;
- font-size: 20px;
color: red;
}
-/******** Control styles ********/
-button:not(.itemRemove), input, select {
+/******** Other elements ********/
+h1, h2 {
+ font-size: 20px;
+}
+button:not(.icon) {
+ font-size: 15px;
+}
+button:not(.icon), input, select {
background-color: var(--background-color);
border: 1px solid var(--border-color);
color: var(--foreground-color);
border-radius: 0px;
}
-
-button:hover:enabled:not(.itemRemove) {
+button:hover:enabled:not(.icon) {
cursor: pointer;
background-color: var(--hover-color);
}
-
button:disabled {
background-color: var(--hover-color);
color: var(--border-color);
}
-
-
-
-/******** Other styles ********/
-header {
- grid-row: 1;
- grid-column: 1 / 4;
- text-align: center;
- width: 100%;
- background-color: var(--theme-color);
- font-size: 25px;
- font-weight: bold;
+button.icon {
+ border: none;
+ background-color: #00000000;
+ color: var(--foreground-color);
cursor: pointer;
- color: inherit;
- text-decoration: none;
- margin: 0px;
- padding-top: 15px;
- padding-bottom: 15px;
-}
-header img {
- position: absolute;
- left: 10px;
- height: 30px;
- background-color: var(--theme-color);
+ vertical-align: middle;
}
-
-main {
- grid-row: 2;
- grid-column: 2;
- text-align: center;
-}
-
-.label {
- font-weight: bold;
-}
-
-.good {
- color: green;
-}
-
-.bad {
- color: red;
+button.icon img {
+ height: 24px;
+ width: 24px;
}
-/******** Dark mode styles ********/
+/******** Dark mode ********/
body.dark {
--theme-color: #0088AA;
--foreground-color: #E0E0E0;
@@ -127,11 +108,28 @@ body.dark {
--hover-color: #323436;
--border-color: #505050;
}
-
-.dark button:not(.itemRemove), .dark input, .dark select {
+.dark button:not(.icon), .dark input, .dark select {
--background-color: #222426;
}
-
+.dark main button.icon img {
+ filter: invert(90%);
+}
.dark a {
color: #0080ff;
}
+
+
+
+/******** Mobile devices ********/
+@media only screen and (max-width: 800px) {
+ h1, h2 {
+ font-size: 25px;
+ }
+ select, input, button:not(.icon) {
+ font-size: 16px;
+ }
+ main button.icon img {
+ height: 35px;
+ width: 35px;
+ }
+}
diff --git a/css/quizzer.css b/css/quizzer.css
@@ -1,7 +1,5 @@
-/******** Quizzer styles ********/
-/* Container */
+/******** quizzer component ********/
.quizzer {
- margin: 10px;
padding: 10px;
width: fit-content;
width: -moz-fit-content;
@@ -12,6 +10,7 @@
/* Progress */
.quizzerProgress {
+ text-align: center;
font-size: 18px;
font-weight: bold;
margin: 0px;
@@ -28,7 +27,6 @@
}
.quizzerPrompt {
cursor: pointer;
- font-size: 15px;
}
/* Responce*/
@@ -41,14 +39,24 @@
}
/* Buttons */
+.quizzerButtons {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
.quizzerButtons button {
- width: 75px;
- height: 25px;
+ width: 85px;
+ height: 30px;
+}
+.quizzerButtons button:first-child {
+ margin-right: 10px;
}
/* Feedback */
.quizzerFeedback {
margin-top: 15px;
+ color: red;
+ text-align: center;
}
.quizzerFeedbackTerm {
text-decoration-line: underline;
@@ -56,6 +64,9 @@
}
/* Congrats message */
+.congrats {
+ text-align: center;
+}
.congrats p {
margin: 20px;
}
@@ -63,3 +74,40 @@
width: 100px;
height: 35px;
}
+
+/* Mobile styles */
+@media only screen and (max-width: 500px) {
+ .quizzer {
+ border: none;
+ box-shadow: none;
+ width: 100%;
+ padding: 0px;
+ }
+ .quizzerProgress {
+ font-size: 20px;
+ }
+ .quizzerInput {
+ height: 35px;
+ }
+ .quizzerButtons button {
+ height: 50px;
+ width: 100%;
+ }
+}
+
+
+
+/******** quizzer-page component ********/
+.quizzer-page main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 10px;
+}
+
+/* Mobile styles */
+@media only screen and (max-width: 500px) {
+ .quizzer-page main {
+ align-items: stretch;
+ }
+}
diff --git a/css/reference.css b/css/reference.css
@@ -1,31 +1,37 @@
-/******** Reference Table Page styles ********/
-main {
- overflow-x: hidden;
-}
-
-/* Heading */
-main > h1 {
- margin-top: 10px;
- margin-bottom: 10px;
- font-size: 20px;
- font-weight: normal;
-}
-
+/******** reference-tables component styles ********/
/* Controls */
.referenceTableControls {
- margin-top: 10px;
- margin-bottom: 15px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin: 15px 10px;
+}
+.referenceTableControls input {
+ margin-left: 10px;
+ padding-left: 3px;
+}
+@media only screen and (max-width: 500px) {
+ .referenceTableControls {
+ flex-direction: column;
+ align-items: stretch;
+ }
+ .referenceTableControls * {
+ height: 30px;
+ }
+ .referenceTableControls input {
+ margin-left: 0px;
+ margin-top: 10px;
+ }
}
-
-
-/******** Reference Table styles ********/
+/* Table */
.referenceTable {
text-align: left;
overflow-x: auto;
}
-
-/* Header cells */
+.referenceTable table {
+ margin: auto;
+}
.referenceTable th {
background-color: var(--hover-color);
border: 1px solid var(--border-color);
@@ -33,16 +39,12 @@ main > h1 {
position: -webkit-sticky;
top: 0;
}
-
-/* All cells */
.referenceTable td {
border: 1px solid var(--border-color);
cursor: pointer;
}
-
-
-/******** Print styles ********/
+/* Print styles */
@media print {
body, body.dark {
--border-color: #000000;
@@ -50,16 +52,13 @@ main > h1 {
--background-color: #FFFFFF;
--hover-color: #FFFFFF;
}
-
- header, h1, .referenceTableControls, label, br {
+ header, .referenceTableControls {
display: none;
}
-
.referenceTable {
overflow: visible;
}
-
table {
border-collapse: collapse;
}
-}
-\ No newline at end of file
+}
diff --git a/images/plus.svg b/images/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+\ No newline at end of file
diff --git a/images/trash.svg b/images/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+\ No newline at end of file
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
<meta charset="utf-8"/>
<title>Spanish-Quizzer</title>
<meta name="description" content="Quiz yourself on Spanish vocabulary and conjugations through a free and highly customizable web interface.">
- <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="images/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/global.css">
@@ -30,7 +30,6 @@
<div id="jsError">
<h1>You must have JavaScript enabled to run Spanish-Quizzer.</h1>
<p>Spanish-Quizzer uses JavaScript to load vocab, apply filters, and check your answers.</p>
- <p>You can still view the <a href="data/">data sets</a>, but you can't use the Quizzer or the Reference Tables.</p>
</div>
</noscript>
diff --git a/js/app.js b/js/app.js
@@ -77,16 +77,6 @@ const homePage = Vue.component("homePage", {
</div>
`,
});
-const referencePage = Vue.component("referencePage", {
- template: `
- <div>
- <page-header @back="$emit('back');" image="images/arrow-left.svg"></page-header>
- <main>
- <reference-tables :data="this.$root.$data.data"></reference-tables>
- </main>
- </div>
- `,
-});
diff --git a/js/filtersPage.js b/js/filtersPage.js
@@ -213,11 +213,9 @@ let filterInput = Vue.component("filterInput", {
template: `
<div class="filtersInput" ref="container">
<div class="verbSettings" v-show="category === 'verbs'">
- <h1>Choose your settings and then click start.</h1>
-
<h2>
Verb Filters
- <button @click="AddFilter();">Add Filter</button>
+ <button class="icon" @click="AddFilter();"><img src="./images/plus.svg"></button>
</h2>
<div v-for="(filter, index) in verbFilters" class="filter">
@@ -243,17 +241,15 @@ let filterInput = Vue.component("filterInput", {
<option>Conj. → Eng.</option>
<option>Conj. → Esp.</option>
</select>
- <button class="itemRemove" @click="RemoveFilter(index);">╳</button>
+ <button class="icon" @click="RemoveFilter(index);"><img src="./images/trash.svg"></button>
</div>
</div>
<div class="vocabSettings" v-show="category === 'vocab'">
- <h1>Choose your settings and then click start.</h1>
-
<h2>
Vocabulary Filters
- <button @click="AddFilter();">Add Filter</button>
+ <button class="icon" @click="AddFilter();"><img src="./images/plus.svg"></button>
</h2>
<div v-for="(filter, index) in vocabFilters" class="filter">
@@ -294,7 +290,7 @@ let filterInput = Vue.component("filterInput", {
<option>Eng. → Esp.</option>
<option>Esp. → Eng.</option>
</select>
- <button class="itemRemove" @click="RemoveFilter(index);">╳</button>
+ <button class="icon" @click="RemoveFilter(index);"><img src="./images/trash.svg"></button>
</div>
</div>
</div>
diff --git a/js/quizzer.js b/js/quizzer.js
@@ -304,7 +304,7 @@ let quizzer = Vue.component("quizzer", {
<button @click="Reset();">Skip</button>
</div>
- <div class="quizzerFeedback bad" ref="feedback" v-show="!responceActive">
+ <div class="quizzerFeedback" ref="feedback" v-show="!responceActive">
<span v-if="settings.onMissedPrompt === 'Correct me'">
The correct answer is
<span class="quizzerFeedbackTerm" @click="Read(prompt[3], prompt[2]);">{{ prompt[3].toLowerCase() }}</span>.
diff --git a/js/reference.js b/js/reference.js
@@ -1,4 +1,5 @@
-let referenceTables = Vue.component("referenceTables", {
+// reference-tables component
+const referenceTables = Vue.component("referenceTables", {
props: {
data: {
type: Object,
@@ -101,3 +102,17 @@ let referenceTables = Vue.component("referenceTables", {
</div>
`
});
+
+
+
+// reference-page component
+const referencePage = Vue.component("referencePage", {
+ template: `
+ <div class="referencePage">
+ <page-header @back="$emit('back');" image="images/arrow-left.svg"></page-header>
+ <main>
+ <reference-tables :data="this.$root.$data.data"></reference-tables>
+ </main>
+ </div>
+ `,
+});
