mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 11:35:04 +01:00
Code Issues Projects Releases Wiki Activity

prevent jumps when image loads by adding a spacer

Browse Source
This commit is contained in:
Bruno Windels 2020-10-31 00:25:05 +01:00
parent 5aa2c7dc5c
commit 8507a3eb16
3 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/platform/web/ui/css/themes/element/theme.css
View File

@ -494,6 +494,8 @@ ul.Timeline > li.messageStatus .message-container > p {
.message-container { .message-container {
padding: 1px 10px 0px 10px; padding: 1px 10px 0px 10px;
margin: 5px 10px 0 10px; margin: 5px 10px 0 10px;
/* so the .picture can grow horizontally and its spacer can grow vertically */
width: 100%;
} }
.message-container .profile { .message-container .profile {
@ -505,6 +507,10 @@ ul.Timeline > li.messageStatus .message-container > p {
--avatar-size: 25px; --avatar-size: 25px;
} }
.TextMessageView {
width: 100%;
}
.TextMessageView.continuation .message-container { .TextMessageView.continuation .message-container {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -534,22 +540,28 @@ ul.Timeline > li.messageStatus .message-container > p {
} }
.message-container a.picture { .message-container .picture {
display: grid; display: grid;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
margin-top: 4px; margin-top: 4px;
border-radius: 4px; border-radius: 4px;
width: 100%;
} }
.message-container a.picture > img { /* .spacer grows with an inline padding-top to the size of the image,
grid-row: 1 / 2; so the timeline doesn't jump when the image loads */
grid-column: 1 / 2; .message-container .picture > * {
grid-row: 1;
grid-column: 1;
} }
.message-container a.picture > time { .message-container .picture > img {
grid-row: 1 / 2; width: 100%;
grid-column: 1 / 2; height: auto;
}
.message-container .picture > time {
align-self: end; align-self: end;
justify-self: end; justify-self: end;
color: #2e2f32; color: #2e2f32;
@ -559,6 +571,9 @@ ul.Timeline > li.messageStatus .message-container > p {
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
border-radius: 4px; border-radius: 4px;
} }
.message-container .picture > .spacer {
width: 100%;
}
.TextMessageView.pending .message-container { .TextMessageView.pending .message-container {
color: #ccc; color: #ccc;

6
src/platform/web/ui/css/timeline.css
View File

@ -37,14 +37,12 @@ limitations under the License.
margin: 5px 0; margin: 5px 0;
} }
.message-container a.picture { .message-container .picture {
display: block; display: block;
} }
.message-container a.picture > img { .message-container .picture > img {
display: block; display: block;
width: 100%;
height: auto;
} }
.TextMessageView { .TextMessageView {

30
src/platform/web/ui/session/room/timeline/ImageView.js
View File

@ -19,20 +19,20 @@ import {renderMessage} from "./common.js";
export class ImageView extends TemplateView { export class ImageView extends TemplateView {
render(t, vm) { render(t, vm) {
return renderMessage(t, vm, const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100;
t.div([ return renderMessage(t, vm, [
t.a({href: vm.lightboxUrl, className: "picture"}, [ t.a({href: vm.lightboxUrl, className: "picture", style: `max-width: ${vm.thumbnailWidth}px`}, [
t.img({ t.div({className: "spacer", style: `padding-top: ${heightRatioPercent}%;`}),
src: vm => vm.thumbnailUrl, t.img({
loading: "lazy", loading: "lazy",
alt: vm => vm.label, src: vm => vm.thumbnailUrl,
title: vm => vm.label, alt: vm => vm.label,
style: vm => `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;` title: vm => vm.label,
}), style: `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
t.time(vm.date + " " + vm.time) }),
]), t.time(vm.date + " " + vm.time),
t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error))) ]),
]) t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
); ]);
} }
} }