mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 11:35:04 +01:00
prevent jumps when image loads by adding a spacer
This commit is contained in:
parent
5aa2c7dc5c
commit
8507a3eb16
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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)))
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user