diff options
| -rw-r--r-- | src/components/HelpModal.vue | 3 | ||||
| -rw-r--r-- | src/components/SCollapsible.vue | 25 |
2 files changed, 22 insertions, 6 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 46dfa2f..0356db8 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -450,8 +450,7 @@ export default defineComponent({ return this.downIconClasses + ' -rotate-90'; }, contentClasses(): string { - return 'py-2 mx-2 md:mx-4 text-sm md:text-base'; - // For some reason, a smaller margin sometimes results in the collapsible not fully expanding + return 'py-2 px-2 text-sm md:text-base'; }, anchorStyles(): Record<string,string> { return { diff --git a/src/components/SCollapsible.vue b/src/components/SCollapsible.vue index 4b414fc..4570ee0 100644 --- a/src/components/SCollapsible.vue +++ b/src/components/SCollapsible.vue @@ -3,9 +3,11 @@ <div class="hover:cursor-pointer" @click="collapsed = !collapsed"> <slot name="summary" :collapsed="collapsed">(Summary)</slot> </div> - <div :style="contentStyles" ref="content"> - <slot name="content">(Content)</slot> - </div> + <transition @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @before-leave="onBeforeLeave"> + <div v-show="!collapsed" :style="contentStyles" class="max-h-0" ref="content"> + <slot name="content">(Content)</slot> + </div> + </transition> </div> </template> @@ -27,7 +29,6 @@ export default defineComponent({ contentStyles(): Record<string,string> { return { overflow: 'hidden', - maxHeight: this.collapsed ? '0' : (this.$refs.content as HTMLDivElement).scrollHeight + 'px', opacity: this.collapsed ? '0' : '1', transitionProperty: 'max-height, opacity', transitionDuration: '300ms', @@ -35,5 +36,21 @@ export default defineComponent({ }; }, }, + methods: { + onEnter(el: HTMLDivElement){ + el.style.maxHeight = el.scrollHeight + 'px'; + }, + onAfterEnter(el: HTMLDivElement){ + el.style.maxHeight = 'none'; + // Allows the content to grow after the transition ends, as the scrollHeight sometimes is too short + }, + onBeforeLeave(el: HTMLDivElement){ + el.style.maxHeight = el.scrollHeight + 'px'; + el.offsetWidth; // Triggers reflow + }, + onLeave(el: HTMLDivElement){ + el.style.maxHeight = '0'; + }, + }, }); </script> |