[enh] Less nerdy notification zone, with some tiny improvments.

This commit is contained in:
opi 2015-11-09 15:05:35 +01:00
parent 23229d3ec2
commit 7cc7e3f053
5 changed files with 80 additions and 66 deletions

View file

@ -175,7 +175,7 @@ body {
#slider { #slider {
.center-block; .center-block;
padding: 5px; padding: 30px 5px;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
@ -464,54 +464,72 @@ input[type='radio'].nice-radio {
} }
/** Flash messages **/
/** Flash messages **/
#flashMessage { #flashMessage {
position: fixed; max-height: 120px;
bottom: 0px; overflow-y: auto;
max-height: 30px; margin-bottom: 20px;
z-index: 2001; // above pacman &:empty {margin-bottom: 0;}
opacity: 0.9;
width: 100%; .alert-fail {
left: 0; .alert-danger();
overflow: hidden;
-webkit-transition: max-height 0.15s;
-moz-transition: max-height 0.15s;
transition: max-height 0.15s;
&:hover, &:active, &:focus {
opacity: 1;
overflow-y: auto;
height: inherit;
max-height: 70%;
outline: 1px solid #ccc;
border-top: none;
border-radius: 0;
} }
p {
padding: 4px 10px; .alert {
min-height: 30px; margin-bottom: 0;
line-height: 22px; & + .alert {margin-top: 15px;}
margin: 0;
} p {
div.alert-msg { &:extend(.container);
font-size: 15px; margin: 0 auto;
font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace; padding-left: 25px;
background-color: #002b36; padding-right: 25px;
//color: #eee; & + p {margin-top: 0.5em;}
} }
div.alert-info p {
color: #2aa198; }
} }
div.alert-success p {
color: #859900; @media screen and (min-width: 640px) {
} #flashMessage {
div.alert-warning p { position: fixed;
color: #cb4b16; top: 0px;
} left: 0;
div.alert-danger p { right: 0;
color: #dc322f; z-index: 2001; // above pacman
} max-height: 30px;
div.alert-log p { opacity: 0.9;
color: #839496; overflow: hidden;
box-shadow: 0px 0 1px rgba(0,0,0, 0.2);
.transition(max-height 0.15s);
&:hover, &:active, &:focus {
opacity: 1;
overflow-y: auto;
height: auto;
max-height: 70%;
box-shadow: 1px 0 2px rgba(0,0,0, 0.5);
}
p {
padding: 4px 10px;
min-height: 30px;
line-height: 22px;
}
.alert {
// Override bootstrap defaults
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
& + .alert {margin-top: 0;}
// YNH custom
font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
}
.alert-log {
background-color: #eee;
color: #333;
}
} }
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -12,7 +12,6 @@
<script type="text/javascript" src="dist/js/script.min.js?version=VERSION"></script> <script type="text/javascript" src="dist/js/script.min.js?version=VERSION"></script>
</head> </head>
<body> <body>
<div id="flashMessage"></div>
<div id="slider" role="application"> <div id="slider" role="application">
@ -32,6 +31,8 @@
</span> </span>
</header> </header>
<div id="flashMessage"></div>
<div id="slider-container"> <div id="slider-container">
<div id="slideBack" style="display: none;"></div> <div id="slideBack" style="display: none;"></div>

View file

@ -72,14 +72,8 @@ var app = Sammy('#main', function (sam) {
store.set('flash', true); store.set('flash', true);
} }
//$('#slider').css('padding-top', '30px'); $('#flashMessage')
.prepend('<div class="alert alert-'+ level +'">'+
var flashContainer = $('#flashMessage'),
alertClass = (level !== 'fail') ? alertClass = 'alert-'+ level : 'alert-danger';
flashContainer
.prepend('<div class="alert-msg '+ alertClass +'">'+
'<p>'+ message +'</p></div>'); '<p>'+ message +'</p></div>');
}, },