oci/zeronet
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix notification width calculation

Browse source
This commit is contained in:
shortcutme 2019-10-30 02:28:37 +01:00
parent 74badf9c9c
commit 8d88cfcd68
No known key found for this signature in database
GPG key ID: 5B63BAE6CB9613AE
4 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/Ui/media/Notifications.coffee
View file

@ -51,13 +51,13 @@ class Notifications
), timeout ), timeout
# Animate # Animate
width = Math.min(elem.outerWidth(), 580) width = Math.min(elem.outerWidth() + 50, 580)
if not timeout then width += 20 # Add space for close button if not timeout then width += 20 # Add space for close button
if elem.outerHeight() > 55 then elem.addClass("long") if elem.outerHeight() > 55 then elem.addClass("long")
elem.css({"width": "50px", "transform": "scale(0.01)"}) elem.css({"width": "50px", "transform": "scale(0.01)"})
elem.animate({"scale": 1}, 800, "easeOutElastic") elem.animate({"scale": 1}, 800, "easeOutElastic")
elem.animate({"width": width}, 700, "easeInOutCubic") elem.animate({"width": width}, 700, "easeInOutCubic")
$(".body", elem).css("width": (width - 80)) $(".body", elem).css("width": (width - 50))
$(".body", elem).cssLater("box-shadow", "0px 0px 5px rgba(0,0,0,0.1)", 1000) $(".body", elem).cssLater("box-shadow", "0px 0px 5px rgba(0,0,0,0.1)", 1000)
# Close button or Confirm button # Close button or Confirm button

10
src/Ui/media/Wrapper.css
View file

@ -56,11 +56,11 @@ a { color: black }
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white; text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
} }
.notification .body { .notification .body {
padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table; padding-left: 14px; padding-right: 60px; height: 50px; vertical-align: middle; display: table; padding-right: 20px; box-sizing: border-box;
background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px; background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
} }
.notification .message-outer { display: table-row } .notification .message-outer { display: table-row }
.notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; } .notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; padding-right: 20px; text-align: right; }
.notification.long .body { padding-top: 10px; padding-bottom: 10px } .notification.long .body { padding-top: 10px; padding-bottom: 10px }
.notification .message { display: table-cell; vertical-align: middle; max-width: 500px; white-space: normal; } .notification .message { display: table-cell; vertical-align: middle; max-width: 500px; white-space: normal; }
@ -221,8 +221,8 @@ a { color: black }
/* Small screen */ /* Small screen */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.notification .message { white-space: normal; } .notification .message { white-space: normal; }
.notification .buttons { padding-right: 22px; } .notification .buttons { padding-right: 22px; padding-right: 40px; }
.notification .button { white-space: nowrap; } .notification .button { white-space: nowrap; }
.notification { margin: 0px } .notification { margin: 0px; }
.notifications { right: 0px } .notifications { right: 0px; max-width: 80%; }
} }

10
src/Ui/media/all.css
View file

@ -60,11 +60,11 @@ a { color: black }
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white; text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
} }
.notification .body { .notification .body {
padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table; padding-left: 14px; padding-right: 60px; height: 50px; vertical-align: middle; display: table; padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ;
background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px; background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
} }
.notification .message-outer { display: table-row } .notification .message-outer { display: table-row }
.notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; } .notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; padding-right: 20px; text-align: right; }
.notification.long .body { padding-top: 10px; padding-bottom: 10px } .notification.long .body { padding-top: 10px; padding-bottom: 10px }
.notification .message { display: table-cell; vertical-align: middle; max-width: 500px; white-space: normal; } .notification .message { display: table-cell; vertical-align: middle; max-width: 500px; white-space: normal; }
@ -260,8 +260,8 @@ a { color: black }
/* Small screen */ /* Small screen */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.notification .message { white-space: normal; } .notification .message { white-space: normal; }
.notification .buttons { padding-right: 22px; } .notification .buttons { padding-right: 22px; padding-right: 40px; }
.notification .button { white-space: nowrap; } .notification .button { white-space: nowrap; }
.notification { margin: 0px } .notification { margin: 0px; }
.notifications { right: 0px } .notifications { right: 0px; max-width: 80%; }
} }

4
src/Ui/media/all.js
View file

@ -835,7 +835,7 @@ $.extend( $.easing,
}; };
})(this)), timeout); })(this)), timeout);
} }
width = Math.min(elem.outerWidth(), 580); width = Math.min(elem.outerWidth() + 50, 580);
if (!timeout) { if (!timeout) {
width += 20; width += 20;
} }
@ -901,6 +901,7 @@ $.extend( $.easing,
}).call(this); }).call(this);
/* ---- Wrapper.coffee ---- */ /* ---- Wrapper.coffee ---- */
@ -1983,7 +1984,6 @@ $.extend( $.easing,
}).call(this); }).call(this);
/* ---- WrapperZeroFrame.coffee ---- */ /* ---- WrapperZeroFrame.coffee ---- */