spanish-quizzer

commit 5e24bc5c5de6855d927328e6f76c01f6bd99d93d
parent 32e07d350f0a67f7700d4d117abfd67f4f6b5be1
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Wed, 26 May 2021 21:31:26 -0700

Improve home page

Diffstat:
M
css/app.css
 | 
71
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------
M
js/app.js
 | 
12
+++++++++---

2 files changed, 68 insertions(+), 15 deletions(-)
diff --git a/css/app.css b/css/app.css
@@ -1,32 +1,79 @@
 /******** home-page component ********/
-.home main {
+.home {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* resume session banner */
+.home #resumeBanner {
     text-align: center;
+    padding: 10px;
+    background-color: #cccccc;
+}
+.home #resumeBanner a {
+    color: var(--foreground-color);
+    text-decoration: none;
+}
+.home #resumeBanner button {
+    position: absolute;
+    right: 10px;
 }
-.home main h1 {
-    font-weight: bold;
-    margin-top: 15px;
-    margin-bottom: 5px;
+.home #resumeBanner button img {
+    height: 24px;
+    width: 24px;
+}
+.dark .home #resumeBanner {
+    background-color: #333333;
+}
+.dark .home #resumeBanner button {
+    filter: invert(90%);
+}
+
+/* main content */
+.home main {
+    flex-grow: 1;
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.home h1 {
+    font-size: 40px;
+    max-width: 500px;
 }
 .home main div {
+    margin: 10px 0px;
+    width: 510px;
     display: flex;
     flex-direction: row;
-    justify-content: center;
-    margin-bottom: 5px;
 }
-.home main button {
-    width: 175px;
+.home main div button {
+    flex-grow: 1;
     height: 50px;
     line-height: 50px;
-    margin: 10px;
+    margin: 0px 5px;
 }
+
+/* mobile styles */
 @media only screen and (max-width: 550px) {
+    .home main {
+        justify-content: flex-start;
+    }
+    .home h1 {
+        width: 100%;
+        font-size: 30px;
+        text-align: center;
+    }
     .home main div {
         flex-direction: column;
         align-items: stretch;
+        width: 100%;
     }
-    .home main button {
-        width: auto;
+    .home main div button {
         height: 60px;
         line-height: 60px;
+        margin: 10px 0px;
     }
 }
diff --git a/js/app.js b/js/app.js
@@ -81,7 +81,10 @@ const pageHeader = Vue.component("pageHeader", {
 // App pages
 const homePage = Vue.component("homePage", {
     data: function() {
-        return {isResumable: false};
+        return {
+            isResumable: false,
+            showResumeBanner: true,
+        };
     },
     methods: {
         /**
@@ -120,14 +123,17 @@ const homePage = Vue.component("homePage", {
     template: `
         <div class="home">
             <page-header icon2="settings" label2="Settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
+            <div v-if="isResumable && showResumeBanner" id="resumeBanner">
+                <router-link v-if="isResumable" to="/quizzer">Resume previous session</router-link>
+                <button @click="showResumeBanner=false" class="icon" title="Dismiss"><img alt="" src="images/x.svg"></button>
+            </div>
             <main>
-                <h1>What do you want to study?</h1>
+                <h1>The best way to study Spanish vocabulary and verb conjugations</h1>
                 <div>
                     <router-link tag="button" to="/verbs">Study Conjugations</router-link>
                     <router-link tag="button" to="/vocab">Study Vocab</router-link>
                     <router-link tag="button" to="/reference">Reference Tables</router-link>
                 </div>
-                <router-link v-if="isResumable" to="/quizzer">Resume previous session</router-link>
             </main>
         </div>
     `,