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

This commit is contained in:
Henry Jameson 2022-09-20 00:24:08 +03:00
parent d8730cad60
commit fa1d9f3fb4
3 changed files with 19 additions and 15 deletions

View File

@ -17,9 +17,9 @@ export const CURRENT_UPDATE_COUNTER = 1
const UpdateNotification = { const UpdateNotification = {
data () { data () {
return { return {
showingImage: false,
pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox, pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
showingMore: false, showingMore: false
contentHeight: 0
} }
}, },
components: { components: {
@ -32,11 +32,6 @@ const UpdateNotification = {
'shape-outside': 'url(' + mask + ')' 'shape-outside': 'url(' + mask + ')'
} }
}, },
dynamicStyles () {
return {
'--____extraInfoGroupHeight': this.contentHeight + 'px'
}
},
shouldShow () { shouldShow () {
return !this.$store.state.instance.disableUpdateNotification && return !this.$store.state.instance.disableUpdateNotification &&
this.$store.state.users.currentUser && this.$store.state.users.currentUser &&
@ -60,12 +55,12 @@ const UpdateNotification = {
} }
}, },
mounted () { mounted () {
this.contentHeightNoImage = this.$refs.animatedText.scrollHeight
// Workaround to get the text height only after mask loaded. A bit hacky. // Workaround to get the text height only after mask loaded. A bit hacky.
const newImg = new Image() const newImg = new Image()
newImg.onload = () => { newImg.onload = () => {
setTimeout(() => { setTimeout(() => { this.showingImage = true }, 100)
this.contentHeight = this.$refs.animatedText.scrollHeight
}, 100)
} }
newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
} }

View File

@ -35,6 +35,12 @@
margin-top: calc(-1 * var(--__top-fringe)); margin-top: calc(-1 * var(--__top-fringe));
margin-bottom: calc(-1 * var(--__bottom-fringe)); margin-bottom: calc(-1 * var(--__bottom-fringe));
margin-right: calc(-1 * var(--__right-fringe)); margin-right: calc(-1 * var(--__right-fringe));
&.-noImage {
.text {
padding-right: var(--__right-fringe);
}
}
} }
.panel-body { .panel-body {
@ -75,9 +81,9 @@
.extra-info-group { .extra-info-group {
transition: max-height, padding, height; transition: max-height, padding, height;
transition-timing-function: ease-in-out; transition-timing-function: ease-in;
transition-duration: 500ms; transition-duration: 700ms;
max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding max-height: 70vh;
mask: mask:
linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat, linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
linear-gradient(to top, white, white); linear-gradient(to top, white, white);

View File

@ -7,7 +7,6 @@
<div <div
class="UpdateNotificationModal panel" class="UpdateNotificationModal panel"
:class="{ '-peek': !showingMore }" :class="{ '-peek': !showingMore }"
:style="dynamicStyles"
> >
<div class="panel-heading"> <div class="panel-heading">
<span class="title"> <span class="title">
@ -15,8 +14,12 @@
</span> </span>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="content"> <div
class="content"
:class="{ '-noImage': !showingImage }"
>
<img <img
v-if="showingImage"
class="pleroma-tan" class="pleroma-tan"
:src="pleromaTanVariant" :src="pleromaTanVariant"
:style="pleromaTanStyles" :style="pleromaTanStyles"