Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use JS to dynamically set height of img modal

Browse Source
This commit is contained in:
JC Brand 2020-10-13 15:35:54 +02:00
parent e73d14304c
commit 395aa8cb95
3 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sass/_modal.scss
View File

@ -29,7 +29,6 @@
}
}
.modal-body--image {
height: 72vh;
.chat-image {
max-height: 99%;
max-width: 100%;

5
src/modals/image.js
View File

@ -4,6 +4,9 @@ import tpl_image_modal from "../templates/image_modal.js";
export default BootstrapModal.extend({
toHTML () {
return tpl_image_modal({'src': this.src});
return tpl_image_modal({
'src': this.src,
'onload': ev => (ev.target.parentElement.style.height = `${ev.target.height}px`)
});
}
});

27
src/templates/image_modal.js
View File

@ -3,17 +3,18 @@ import { __ } from '../i18n';
import { modal_close_button, modal_header_close_button } from "./buttons"
export default (o) => html`
<div class="modal-dialog fit-content" role="document">
<div class="modal-content fit-content">
<div class="modal-header">
<h4 class="modal-title" id="message-versions-modal-label">${__('Image: ')}<a target="_blank" rel="noopener" href="${o.src}">${o.src}</a></h4>
${modal_header_close_button}
export default (o) => {
return html`
<div class="modal-dialog fit-content" role="document">
<div class="modal-content fit-content">
<div class="modal-header">
<h4 class="modal-title" id="message-versions-modal-label">${__('Image: ')}<a target="_blank" rel="noopener" href="${o.src}">${o.src}</a></h4>
${modal_header_close_button}
</div>
<div class="modal-body modal-body--image fit-content">
<img class="chat-image" src="${o.src}" @load=${o.onload}>
</div>
<div class="modal-footer">${modal_close_button}</div>
</div>
<div class="modal-body modal-body--image fit-content">
<img class="chat-image" src="${o.src}"/>
</div>
<div class="modal-footer">${modal_close_button}</div>
</div>
</div>
`;
</div>`;
}