Use JS to dynamically set height of img modal
This commit is contained in:
parent
e73d14304c
commit
395aa8cb95
|
@ -29,7 +29,6 @@
|
|||
}
|
||||
}
|
||||
.modal-body--image {
|
||||
height: 72vh;
|
||||
.chat-image {
|
||||
max-height: 99%;
|
||||
max-width: 100%;
|
||||
|
|
|
@ -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`)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -3,7 +3,8 @@ import { __ } from '../i18n';
|
|||
import { modal_close_button, modal_header_close_button } from "./buttons"
|
||||
|
||||
|
||||
export default (o) => html`
|
||||
export default (o) => {
|
||||
return html`
|
||||
<div class="modal-dialog fit-content" role="document">
|
||||
<div class="modal-content fit-content">
|
||||
<div class="modal-header">
|
||||
|
@ -11,9 +12,9 @@ export default (o) => html`
|
|||
${modal_header_close_button}
|
||||
</div>
|
||||
<div class="modal-body modal-body--image fit-content">
|
||||
<img class="chat-image" src="${o.src}"/>
|
||||
<img class="chat-image" src="${o.src}" @load=${o.onload}>
|
||||
</div>
|
||||
<div class="modal-footer">${modal_close_button}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
</div>`;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user