aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue27
-rw-r--r--src/components/HomePage.vue2
-rw-r--r--src/components/SettingsPage.vue73
-rw-r--r--src/components/SubCard.vue4
4 files changed, 98 insertions, 8 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>
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>