abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-08 01:45:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove content jumping when loading image and video attachments

Browse Source
This commit is contained in:
bree
2021-07-08 10:22:42 -04:00
parent 69193e9a46
commit f0397f8af8
2 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/common/messaging/attachments/Attachment.module.scss
View File

@@ -17,18 +17,26 @@
margin-top: 4px;
}
&.image {
cursor: pointer;
&.image, &.video > video {
cursor: pointer;
max-height: 640px;
max-width: min(480px, 100%);
aspect-ratio: var(--width) / var(--height);
max-height: min(640px, var(--height-px));
max-width: min(480px, 100%, var(--width-px));
object-fit: contain;
}
&.loaded {
width: auto;
&.image {
&.long {
width: min(100%, var(--width-px));
height: auto;
}
&.tall {
height: min(100%, var(--height-px));
width: auto;
}
}
&.video {
@@ -39,14 +47,14 @@
video {
border-radius: 0 0 6px 6px;
max-height: 640px;
max-width: min(480px, 100%);
}
video.loaded {
width: auto;
height: auto;
&.long {
height: auto;
}
&.tall {
width: auto;
}
}
}