prevent jumps when image loads by adding a spacer

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

View File

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

View File

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

View File

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