From 4d58422421c454c82d3cfaf1132f14ebc02e6399 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 9 Nov 2022 10:51:58 -0800
Subject: [PATCH] dynamic height

---
 package.json                                  |  2 +-
 .../src/components/MkTutorialDialog.vue       | 77 ++++++++++++-------
 2 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 185fe38a4..8331dfb12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.10-b.6",
+	"version": "12.119.0-calc.10-b.7",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index cc0cc4a1c..c6017e152 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -2,7 +2,10 @@
 <XModalWindow
 	ref="dialog"
 	:width="800"
-	:height="500"
+	:height="600"
+	:style="{
+		'max-height': `calc(600px - ${filterSectionHeight}px)`
+	}"
 	@close="dialog.close()"
 	@closed="$emit('closed')"
 >
@@ -61,31 +64,43 @@
 								<span>{{ timelines.length }}</span>
 							</template>
 						</I18n>
-						<I18n :src="i18n.ts._tutorial.step5_3" tag="div">
-							<template #icon>
-								<i class="ph-house-bold ph-lg"/>
-							</template>
-						</I18n>
-						<I18n v-if="timelines.includes('local')" :src="i18n.ts._tutorial.step5_4" tag="div">
-							<template #icon>
-								<i class="ph-users-bold ph-lg"/>
-							</template>
-						</I18n>
-						<I18n v-if="timelines.includes('recommended')" :src="i18n.ts._tutorial.step5_5" tag="div">
-							<template #icon>
-								<i class="ph-thumbs-up-bold ph-lg"/>
-							</template>
-						</I18n>
-						<I18n v-if="timelines.includes('social')" :src="i18n.ts._tutorial.step5_6" tag="div">
-							<template #icon>
-								<i class="ph-handshake-bold ph-lg"/>
-							</template>
-						</I18n>
-						<I18n v-if="timelines.includes('global')" :src="i18n.ts._tutorial.step5_7" tag="div">
-							<template #icon>
-								<i class="ph-planet-bold ph-lg"/>
-							</template>
-						</I18n>
+						<ul>
+							<li>
+								<I18n :src="i18n.ts._tutorial.step5_3" tag="div">
+									<template #icon>
+										<i class="ph-house-bold ph-lg"/>
+									</template>
+								</I18n>
+							</li>
+							<li v-if="timelines.includes('local')">
+								<I18n :src="i18n.ts._tutorial.step5_4" tag="div">
+									<template #icon>
+										<i class="ph-users-bold ph-lg"/>
+									</template>
+								</I18n>
+							</li>
+							<li v-if="timelines.includes('recommended')">
+								<I18n :src="i18n.ts._tutorial.step5_5" tag="div">
+									<template #icon>
+										<i class="ph-thumbs-up-bold ph-lg"/>
+									</template>
+								</I18n>
+							</li>
+							<li v-if="timelines.includes('social')">
+								<I18n :src="i18n.ts._tutorial.step5_6" tag="div">
+									<template #icon>
+										<i class="ph-handshake-bold ph-lg"/>
+									</template>
+								</I18n>
+							</li>
+							<li v-if="timelines.includes('global')">
+								<I18n :src="i18n.ts._tutorial.step5_7" tag="div">
+									<template #icon>
+										<i class="ph-planet-bold ph-lg"/>
+									</template>
+								</I18n>
+							</li>
+						</ul>
 					</div>
 					<div v-else-if="tutorial === 5" key="6" class="_content">
 						<h3>{{ i18n.ts._tutorial.step6_1 }}</h3>
@@ -153,6 +168,14 @@ const tutorial = computed({
 	set(value) { defaultStore.set('tutorial', value); },
 });
 
+const filterSectionHeight = computed({
+	get() {
+		const section = document.getElementsByClassName('tbkwesmv') as HTMLCollectionOf<HTMLElement>;
+		return section[0] ? section[0].offsetHeight : 0;
+	},
+	set() {},
+});
+
 function close(res) {
 	tutorial.value = -1;
 	dialog.close();
@@ -162,7 +185,7 @@ function close(res) {
 <style lang="scss" scoped>
 .fade-enter-active,
 .fade-leave-active {
-	transition: opacity 0.5s ease 0.5s;
+	transition: opacity 0.15s ease 0.1s;
 }
 .fade-enter-from,
 .fade-leave-to {