feat(SettingsPage): support HomePage settings

- Add support for titleSize and contentSize

1 files changed, 23 insertions, 4 deletions

diff --git a/src/App.vue b/src/App.vue
index 20f769c..67915be 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,11 +48,22 @@
     </v-snackbar>
     <v-main>
       <v-container class="float-end w-50">
-        <HomePage v-if="atHome" />
-        <EditPage v-if="atEdit" @snackbar-notification="setSnackbarText" />
-        <SettingsPage v-if="atSettings" />
+        <HomePage v-if="atHome" :contentSize="contentSize" />
+        <EditPage v-else-if="atEdit" @snackbar-notification="setSnackbarText" />
+        <SettingsPage
+          v-else-if="atSettings"
+          @update-title-size="updateTitleSize"
+          @update-content-size="updateContentSize"
+          :realTitleSize="parseInt(titleSize)"
+          :realContentSize="contentSize"
+        />
       </v-container>
     </v-main>
+    <!-- This is a dirty workaround to use styles inside the template. Further
+    help needed. -->
+    <component :is="`style`">
+      .v-card-title { font-size: {{ titleSize }}; }
+    </component>
   </v-app>
 </template>
 
@@ -72,6 +83,8 @@ export default {
   },
 
   data: () => ({
+    titleSize: "35px",
+    contentSize: "text-h5",
     drawer: null,
     atHome: true,
     atEdit: false,
@@ -79,7 +92,7 @@ export default {
     snackbar: false,
     snackbarText: "Default snackbar text (End-user shouldn't see this)",
     bg: {
-      backgroundColor: "grey",
+      // backgroundColor: "grey",
       // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)",
       backgroundPosition: "center",
     },
@@ -105,6 +118,12 @@ export default {
       this.snackbarText = text;
       this.snackbar = true;
     },
+    updateTitleSize(s) {
+      this.titleSize = `${s}px`;
+    },
+    updateContentSize(s) {
+      this.contentSize = s;
+    },
   },
 };
 </script>