Commit 395aa8cb authored by JC Brand's avatar JC Brand

Use JS to dynamically set height of img modal

parent e73d1430
...@@ -29,7 +29,6 @@ ...@@ -29,7 +29,6 @@
} }
} }
.modal-body--image { .modal-body--image {
height: 72vh;
.chat-image { .chat-image {
max-height: 99%; max-height: 99%;
max-width: 100%; max-width: 100%;
......
...@@ -4,6 +4,9 @@ import tpl_image_modal from "../templates/image_modal.js"; ...@@ -4,6 +4,9 @@ import tpl_image_modal from "../templates/image_modal.js";
export default BootstrapModal.extend({ export default BootstrapModal.extend({
toHTML () { 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'; ...@@ -3,7 +3,8 @@ import { __ } from '../i18n';
import { modal_close_button, modal_header_close_button } from "./buttons" 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-dialog fit-content" role="document">
<div class="modal-content fit-content"> <div class="modal-content fit-content">
<div class="modal-header"> <div class="modal-header">
...@@ -11,9 +12,9 @@ export default (o) => html` ...@@ -11,9 +12,9 @@ export default (o) => html`
${modal_header_close_button} ${modal_header_close_button}
</div> </div>
<div class="modal-body modal-body--image fit-content"> <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>
<div class="modal-footer">${modal_close_button}</div> <div class="modal-footer">${modal_close_button}</div>
</div> </div>
</div> </div>`;
`; }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment