tightened up notifciations display
This commit is contained in:
parent
8bdc7cbfe9
commit
54c7690e26
3 changed files with 42 additions and 8 deletions
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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%
|
||||||
|
|
Loading…
Reference in a new issue