diff --git a/brain/views/frame.pug b/brain/views/frame.pug index 21282d7..e72b6c8 100644 --- a/brain/views/frame.pug +++ b/brain/views/frame.pug @@ -13,7 +13,7 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en") link(rel='stylesheet', href="/assets/css/dash.css", type='text/css') body #notifications.notifications - #notifyMessage.notifyMessage.notify-close + #notifyMessage.notifyMessage .notify-icon#notify-good svg(viewBox="0 0 20 20" class="icons") use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt') diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css index e9b9514..15024e9 100644 --- a/public/assets/css/dash.css +++ b/public/assets/css/dash.css @@ -1580,23 +1580,26 @@ svg.icons { perspective: 1000px; position: fixed; z-index: 2000; - height: 10%; + height: 55x; width: 100%; - display: none; + display: block; align-items: center; justify-content: center; padding: 0; + margin-top: -55px; margin: 0; } #notifications #notifyMessage { margin: 0 auto; - transition: all 0.5s cubic-bezier(0.83, 0.05, 0.28, 1); + transition: all 0.6s cubic-bezier(0.83, 0.05, 0.28, 1); height: 50px; width: 500px; display: flex; align-items: center; justify-content: center; opacity: 1; + transform-style: preserve-3d; + transform: rotateX(-120deg); transform-origin: 50% 0; } #notifications #notifyMessage #notify-good, diff --git a/public/assets/scripts/dash.min.js b/public/assets/scripts/dash.min.js index 58fdf1f..09871db 100644 --- a/public/assets/scripts/dash.min.js +++ b/public/assets/scripts/dash.min.js @@ -3637,7 +3637,6 @@ var Notfications = /*#__PURE__*/function () { _createClass(Notfications, [{ key: "alert", value: function alert(text, status) { - notifcation.style.display = 'block'; iconWorking.style.display = 'none'; iconGood.style.display = 'none'; iconLame.style.display = 'none'; @@ -3658,49 +3657,48 @@ var Notfications = /*#__PURE__*/function () { iconWorking.style.display = 'block'; } - notify.classList.remove('notify-close'); - notify.classList.add('notify-open'); messageText.innerHTML = text; (0, _animeEs.default)({ - targets: messageText, - backgroundColor: color, + targets: notifcation, + marginTop: '0', easing: 'easeInOutQuint', - duration: 700, + duration: 10, complete: function complete() { - if (status !== null) { - setTimeout(function () { - notify.addEventListener('transitionend', function () { - notifcation.style.display = 'none'; - }); - notify.classList.add('notify-close'); - notify.classList.remove('notify-open'); - }, 1000); - } + (0, _animeEs.default)({ + targets: notify, + rotateX: '0', + easing: 'easeInOutQuint', + duration: 700 + }); + (0, _animeEs.default)({ + targets: messageText, + backgroundColor: color, + easing: 'easeInOutQuint', + duration: 700, + complete: function complete() { + setTimeout(function () { + if (status !== null) { + (0, _animeEs.default)({ + targets: notify, + rotateX: '-120', + easing: 'easeInOutQuint', + duration: 700, + complete: function complete() { + (0, _animeEs.default)({ + targets: notifcation, + marginTop: '-55', + easing: 'easeInOutQuint', + delay: 700, + duration: 50 + }); //notifcation.style.display = 'none'; + } + }); + } + }, 1000); + } + }); } }); - /* - anime({ - targets: message, - marginTop: '-20px', - easing: 'easeInOutQuint', - duration: 500, - opacity: 1, - complete: () => { - setTimeout(() => { - anime({ - targets: message, - marginTop: '-125px', - easing: 'easeOutQuint', - duration: 500, - opacity: 0, - complete: () => { - notifcation.style.display = 'none'; - } - }); - }, 1000); - } - }); - */ } //-------------------------- // event handlers //-------------------------- @@ -8576,7 +8574,7 @@ var parent = module.bundle.parent; if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { var hostname = "" || location.hostname; var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; - var ws = new WebSocket(protocol + '://' + hostname + ':' + "57255" + '/'); + var ws = new WebSocket(protocol + '://' + hostname + ':' + "57701" + '/'); ws.onmessage = function (event) { checkedAssets = {};