natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dynamic height

This commit is contained in:
ThatOneCalculator 2022-11-09 10:51:58 -08:00
parent 9eddfc0c88
commit 4d58422421
2 changed files with 51 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.119.0-calc.10-b.6", "version": "12.119.0-calc.10-b.7",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

35
packages/client/src/components/MkTutorialDialog.vue
View File

@ -2,7 +2,10 @@
<XModalWindow <XModalWindow
ref="dialog" ref="dialog"
:width="800" :width="800"
:height="500" :height="600"
:style="{
'max-height': `calc(600px - ${filterSectionHeight}px)`
}"
@close="dialog.close()" @close="dialog.close()"
@closed="$emit('closed')" @closed="$emit('closed')"
> >
@ -61,31 +64,43 @@
<span>{{ timelines.length }}</span> <span>{{ timelines.length }}</span>
</template> </template>
</I18n> </I18n>
<ul>
<li>
<I18n :src="i18n.ts._tutorial.step5_3" tag="div"> <I18n :src="i18n.ts._tutorial.step5_3" tag="div">
<template #icon> <template #icon>
<i class="ph-house-bold ph-lg"/> <i class="ph-house-bold ph-lg"/>
</template> </template>
</I18n> </I18n>
<I18n v-if="timelines.includes('local')" :src="i18n.ts._tutorial.step5_4" tag="div"> </li>
<li v-if="timelines.includes('local')">
<I18n :src="i18n.ts._tutorial.step5_4" tag="div">
<template #icon> <template #icon>
<i class="ph-users-bold ph-lg"/> <i class="ph-users-bold ph-lg"/>
</template> </template>
</I18n> </I18n>
<I18n v-if="timelines.includes('recommended')" :src="i18n.ts._tutorial.step5_5" tag="div"> </li>
<li v-if="timelines.includes('recommended')">
<I18n :src="i18n.ts._tutorial.step5_5" tag="div">
<template #icon> <template #icon>
<i class="ph-thumbs-up-bold ph-lg"/> <i class="ph-thumbs-up-bold ph-lg"/>
</template> </template>
</I18n> </I18n>
<I18n v-if="timelines.includes('social')" :src="i18n.ts._tutorial.step5_6" tag="div"> </li>
<li v-if="timelines.includes('social')">
<I18n :src="i18n.ts._tutorial.step5_6" tag="div">
<template #icon> <template #icon>
<i class="ph-handshake-bold ph-lg"/> <i class="ph-handshake-bold ph-lg"/>
</template> </template>
</I18n> </I18n>
<I18n v-if="timelines.includes('global')" :src="i18n.ts._tutorial.step5_7" tag="div"> </li>
<li v-if="timelines.includes('global')">
<I18n :src="i18n.ts._tutorial.step5_7" tag="div">
<template #icon> <template #icon>
<i class="ph-planet-bold ph-lg"/> <i class="ph-planet-bold ph-lg"/>
</template> </template>
</I18n> </I18n>
</li>
</ul>
</div> </div>
<div v-else-if="tutorial === 5" key="6" class="_content"> <div v-else-if="tutorial === 5" key="6" class="_content">
<h3>{{ i18n.ts._tutorial.step6_1 }}</h3> <h3>{{ i18n.ts._tutorial.step6_1 }}</h3>
@ -153,6 +168,14 @@ const tutorial = computed({
set(value) { defaultStore.set('tutorial', value); }, 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) { function close(res) {
tutorial.value = -1; tutorial.value = -1;
dialog.close(); dialog.close();
@ -162,7 +185,7 @@ function close(res) {
<style lang="scss" scoped> <style lang="scss" scoped>
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.5s ease 0.5s; transition: opacity 0.15s ease 0.1s;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {