tightened up notifciations display

This commit is contained in:
Ro 2020-06-16 13:20:11 -07:00
parent 8bdc7cbfe9
commit 54c7690e26
3 changed files with 42 additions and 8 deletions

View file

@ -5,8 +5,8 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
meta(content="text/html;charset=utf-8", http-equiv="Content-Type") meta(content="text/html;charset=utf-8", http-equiv="Content-Type")
meta(meta content="utf-8", http-equiv="encoding") meta(meta content="utf-8", http-equiv="encoding")
meta(name='viewport', content='width=device-width, initial-scale=1.0') meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(name="keywords" content="creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek") meta(name="keywords" content="")
meta(name="description" content="The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.") meta(name="description" content="")
meta(http-equiv="content-type", content="text/html; charset=utf-8") meta(http-equiv="content-type", content="text/html; charset=utf-8")
//meta(property="og:image" content="https://thetwelfth.house/base-assets/images/current.png") //meta(property="og:image" content="https://thetwelfth.house/base-assets/images/current.png")
//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")
@ -14,6 +14,9 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
body body
#notifications.notifications #notifications.notifications
#notifyMessage.notifyMessage #notifyMessage.notifyMessage
.notify-icon
svg(viewBox="0 0 20 20" class="icons")
use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-bell')
p#message-text This is a message p#message-text This is a message
.main-container#main-content .main-container#main-content
section#dash-index-content section#dash-index-content

View file

@ -16,10 +16,25 @@ export default class Notfications {
notifcation.style.display = 'flex'; notifcation.style.display = 'flex';
var color = ''; var color = '';
status ? (color = '#32cd32') : (color = '#F64747'); status ? (color = '#32cd32') : (color = '#F64747');
anime({
targets: messageText,
backgroundColor: color,
easing: 'easeInOutQuint',
duration: 500,
complete: () => {
setTimeout(() => {
anime({
targets: messageText,
backgroundColor: '#374857',
easing: 'easeOutQuint',
duration: 500
});
}, 1000);
}
});
anime({ anime({
targets: message, targets: message,
marginTop: '-20px', marginTop: '-20px',
backgroundColor: color,
easing: 'easeInOutQuint', easing: 'easeInOutQuint',
duration: 500, duration: 500,
opacity: 1, opacity: 1,
@ -28,7 +43,6 @@ export default class Notfications {
anime({ anime({
targets: message, targets: message,
marginTop: '-125px', marginTop: '-125px',
backgroundColor: '#374857',
easing: 'easeOutQuint', easing: 'easeOutQuint',
duration: 500, duration: 500,
opacity: 0, opacity: 0,

View file

@ -21,23 +21,40 @@ svg.icons
z-index 2000 z-index 2000
height 10% height 10%
width 100% width 100%
display none display block
align-items center align-items center
justify-content center justify-content center
padding 0 padding 0
margin 0 margin 0
#notifyMessage #notifyMessage
background-color: $highlight margin-top: 0px;
margin-top: -125px; padding-top -125px
padding-top 0
height 50px; height 50px;
width 500px width 500px
display: flex; display: flex;
align-items center align-items center
justify-content center justify-content center
opacity: 0 opacity: 0
.notify-icon
background $black
padding 8px 5px 5px 5px
border-radius 5px 0 0 5px
height 30px
width 30px
text-align center
border 2px solid $white
p p
color $white color $white
background $highlight
width 400px
height 28px
padding 15px 0 0 5px
border-radius 0 5px 5px 0
border 2px solid $white
text-align center
.icons
fill $white
.blog-container .blog-container
width 100% width 100%