logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 74382595af3195e392bbce3f116cbd359b1102d9
parent d8730cad602fe5ba7faf7cefc4a1a67cd0896d9d
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date:   Tue, 20 Sep 2022 17:34:02 +0000

Merge branch 'more-apology-fixes' into 'develop'

using the half-shit approach since proper approach is full-shit

Closes #1182

See merge request pleroma/pleroma-fe!1641

Diffstat:

Msrc/components/update_notification/update_notification.js15+++++----------
Msrc/components/update_notification/update_notification.scss12+++++++++---
Msrc/components/update_notification/update_notification.vue7+++++--
3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js @@ -17,9 +17,9 @@ export const CURRENT_UPDATE_COUNTER = 1 const UpdateNotification = { data () { return { + showingImage: false, pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox, - showingMore: false, - contentHeight: 0 + showingMore: false } }, components: { @@ -32,11 +32,6 @@ const UpdateNotification = { 'shape-outside': 'url(' + mask + ')' } }, - dynamicStyles () { - return { - '--____extraInfoGroupHeight': this.contentHeight + 'px' - } - }, shouldShow () { return !this.$store.state.instance.disableUpdateNotification && this.$store.state.users.currentUser && @@ -60,12 +55,12 @@ const UpdateNotification = { } }, mounted () { + this.contentHeightNoImage = this.$refs.animatedText.scrollHeight + // Workaround to get the text height only after mask loaded. A bit hacky. const newImg = new Image() newImg.onload = () => { - setTimeout(() => { - this.contentHeight = this.$refs.animatedText.scrollHeight - }, 100) + setTimeout(() => { this.showingImage = true }, 100) } newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask } diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss @@ -35,6 +35,12 @@ margin-top: calc(-1 * var(--__top-fringe)); margin-bottom: calc(-1 * var(--__bottom-fringe)); margin-right: calc(-1 * var(--__right-fringe)); + + &.-noImage { + .text { + padding-right: var(--__right-fringe); + } + } } .panel-body { @@ -75,9 +81,9 @@ .extra-info-group { transition: max-height, padding, height; - transition-timing-function: ease-in-out; - transition-duration: 500ms; - max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding + transition-timing-function: ease-in; + transition-duration: 700ms; + max-height: 70vh; mask: linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat, linear-gradient(to top, white, white); diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue @@ -7,7 +7,6 @@ <div class="UpdateNotificationModal panel" :class="{ '-peek': !showingMore }" - :style="dynamicStyles" > <div class="panel-heading"> <span class="title"> @@ -15,8 +14,12 @@ </span> </div> <div class="panel-body"> - <div class="content"> + <div + class="content" + :class="{ '-noImage': !showingImage }" + > <img + v-if="showingImage" class="pleroma-tan" :src="pleromaTanVariant" :style="pleromaTanStyles"