HelloZeroNet
/
ZeroNet
mirror of https://github.com/HelloZeroNet/ZeroNet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix notification width calculation

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
# 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 elem.outerHeight() > 55 then elem.addClass("long")
elem.css({"width": "50px", "transform": "scale(0.01)"})
elem.animate({"scale": 1}, 800, "easeOutElastic")
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)
# 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;
}
.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;
}
.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 .message { display: table-cell; vertical-align: middle; max-width: 500px; white-space: normal; }
@ -221,8 +221,8 @@ a { color: black }
/* Small screen */
@media screen and (max-width: 600px) {
.notification .message { white-space: normal; }
.notification .buttons { padding-right: 22px; }
.notification .buttons { padding-right: 22px; padding-right: 40px; }
.notification .button { white-space: nowrap; }
.notification { margin: 0px }
.notifications { right: 0px }
.notification { margin: 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;
}
.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;
}
.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 .message { display: table-cell; vertical-align: middle; max-width: 500px; white-space: normal; }
@ -260,8 +260,8 @@ a { color: black }
/* Small screen */
@media screen and (max-width: 600px) {
.notification .message { white-space: normal; }
.notification .buttons { padding-right: 22px; }
.notification .buttons { padding-right: 22px; padding-right: 40px; }
.notification .button { white-space: nowrap; }
.notification { margin: 0px }
.notifications { right: 0px }
.notification { margin: 0px; }
.notifications { right: 0px; max-width: 80%; }
}

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

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