feat(SettingsPage): support HomePage settings

- Add support for titleSize and contentSize

3 files changed, 75 insertions, 4 deletions

diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 3a50c80..20843b5 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -6,6 +6,7 @@
       :key="i"
       :title="k"
       :content="markdownToHtml(v)"
+      :contentSize="contentSize"
     />
   </div>
 </template>
@@ -16,6 +17,7 @@ import { marked } from "marked";
 
 export default {
   name: "HomePage",
+  props: ["contentSize"],
 
   components: {
     SubCard,
diff --git a/src/components/SettingsPage.vue b/src/components/SettingsPage.vue
index b3174bf..da10500 100644
--- a/src/components/SettingsPage.vue
+++ b/src/components/SettingsPage.vue
@@ -1,13 +1,82 @@
 <template>
-  <v-file-input show-size label="Wallpaper"></v-file-input>
+  <v-card class="mx-auto" variant="outlined" max-height="500">
+    <v-card-title class="text-h5 font-weight-regular align-center">
+      <span>{{ currentTitle }}</span>
+    </v-card-title>
+    <v-window v-model="location" show-arrows="hover">
+      <v-window-item :value="1">
+        <v-card-text>
+          <v-container fluid>
+            <v-row>
+              <v-col>
+                <v-card-text>Title Size: {{ titleSize }}px</v-card-text>
+                <v-slider
+                  v-model="titleSize"
+                  :min="25"
+                  :max="35"
+                  step="1"
+                ></v-slider>
+              </v-col>
+              <v-col>
+                <v-card-text>Content Size</v-card-text>
+                <v-radio-group v-model="contentSize" column>
+                  <v-radio label="text-h4" value="text-h4"></v-radio>
+                  <v-radio label="text-h5" value="text-h5"></v-radio>
+                  <v-radio label="text-h6" value="text-h6"></v-radio>
+                </v-radio-group>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+      </v-window-item>
+      <v-window-item :value="2">
+        <v-card-text>
+          <span class="text-h2">Card {{ n }}</span>
+        </v-card-text>
+      </v-window-item>
+    </v-window>
+  </v-card>
 </template>
 
 <script>
 export default {
   name: "SettingsPage",
+  props: ["realTitleSize", "realContentSize"],
+  emits: ["updateTitleSize", "updateContentSize"],
+
+  computed: {
+    currentTitle() {
+      switch (this.location) {
+        case 1:
+          return "MainPage Settings";
+        default:
+          return "About Otonashi";
+      }
+    },
+  },
+
+  watch: {
+    // eslint-disable-next-line no-unused-vars
+    titleSize(s, _) {
+      this.$emit("updateTitleSize", s);
+    },
+    // eslint-disable-next-line no-unused-vars
+    contentSize(s, _) {
+      this.$emit("updateContentSize", s);
+    },
+  },
+
+  mounted() {
+    // Sync titleSize with realTitleSize
+    this.titleSize = this.realTitleSize;
+    // Same
+    this.contentSize = this.realContentSize;
+  },
 
   data: () => ({
-    //
+    titleSize: 35,
+    contentSize: "text-h5",
+    location: 1,
   }),
 };
 </script>
diff --git a/src/components/SubCard.vue b/src/components/SubCard.vue
index 5a08e3b..3590fa0 100644
--- a/src/components/SubCard.vue
+++ b/src/components/SubCard.vue
@@ -2,7 +2,7 @@
   <v-card variant="outlined">
     <v-card-item>
       <v-card-title>{{ title }}</v-card-title>
-      <div v-html="content"></div>
+      <div :class="contentSize" v-html="content"></div>
     </v-card-item>
   </v-card>
 </template>
@@ -13,6 +13,6 @@ export default {
   data: () => ({
     //
   }),
-  props: ["title", "content"],
+  props: ["title", "content", "contentSize"],
 };
 </script>