mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 11:35:04 +01:00
dom changes for timeline image view
This commit is contained in:
parent
5a31bc5f2b
commit
5aa2c7dc5c
@ -19,27 +19,20 @@ import {renderMessage} from "./common.js";
|
|||||||
|
|
||||||
export class ImageView extends TemplateView {
|
export class ImageView extends TemplateView {
|
||||||
render(t, vm) {
|
render(t, vm) {
|
||||||
// replace with css aspect-ratio once supported
|
return renderMessage(t, vm,
|
||||||
const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100;
|
t.div([
|
||||||
const image = t.img({
|
t.a({href: vm.lightboxUrl, className: "picture"}, [
|
||||||
className: "picture",
|
t.img({
|
||||||
src: vm => vm.thumbnailUrl,
|
src: vm => vm.thumbnailUrl,
|
||||||
width: vm.thumbnailWidth,
|
|
||||||
height: vm.thumbnailHeight,
|
|
||||||
loading: "lazy",
|
loading: "lazy",
|
||||||
alt: vm => vm.label,
|
alt: vm => vm.label,
|
||||||
title: vm => vm.label,
|
title: vm => vm.label,
|
||||||
});
|
style: vm => `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
|
||||||
const linkContainer = t.a({
|
}),
|
||||||
href: vm.lightboxUrl,
|
t.time(vm.date + " " + vm.time)
|
||||||
style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
|
]),
|
||||||
}, [
|
|
||||||
image,
|
|
||||||
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)))
|
||||||
]);
|
])
|
||||||
|
|
||||||
return renderMessage(t, vm,
|
|
||||||
[t.div(linkContainer), t.p(t.time(vm.date + " " + vm.time))]
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user