spanish-quizzer

commit abf953109a63ed3b47d1777ba0c08c0ccd1fca2f
parent 89108d62ac5082262da1c5af2ab9605238be8a3c
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Fri, 26 Feb 2021 08:57:35 -0800

Improve appearance on mobile devices

Diffstat:
M
css/app.css
 | 
16
++++++++++++++++
M
css/filtersPage.css
 | 
36
+++++++++++++++++++-----------------
M
css/quizzer.css
 | 
36
++++++++++++++++++++++++++++++++----
M
css/reference.css
 | 
24
+++++++++++++++++++++---

4 files changed, 88 insertions(+), 24 deletions(-)
diff --git a/css/app.css b/css/app.css
@@ -8,6 +8,11 @@
     margin-top: 15px;
     margin-bottom: 5px;
 }
+.home main div {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
 .home main button {
     width: 150px;
     height: 50px;
@@ -15,3 +20,14 @@
     margin: 10px;
     font-size: 15px;
 }
+@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
@@ -12,11 +12,6 @@
 .filtersInput h2 {
     font-size: 20px;
 }
-.filtersInput div {
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-top: 10px;
-}
 
 /* Filter */
 .filter {
@@ -35,7 +30,7 @@
 }
 
 /* Conjugation settings on mobile devices */
-@media only screen and (max-width: 510px) {
+@media only screen and (max-width: 550px) {
     .verbSettings .filter {
         width: 100%;
         margin: 10px auto;
@@ -48,7 +43,7 @@
 }
 
 /* Vocab settings on mobile devices */
-@media only screen and (max-width: 350px) {
+@media only screen and (max-width: 375px) {
     .vocabSettings .filter {
         width: 100%;
         margin: 10px auto;
@@ -68,11 +63,6 @@
     font-size: 20px;
     margin-bottom: 5px;
 }
-.settingsInput {
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-top: 10px;
-}
 .settingsInput div {
     text-align: left;
 }
@@ -87,26 +77,38 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 10px;
+}
+.filtersPage main>div {
+    margin-bottom: 20px;
 }
 
 /* Start/Resume Buttons */
 .settingButtons {
-    margin-top: 20px;
-    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 }
 .settingButtons button {
     width: 100px;
     height: 40px;
     font-size: 18px;
-    margin: 0px 5px;
+}
+.settingButtons button:first-child {
+    margin-right: 10px;
 }
 @media only screen and (max-width: 510px) {
+    /* Expand settings component*/
+    .settingsInput {
+        width: 100%;
+    }
+
     /* Expand Start/Resume buttons */
     .settingButtons {
-        width: calc(100% - 10px);
+        width: 100%;
     }
     .settingButtons button {
-        width: calc(50% - 15px);
+        width: 100%;
         height: 50px;
     }
 }
diff --git a/css/quizzer.css b/css/quizzer.css
@@ -1,6 +1,5 @@
 /******** quizzer component ********/
 .quizzer {
-    margin: 10px;
     padding: 10px;
     width: fit-content;
     width: -moz-fit-content;
@@ -28,7 +27,6 @@
 }
 .quizzerPrompt {
     cursor: pointer;
-    font-size: 15px;
 }
 
 /* Responce*/
@@ -42,13 +40,17 @@
 
 /* Buttons */
 .quizzerButtons {
-    width: max-content;
-    margin: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 }
 .quizzerButtons button {
     width: 75px;
     height: 25px;
 }
+.quizzerButtons button:first-child {
+    margin-right: 10px;
+}
 
 /* Feedback */
 .quizzerFeedback {
@@ -73,6 +75,24 @@
     height: 35px;
 }
 
+/* Mobile styles */
+@media only screen and (max-width: 500px) {
+    .quizzer {
+        border: none;
+        box-shadow: none;
+        width: 100%;
+        padding: 0px;
+    }
+    .quizzerInput {
+        height: 35px;
+    }
+    .quizzerButtons button {
+        height: 50px;
+        font-size: 18px;
+        width: 100%;
+    }
+}
+
 
 
 /******** quizzer-page component ********/
@@ -80,4 +100,12 @@
     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,9 +1,27 @@
 /******** reference-tables component styles ********/
 /* Controls */
 .referenceTableControls {
-    text-align: center;
-    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;
+    }
 }
 
 /* Table */