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 = {
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
}

View File

@ -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);

View File

@ -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"