From 04f77806ac77e9c6a0b1afc3e201c4799d8ccfb8 Mon Sep 17 00:00:00 2001 From: Ro Date: Fri, 4 Sep 2020 14:28:05 -0700 Subject: [PATCH] notifications position fix, bumped version number --- brain/views/frame.pug | 4 ++-- package.json | 2 +- src/com/ui/Notifications.js | 14 +++++++++----- src/styles/main/_structure.styl | 12 ++++++------ 4 files changed, 18 insertions(+), 14 deletions(-) diff --git a/brain/views/frame.pug b/brain/views/frame.pug index 5d299ff..21282d7 100644 --- a/brain/views/frame.pug +++ b/brain/views/frame.pug @@ -12,8 +12,8 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en") //meta(name="twitter:image" content="https://thetwelfth.house/base-assets/images/current.png") link(rel='stylesheet', href="/assets/css/dash.css", type='text/css') body - #notifications.notifications.notify-close - #notifyMessage.notifyMessage + #notifications.notifications + #notifyMessage.notifyMessage.notify-close .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/package.json b/package.json index 82e7662..b0f0e62 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fipamo-development", - "version": "1.2.2", + "version": "1.2.3", "private": true, "description": "The most chill blog framework ever.", "repository": "https://code.playvicio.us/Are0h/Fipamo", diff --git a/src/com/ui/Notifications.js b/src/com/ui/Notifications.js index 6f8fc75..dde0f84 100644 --- a/src/com/ui/Notifications.js +++ b/src/com/ui/Notifications.js @@ -1,5 +1,6 @@ import anime from 'animejs/lib/anime.es.js'; const notifcation = document.getElementById('notifications'); +const notify = document.getElementById('notifyMessage'); const messageText = document.getElementById('message-text'); const iconGood = document.getElementById('notify-good'); const iconLame = document.getElementById('notify-lame'); @@ -15,7 +16,7 @@ export default class Notfications { //-------------------------- alert(text, status) { - //notifcation.style.display = 'flex'; + notifcation.style.display = 'block'; iconWorking.style.display = 'none'; iconGood.style.display = 'none'; iconLame.style.display = 'none'; @@ -35,8 +36,8 @@ export default class Notfications { iconWorking.style.display = 'block'; } - notifcation.classList.remove('notify-close'); - notifcation.classList.add('notify-open'); + notify.classList.remove('notify-close'); + notify.classList.add('notify-open'); messageText.innerHTML = text; anime({ targets: messageText, @@ -46,8 +47,11 @@ export default class Notfications { complete: () => { if (status !== null) { setTimeout(() => { - notifcation.classList.add('notify-close'); - notifcation.classList.remove('notify-open'); + notify.addEventListener('transitionend', () => { + notifcation.style.display = 'none'; + }); + notify.classList.add('notify-close'); + notify.classList.remove('notify-open'); }, 1000); } } diff --git a/src/styles/main/_structure.styl b/src/styles/main/_structure.styl index bf9685d..158a604 100644 --- a/src/styles/main/_structure.styl +++ b/src/styles/main/_structure.styl @@ -2,7 +2,6 @@ html, body background-color $primary - 60% font 400 1em $baseType height 100% - perspective: 1000px a font 300 1em $baseType @@ -18,19 +17,21 @@ svg.icons fill $secondary #notifications + perspective 1000px position fixed z-index 2000 height 10% width 100% - display block + display none align-items center justify-content center padding 0 margin 0 - transform-origin: 50% 0; - transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" ); + + #notifyMessage margin 0 auto + transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" ); //padding-top -125px height 50px; width 500px @@ -38,6 +39,7 @@ svg.icons align-items center justify-content center opacity: 1 + transform-origin: 50% 0; #notify-good, #notify-lame, #notify-working display: none .notify-icon @@ -63,12 +65,10 @@ svg.icons .notify-close transform-style preserve-3d - transform: rotateX(-120deg) .notify-open transform-style preserve-3d - //-origin: 50% 0; transform: rotateX(0deg) .blog-container width 100%