commit b5dc57a7a9a193cdaa1016aaf0e4d7d4edbf55ca
parent 8e4c16eabf743fb97ac185c946db358c69d49626
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Tue, 23 Feb 2021 19:14:02 -0800
Refactor styles
Diffstat:
8 files changed, 85 insertions(+), 122 deletions(-)
diff --git a/css/app.css b/css/app.css
@@ -1,12 +1,13 @@
-/* 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 button {
width: 150px;
height: 50px;
@@ -14,8 +15,3 @@
margin: 10px;
font-size: 15px;
}
-
-/* Link to Reference Tables */
-.home main a {
- margin-top: 10px;
-}
diff --git a/css/filtersPage.css b/css/filtersPage.css
@@ -1,4 +1,9 @@
-/******** filter-input ********/
+/******** filter-input component ********/
+.filtersInput>div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
.filtersInput h1 {
font-size: 16px;
font-weight: normal;
@@ -6,7 +11,6 @@
}
.filtersInput h2 {
font-size: 20px;
- margin-bottom: 5px;
}
.filtersInput div {
margin-left: 10px;
@@ -38,9 +42,6 @@
/* Conjugation settings on mobile devices */
@media only screen and (max-width: 510px) {
- .verbSettings {
- width: calc(100% - 20px);
- }
.verbSettings .filter {
width: 100%;
margin: 10px auto;
@@ -54,9 +55,6 @@
/* Vocab settings on mobile devices */
@media only screen and (max-width: 350px) {
- .vocabSettings {
- width: calc(100% - 20px);
- }
.vocabSettings .filter {
width: 100%;
margin: 10px auto;
@@ -70,8 +68,9 @@
-/******** settings-input ********/
+/******** settings-input component ********/
.settingsInput h2 {
+ text-align: center;
font-size: 20px;
margin-bottom: 5px;
}
@@ -89,7 +88,7 @@
-/******** filters-page ********/
+/******** filters-page component ********/
.filtersPage main {
display: flex;
flex-direction: column;
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,29 +17,43 @@ 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;
@@ -56,7 +66,7 @@ body {
-/******** Control styles ********/
+/******** Other elements ********/
button:not(.itemRemove), input, select {
background-color: var(--background-color);
border: 1px solid var(--border-color);
@@ -76,50 +86,7 @@ button:disabled {
-/******** 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;
- 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);
-}
-
-main {
- grid-row: 2;
- grid-column: 2;
- text-align: center;
-}
-
-.label {
- font-weight: bold;
-}
-
-.good {
- color: green;
-}
-
-.bad {
- color: red;
-}
-
-
-
-/******** Dark mode styles ********/
+/******** Dark mode ********/
body.dark {
--theme-color: #0088AA;
--foreground-color: #E0E0E0;
@@ -127,11 +94,9 @@ body.dark {
--hover-color: #323436;
--border-color: #505050;
}
-
.dark button:not(.itemRemove), .dark input, .dark select {
--background-color: #222426;
}
-
.dark a {
color: #0080ff;
}
diff --git a/css/quizzer.css b/css/quizzer.css
@@ -1,5 +1,4 @@
-/******** Quizzer styles ********/
-/* Container */
+/******** quizzer component ********/
.quizzer {
margin: 10px;
padding: 10px;
@@ -12,6 +11,7 @@
/* Progress */
.quizzerProgress {
+ text-align: center;
font-size: 18px;
font-weight: bold;
margin: 0px;
@@ -41,6 +41,10 @@
}
/* Buttons */
+.quizzerButtons {
+ width: max-content;
+ margin: auto;
+}
.quizzerButtons button {
width: 75px;
height: 25px;
@@ -49,6 +53,8 @@
/* Feedback */
.quizzerFeedback {
margin-top: 15px;
+ color: red;
+ text-align: center;
}
.quizzerFeedbackTerm {
text-decoration-line: underline;
@@ -56,6 +62,9 @@
}
/* Congrats message */
+.congrats {
+ text-align: center;
+}
.congrats p {
margin: 20px;
}
@@ -63,3 +72,12 @@
width: 100px;
height: 35px;
}
+
+
+
+/******** quizzer-page component ********/
+.quizzer-page main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
diff --git a/css/reference.css b/css/reference.css
@@ -1,31 +1,19 @@
-/******** 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 {
+ text-align: center;
margin-top: 10px;
margin-bottom: 15px;
}
-
-
-/******** 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 +21,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 +34,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/js/app.js b/js/app.js
@@ -60,16 +60,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/quizzer.js b/js/quizzer.js
@@ -292,7 +292,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,
@@ -89,3 +90,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>
+ `,
+});
