projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

notifications position fix, bumped version number

Browse source
This commit is contained in:
Ro 2020-09-04 14:28:05 -07:00
parent d9d004468a
commit 04f77806ac
4 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
brain/views/frame.pug
View file

@ -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") //meta(name="twitter:image" content="https://thetwelfth.house/base-assets/images/current.png")
link(rel='stylesheet', href="/assets/css/dash.css", type='text/css') link(rel='stylesheet', href="/assets/css/dash.css", type='text/css')
body body
#notifications.notifications.notify-close #notifications.notifications
#notifyMessage.notifyMessage #notifyMessage.notifyMessage.notify-close
.notify-icon#notify-good .notify-icon#notify-good
svg(viewBox="0 0 20 20" class="icons") svg(viewBox="0 0 20 20" class="icons")
use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt') use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt')

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "fipamo-development", "name": "fipamo-development",
"version": "1.2.2", "version": "1.2.3",
"private": true, "private": true,
"description": "The most chill blog framework ever.", "description": "The most chill blog framework ever.",
"repository": "https://code.playvicio.us/Are0h/Fipamo", "repository": "https://code.playvicio.us/Are0h/Fipamo",

14
src/com/ui/Notifications.js
View file

@ -1,5 +1,6 @@
import anime from 'animejs/lib/anime.es.js'; import anime from 'animejs/lib/anime.es.js';
const notifcation = document.getElementById('notifications'); const notifcation = document.getElementById('notifications');
const notify = document.getElementById('notifyMessage');
const messageText = document.getElementById('message-text'); const messageText = document.getElementById('message-text');
const iconGood = document.getElementById('notify-good'); const iconGood = document.getElementById('notify-good');
const iconLame = document.getElementById('notify-lame'); const iconLame = document.getElementById('notify-lame');
@ -15,7 +16,7 @@ export default class Notfications {
//-------------------------- //--------------------------
alert(text, status) { alert(text, status) {
//notifcation.style.display = 'flex'; notifcation.style.display = 'block';
iconWorking.style.display = 'none'; iconWorking.style.display = 'none';
iconGood.style.display = 'none'; iconGood.style.display = 'none';
iconLame.style.display = 'none'; iconLame.style.display = 'none';
@ -35,8 +36,8 @@ export default class Notfications {
iconWorking.style.display = 'block'; iconWorking.style.display = 'block';
} }
notifcation.classList.remove('notify-close'); notify.classList.remove('notify-close');
notifcation.classList.add('notify-open'); notify.classList.add('notify-open');
messageText.innerHTML = text; messageText.innerHTML = text;
anime({ anime({
targets: messageText, targets: messageText,
@ -46,8 +47,11 @@ export default class Notfications {
complete: () => { complete: () => {
if (status !== null) { if (status !== null) {
setTimeout(() => { setTimeout(() => {
notifcation.classList.add('notify-close'); notify.addEventListener('transitionend', () => {
notifcation.classList.remove('notify-open'); notifcation.style.display = 'none';
});
notify.classList.add('notify-close');
notify.classList.remove('notify-open');
}, 1000); }, 1000);
} }
} }

12
src/styles/main/_structure.styl
View file

@ -2,7 +2,6 @@ html, body
background-color $primary - 60% background-color $primary - 60%
font 400 1em $baseType font 400 1em $baseType
height 100% height 100%
perspective: 1000px
a a
font 300 1em $baseType font 300 1em $baseType
@ -18,19 +17,21 @@ svg.icons
fill $secondary fill $secondary
#notifications #notifications
perspective 1000px
position fixed position fixed
z-index 2000 z-index 2000
height 10% height 10%
width 100% width 100%
display block display none
align-items center align-items center
justify-content center justify-content center
padding 0 padding 0
margin 0 margin 0
transform-origin: 50% 0;
transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" );
#notifyMessage #notifyMessage
margin 0 auto margin 0 auto
transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" );
//padding-top -125px //padding-top -125px
height 50px; height 50px;
width 500px width 500px
@ -38,6 +39,7 @@ svg.icons
align-items center align-items center
justify-content center justify-content center
opacity: 1 opacity: 1
transform-origin: 50% 0;
#notify-good, #notify-lame, #notify-working #notify-good, #notify-lame, #notify-working
display: none display: none
.notify-icon .notify-icon
@ -63,12 +65,10 @@ svg.icons
.notify-close .notify-close
transform-style preserve-3d transform-style preserve-3d
transform: rotateX(-120deg) transform: rotateX(-120deg)
.notify-open .notify-open
transform-style preserve-3d transform-style preserve-3d
//-origin: 50% 0;
transform: rotateX(0deg) transform: rotateX(0deg)
.blog-container .blog-container
width 100% width 100%