open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: calculate size dynamically

Browse Source
This commit is contained in:
eight 2017-12-05 04:30:07 +08:00
parent c5bcdd8f75
commit 71db6c7481
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
msgbox/msgbox.css
View File

@ -133,16 +133,23 @@
} }
/* popup */ /* popup */
#stylus-popup #message-box { #message-box.stylus-popup {
margin: 0; margin: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#stylus-popup #message-box > div { #message-box.stylus-popup > div {
max-width: 90vh; max-width: 90vw;
top: auto; top: auto;
right: auto; right: auto;
} }
#message-box.calculate-size {
white-space: nowrap;
}
#message-box.calculate-size > div {
max-width: none;
max-height: none;
}
@keyframes fadein { @keyframes fadein {
from { from {

13
msgbox/msgbox.js
View File

@ -11,13 +11,20 @@ function messageBox({
initOwnListeners(); initOwnListeners();
bindGlobalListeners(); bindGlobalListeners();
createElement(); createElement();
document.body.appendChild(messageBox.element);
if (location.href.includes('popup.html')) { if (location.href.includes('popup.html')) {
messageBox.element.classList.add('stylus-popup');
// calculate size
messageBox.element.classList.add('calculate-size');
const {offsetWidth, offsetHeight} = messageBox.element.children[0];
messageBox.element.classList.remove('calculate-size');
messageBox.bodyWidth = document.body.style.width; messageBox.bodyWidth = document.body.style.width;
messageBox.bodyHeight = document.body.style.height; messageBox.bodyHeight = document.body.style.height;
document.body.style.width = '400px'; document.body.style.width = `${offsetWidth / 0.9}px`;
document.body.style.height = '600px'; document.body.style.height = `${offsetHeight / 0.9}px`;
} }
document.body.appendChild(messageBox.element);
if (onshow) { if (onshow) {
onshow(messageBox.element); onshow(messageBox.element);
} }