mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
[enh] Enhance flash messages display (issuefix #64)
This commit is contained in:
kload
parent
cf9a5a8e0c
commit
965ff87677
5 changed files with 70 additions and 80 deletions
|
|
@ -106,10 +106,10 @@ body {
|
|||
.page-header {
|
||||
.clearfix;
|
||||
.make-row(12);
|
||||
margin-top: 0;
|
||||
margin: 0 0 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.homelink,
|
||||
.logout-button {
|
||||
.homelink {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -146,11 +146,14 @@ body {
|
|||
}
|
||||
|
||||
.logout-button {
|
||||
.make-xs-column(2);
|
||||
.make-xs-column-offset(8);
|
||||
.make-sm-column(2);
|
||||
.make-sm-column-offset(8);
|
||||
.btn;
|
||||
.btn-link;
|
||||
text-align: right;
|
||||
padding: 17px 0 0;
|
||||
a {
|
||||
display: block;
|
||||
margin: 3px 0;
|
||||
}
|
||||
a.fa-sign-out {
|
||||
.fa-2x;
|
||||
color: @gray-light;
|
||||
|
|
@ -163,21 +166,6 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* The footer of the doc
|
||||
*
|
||||
*/
|
||||
.page-footer {
|
||||
.clearfix;
|
||||
.make-row(12);
|
||||
|
||||
padding: 9px 15px 0 15px;
|
||||
margin: 20px 0 40px;
|
||||
border-top: 1px solid #EEE;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* The “slider”
|
||||
*
|
||||
|
|
@ -500,13 +488,38 @@ input[type='radio'].nice-radio {
|
|||
}
|
||||
|
||||
|
||||
/** Alert messages **/
|
||||
.alert {}
|
||||
.alert-log {
|
||||
p {display: none;}
|
||||
.btn-show-log {
|
||||
.btn();
|
||||
.btn-default();
|
||||
.btn-sm();
|
||||
/** Flash messages **/
|
||||
|
||||
#flashMessage {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
max-height: 30px;
|
||||
z-index: 2001; // above pacman
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
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;
|
||||
min-height: 30px;
|
||||
line-height: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
div.alert-log p {
|
||||
background-color: #eee;
|
||||
color: #333;
|
||||
font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
src/dist/css/style.min.css
vendored
4
src/dist/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
4
src/dist/js/script.min.js
vendored
4
src/dist/js/script.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -12,6 +12,8 @@
|
|||
<script type="text/javascript" src="dist/js/script.min.js?version=VERSION"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="flashMessage"></div>
|
||||
|
||||
<div id="slider" role="application">
|
||||
|
||||
<header id="masthead" class="page-header">
|
||||
|
|
@ -19,12 +21,17 @@
|
|||
<img src="dist/img/icon.png" style="width: 70px;">
|
||||
</a>
|
||||
<span class="logout-button pull-right" role="button">
|
||||
<a class="fa-sign-out" href="#/logout" title="Logout" data-y18n-title="logout"><span class="sr-only" data-y18n="logout">Logout</span></a>
|
||||
<a class="btn btn-primary btn-sm" href="#/logout" title="Logout" data-y18n-title="user_interface_link">
|
||||
<span data-y18n="user_interface_link">User interface</span>
|
||||
<i class="fa-user"></i>
|
||||
</a>
|
||||
<a class="btn btn-default btn-sm" href="#/logout" title="Logout" data-y18n-title="logout">
|
||||
<span data-y18n="logout">Logout</span>
|
||||
<i class="fa-sign-out"></i>
|
||||
</a>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div id="flash" role="alert"></div>
|
||||
|
||||
<div id="slider-container">
|
||||
|
||||
<div id="slideBack" style="display: none;"></div>
|
||||
|
|
@ -38,10 +45,6 @@
|
|||
<div id="slideTo" style="display: none; z-index: 100;"></div>
|
||||
|
||||
</div><!--/#slider-container-->
|
||||
|
||||
<footer class="page-footer">
|
||||
<a href="/" class="ssolink" data-y18n="user_interface_link" target="_blank">User interface</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
|
||||
|
|
@ -62,4 +65,4 @@
|
|||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -72,36 +72,15 @@ var app = Sammy('#main', function (sam) {
|
|||
store.set('flash', true);
|
||||
}
|
||||
|
||||
var flashContainer = $('#flash'),
|
||||
lastFlashAlert = $('.alert:last-child', flashContainer),
|
||||
$('#slider').css('padding-top', '30px');
|
||||
|
||||
var flashContainer = $('#flashMessage'),
|
||||
alertClass = (level !== 'fail') ? alertClass = 'alert-'+ level : 'alert-danger';
|
||||
|
||||
// If last alert has the same class, append content into it
|
||||
if (lastFlashAlert.hasClass(alertClass)) {
|
||||
lastFlashAlert.append('<p>'+ message +'</p>');
|
||||
}
|
||||
// Else, create a new alert box
|
||||
else {
|
||||
var alertCloseButton = '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
|
||||
if (level == 'log') {
|
||||
// Log messages could be very long
|
||||
// Hidden by default with a "view log" button
|
||||
flashContainer
|
||||
.append('<pre class="alert alert-dismissable '+ alertClass +'">'+alertCloseButton+
|
||||
'<button type="button" class="btn-show-log">'+ y18n.t('log') +'</button>'+
|
||||
'<p>'+ message +'</p></pre>')
|
||||
.find('.btn-show-log').on('click', function() {
|
||||
$(this).hide().nextAll('p').fadeIn();
|
||||
});
|
||||
} else {
|
||||
flashContainer
|
||||
.append('<div class="alert alert-dismissable '+ alertClass +'">'+alertCloseButton+
|
||||
'<p>'+ message +'</p></div>');
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll to the top
|
||||
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
||||
flashContainer
|
||||
.prepend('<div class="alert-msg '+ alertClass +'">'+
|
||||
'<p>'+ message +'</p></div>');
|
||||
},
|
||||
|
||||
checkInstall: function(callback) {
|
||||
|
|
@ -218,9 +197,7 @@ var app = Sammy('#main', function (sam) {
|
|||
// If not connected, WebSocket connection will raise an error, but we do not want to interrupt API request
|
||||
ws.onerror = ws.onopen;
|
||||
|
||||
ws.onclose = function() {
|
||||
store.clear('flash');
|
||||
};
|
||||
ws.onclose = function() {};
|
||||
|
||||
ws.onopen = call(uri, callback, method, data);
|
||||
} else {
|
||||
|
|
@ -239,6 +216,7 @@ var app = Sammy('#main', function (sam) {
|
|||
loaded = true;
|
||||
$('div.loader').remove();
|
||||
$('#modal').modal('hide');
|
||||
$('#flashModal').modal('hide');
|
||||
|
||||
if (enableSlide) {
|
||||
var leSwap = function() {
|
||||
|
|
@ -459,11 +437,7 @@ var app = Sammy('#main', function (sam) {
|
|||
}
|
||||
});
|
||||
|
||||
sam.after(function () {
|
||||
|
||||
// Clear flash notifications
|
||||
store.clear('flash');
|
||||
});
|
||||
sam.after(function () {});
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -1740,7 +1714,7 @@ var app = Sammy('#main', function (sam) {
|
|||
// Remove useless interface
|
||||
delete monitorData.network.usage.lo;
|
||||
|
||||
c.view('monitor/monitor', monitorData);
|
||||
c.view('tools/tools_monitoring', monitorData);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1748,7 +1722,7 @@ var app = Sammy('#main', function (sam) {
|
|||
}
|
||||
else {
|
||||
monitorData.status = false;
|
||||
c.view('tools/tools_monitor', monitorData);
|
||||
c.view('tools/tools_monitoring', monitorData);
|
||||
}
|
||||
|
||||
}, 'GET');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue