From 4a7a04af1bc138f79e338d4a92618f29ad567a8a Mon Sep 17 00:00:00 2001 From: Arthur Monney Date: Fri, 22 Nov 2019 11:29:33 +0100 Subject: [PATCH] :lipstick: Update notify assets --- resources/js/notify.js | 21 ++++++++++++++++++++- resources/sass/notify.scss | 23 +++++++++++++++-------- 2 files changed, 35 insertions(+), 9 deletions(-) diff --git a/resources/js/notify.js b/resources/js/notify.js index 7f46409..20bee13 100644 --- a/resources/js/notify.js +++ b/resources/js/notify.js @@ -13,6 +13,26 @@ const drakiky = document.querySelector('.drake-alert'); if (notification) { const button = document.querySelector('.notify-alert button, .smiley-alert button, .connectify-alert button'); + switch (notify.position) { + case "top-left": + notification.setAttribute('style', "right: 0; left: 50px"); + break; + case "bottom-right": + notification.setAttribute('style', "top: 80%;"); + break; + case "bottom-left": + notification.setAttribute('style', "top: 80%; left: 50px"); + break; + case "center-top": + notification.setAttribute('style', "right: 50%; transform: translate(50%)"); + break; + case "center-bottom": + notification.setAttribute('style', "top: 80%; right: 50%; transform: translate(50%);"); + break; + default: + notification.setAttribute('style', ''); + } + button.addEventListener('click', function (e) { e.stopPropagation(); e.preventDefault(); @@ -26,7 +46,6 @@ if (notification) { notification.classList.add(notify.animatedOut); } }, notify.timeout); - } if (drakiky) { diff --git a/resources/sass/notify.scss b/resources/sass/notify.scss index ed6740c..6d4e81e 100644 --- a/resources/sass/notify.scss +++ b/resources/sass/notify.scss @@ -15,7 +15,9 @@ z-index: 200; display: flex; justify-content: space-between; - width: 500px; + align-items: center; + width: 400px; + height: 45px; flex-direction: row; padding: 20px; background-color: #fff; @@ -34,20 +36,25 @@ text-transform: uppercase; font-size: 14px; font-weight: 700; + margin: 0 !important; } p { color: $alert-color; - margin-bottom: 0; + margin: 0 !important; } } @mixin button() { + position: absolute; + top: 20px; + right: 20px; button.close { padding: 0; background-color: transparent; border: 0; outline: none; + cursor: pointer; &:visited, &:focus { outline: none; @@ -77,7 +84,7 @@ justify-content: space-between; background: transparent; border-radius: 30px; - height: 45px; + height: 5px; padding: 20px; text-transform: uppercase; color: #fff; @@ -235,8 +242,8 @@ z-index: 200; display: flex; padding: 20px; - height: 200px; - width: 500px; + height: 120px; + width: 300px; border-radius: 10px; background-size: cover; margin-bottom: 20px; @@ -251,15 +258,15 @@ z-index: 2; span { - width: 70px; - height: 70px; + width: 32px; + height: 50px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; - font-size: 20px; + font-size: 15px; margin-bottom: 10px; }