diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 4ee5153b..a1b35d91 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -126,7 +126,13 @@ display: flex; flex: 1; + .still-image { + width: 100%; + height: 100%; + } + img { + object-fit: contain; width: 100%; height: 100%; /* If this isn't here, chrome will stretch the images */ max-height: 500px; diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 241f10b4..4fda255b 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -104,6 +104,10 @@ max-height: 12em; overflow-y: hidden; //text-overflow: ellipsis; + + img { + object-fit: contain; + } } .notification-gradient { diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index e674b932..595652f2 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -12,14 +12,8 @@ const StillImage = { } }, computed: { - animated: { - get () { - // 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 - } + animated () { + return this.mimetype === 'image/gif' || this.src.endsWith('.gif') } }, methods: { @@ -27,12 +21,6 @@ const StillImage = { const canvas = this.$refs.canvas if (!canvas) return 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 - }) - } } } } diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index cc426fff..b141cdaf 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -11,6 +11,7 @@ @import '../../_variables.scss'; .still-image { position: relative; + line-height: 0; &:hover canvas { display: none;