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

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>');
}, },