diff options
Diffstat (limited to 'src/components/update_notification')
3 files changed, 47 insertions, 46 deletions
diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js index 399b8d46..ba008d81 100644 --- a/src/components/update_notification/update_notification.js +++ b/src/components/update_notification/update_notification.js @@ -29,6 +29,11 @@ const UpdateNotification = { 'shape-outside': 'url(' + this.pleromaTanVariant + ')' } }, + dynamicStyles () { + return { + '--____extraInfoGroupHeight': this.contentHeight + 'px' + } + }, shouldShow () { return !this.$store.state.instance.disableUpdateNotification && this.$store.state.users.currentUser && @@ -53,8 +58,8 @@ const UpdateNotification = { }, mounted () { setTimeout(() => { - this.contentHeight = this.$refs.content.offsetHeight - }, 10) + this.contentHeight = this.$refs.animatedText.scrollHeight + }, 1000) } } diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss index 43a82f16..c3b1bc13 100644 --- a/src/components/update_notification/update_notification.scss +++ b/src/components/update_notification/update_notification.scss @@ -2,27 +2,20 @@ .UpdateNotification { overflow: hidden; } + .UpdateNotificationModal { --__top-fringe: 18em; // how much pleroma-tan should stick her head above --__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant --__right-fringe: 8em; font-size: 15px; - /* Explanation: - * Modal is positioned vertically centered. - * 100vh - 100% = Distance between modal's top+bottom boundaries and screen - * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen - * + 10% - we move modal completely off-screen, it's top boundary touches - * bottom of the screen - * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible - */ position: relative; transition: transform; transition-timing-function: ease-in-out; transition-duration: 500ms; .text { - width: 40em; + max-width: 40em; padding-left: 1em; } @@ -80,15 +73,21 @@ min-height: var(--__bottom-fringe); } - .extra-info { + .extra-info-group { transition: max-height, padding, height; transition-timing-function: ease-in-out; transition-duration: 500ms; - max-height: auto; - height: auto; + max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding + mask: + linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat, + linear-gradient(to top, white, white); } &.-peek { + /* Explanation: + * 100vh - 100% = Distance between modal's top+bottom boundaries and screen + * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen + */ transform: translateY(calc(((100vh - 100%) / 2))); .pleroma-tan { @@ -97,11 +96,8 @@ shape-image-threshold: 0.7; } - .extra-info { + .extra-info-group { max-height: 0; - height: 0; - display: none; - overflow: hidden; } } } diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue index 54cb686b..60cf189d 100644 --- a/src/components/update_notification/update_notification.vue +++ b/src/components/update_notification/update_notification.vue @@ -7,6 +7,7 @@ <div class="UpdateNotificationModal panel" :class="{ '-peek': !showingMore }" + :style="dynamicStyles" > <div class="panel-heading"> <span class="title"> @@ -14,10 +15,7 @@ </span> </div> <div class="panel-body"> - <div - ref="content" - class="content" - > + <div class="content"> <img class="pleroma-tan" :src="pleromaTanVariant" @@ -28,30 +26,32 @@ <p> {{ $t('update.big_update_content') }} </p> - <i18n-t - keypath="update.update_bugs" - tag="p" - class="extra-info" - > - <template #pleromaGitlab> - <a - target="_blank" - href="https://git.pleroma.social/" - >{{ $t('update.update_bugs_gitlab') }}</a> - </template> - </i18n-t> - <i18n-t - keypath="update.update_changelog" - tag="p" - class="extra-info" - > - <template #theFullChangelog> - <a - target="_blank" - href="https://pleroma.social/announcements/" - >{{ $t('update.update_changelog_here') }}</a> - </template> - </i18n-t> + <div class="extra-info-group" ref="animatedText"> + <i18n-t + keypath="update.update_bugs" + tag="p" + class="extra-info" + > + <template #pleromaGitlab> + <a + target="_blank" + href="https://git.pleroma.social/" + >{{ $t('update.update_bugs_gitlab') }}</a> + </template> + </i18n-t> + <i18n-t + keypath="update.update_changelog" + tag="p" + class="extra-info" + > + <template #theFullChangelog> + <a + target="_blank" + href="https://pleroma.social/announcements/" + >{{ $t('update.update_changelog_here') }}</a> + </template> + </i18n-t> + </div> </div> <div class="spacer-bottom" /> </div> |