fixed stretched spurdo in notifications, misc fixes, detect gif by extension for now
This commit is contained in:
parent
3257991f41
commit
55bc1a3414
|
@ -126,7 +126,13 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
|
.still-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
object-fit: contain;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%; /* If this isn't here, chrome will stretch the images */
|
height: 100%; /* If this isn't here, chrome will stretch the images */
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
|
|
|
@ -104,6 +104,10 @@
|
||||||
max-height: 12em;
|
max-height: 12em;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
//text-overflow: ellipsis;
|
//text-overflow: ellipsis;
|
||||||
|
|
||||||
|
img {
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-gradient {
|
.notification-gradient {
|
||||||
|
|
|
@ -12,14 +12,8 @@ const StillImage = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
animated: {
|
animated () {
|
||||||
get () {
|
return this.mimetype === 'image/gif' || this.src.endsWith('.gif')
|
||||||
// If mimetype is gif then it is certainly animated, if it's undefined - we don't know YET
|
|
||||||
return this.mimetype === 'image/gif' ? true : this.mimetype == null ? 'maybe' : false
|
|
||||||
},
|
|
||||||
set (val) {
|
|
||||||
this.mimetype = val
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -27,12 +21,6 @@ const StillImage = {
|
||||||
const canvas = this.$refs.canvas
|
const canvas = this.$refs.canvas
|
||||||
if (!canvas) return
|
if (!canvas) return
|
||||||
canvas.getContext('2d').drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
|
canvas.getContext('2d').drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height)
|
||||||
if (this.animated === 'maybe') {
|
|
||||||
fetch(this.src).then((data) => {
|
|
||||||
console.log(data)
|
|
||||||
this.animated = data.type
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
.still-image {
|
.still-image {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
&:hover canvas {
|
&:hover canvas {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
Loading…
Reference in New Issue