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
This commit is contained in:
commit
74382595af
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue