From 50043047aa5c8ce45ec143659bb629cd71182dc4 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sun, 1 Jan 2023 09:45:27 +0900 Subject: [PATCH] :art: --- .../frontend/src/pages/timeline.tutorial.vue | 35 ++++++++++++------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/packages/frontend/src/pages/timeline.tutorial.vue b/packages/frontend/src/pages/timeline.tutorial.vue index ae7b098b90..4b406ff6d1 100644 --- a/packages/frontend/src/pages/timeline.tutorial.vue +++ b/packages/frontend/src/pages/timeline.tutorial.vue @@ -1,6 +1,6 @@ <template> -<div class="_card"> - <div :class="$style.title" class="_title"> +<div :class="$style.container"> + <div :class="$style.title"> <div :class="$style.titleText"><i class="ti ti-info-circle"></i> {{ i18n.ts._tutorial.title }}</div> <div :class="$style.step"> <button class="_button" :class="$style.stepArrow" :disabled="tutorial === 0" @click="tutorial--"> @@ -12,27 +12,27 @@ </button> </div> </div> - <div v-if="tutorial === 0" class="_content"> + <div v-if="tutorial === 0" :class="$style.body"> <div>{{ i18n.ts._tutorial.step1_1 }}</div> <div>{{ i18n.ts._tutorial.step1_2 }}</div> <div>{{ i18n.ts._tutorial.step1_3 }}</div> </div> - <div v-else-if="tutorial === 1" class="_content"> + <div v-else-if="tutorial === 1" :class="$style.body"> <div>{{ i18n.ts._tutorial.step2_1 }}</div> <div>{{ i18n.ts._tutorial.step2_2 }}</div> <MkA class="_link" to="/settings/profile">{{ i18n.ts.editProfile }}</MkA> </div> - <div v-else-if="tutorial === 2" class="_content"> + <div v-else-if="tutorial === 2" :class="$style.body"> <div>{{ i18n.ts._tutorial.step3_1 }}</div> <div>{{ i18n.ts._tutorial.step3_2 }}</div> <div>{{ i18n.ts._tutorial.step3_3 }}</div> <small :class="$style.small">{{ i18n.ts._tutorial.step3_4 }}</small> </div> - <div v-else-if="tutorial === 3" class="_content"> + <div v-else-if="tutorial === 3" :class="$style.body"> <div>{{ i18n.ts._tutorial.step4_1 }}</div> <div>{{ i18n.ts._tutorial.step4_2 }}</div> </div> - <div v-else-if="tutorial === 4" class="_content"> + <div v-else-if="tutorial === 4" :class="$style.body"> <div>{{ i18n.ts._tutorial.step5_1 }}</div> <I18n :src="i18n.ts._tutorial.step5_2" tag="div"> <template #featured> @@ -45,12 +45,12 @@ <div>{{ i18n.ts._tutorial.step5_3 }}</div> <small :class="$style.small">{{ i18n.ts._tutorial.step5_4 }}</small> </div> - <div v-else-if="tutorial === 5" class="_content"> + <div v-else-if="tutorial === 5" :class="$style.body"> <div>{{ i18n.ts._tutorial.step6_1 }}</div> <div>{{ i18n.ts._tutorial.step6_2 }}</div> <div>{{ i18n.ts._tutorial.step6_3 }}</div> </div> - <div v-else-if="tutorial === 6" class="_content"> + <div v-else-if="tutorial === 6" :class="$style.body"> <div>{{ i18n.ts._tutorial.step7_1 }}</div> <I18n :src="i18n.ts._tutorial.step7_2" tag="div"> <template #help> @@ -59,15 +59,15 @@ </I18n> <div>{{ i18n.ts._tutorial.step7_3 }}</div> </div> - <div v-else-if="tutorial === 7" class="_content"> + <div v-else-if="tutorial === 7" :class="$style.body"> <div>{{ i18n.ts._tutorial.step8_1 }}</div> <div>{{ i18n.ts._tutorial.step8_2 }}</div> <small :class="$style.small">{{ i18n.ts._tutorial.step8_3 }}</small> </div> - <div class="_footer" :class="$style.footer"> + <div :class="$style.footer"> <template v-if="tutorial === tutorialsNumber - 1"> - <MkPushNotificationAllowButton :class="$style.footerItem" primary show-only-to-register @click="tutorial = -1" /> + <MkPushNotificationAllowButton :class="$style.footerItem" primary show-only-to-register @click="tutorial = -1"/> <MkButton :class="$style.footerItem" :primary="false" @click="tutorial = -1">{{ i18n.ts.noThankYou }}</MkButton> </template> <template v-else> @@ -97,9 +97,15 @@ const tutorial = computed({ opacity: 0.7; } +.container { + border: solid 2px var(--accent); +} + .title { display: flex; flex-wrap: wrap; + padding: 22px 32px; + font-weight: bold; &Text { margin: 4px 0; @@ -129,11 +135,16 @@ const tutorial = computed({ } } +.body { + padding: 0 32px; +} + .footer { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: right; + padding: 22px 32px; &Item { margin: 4px;