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 {
|
.page-header {
|
||||||
.clearfix;
|
.clearfix;
|
||||||
.make-row(12);
|
.make-row(12);
|
||||||
margin-top: 0;
|
margin: 0 0 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
|
||||||
.homelink,
|
.homelink {
|
||||||
.logout-button {
|
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -146,11 +146,14 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-button {
|
.logout-button {
|
||||||
.make-xs-column(2);
|
.make-sm-column(2);
|
||||||
.make-xs-column-offset(8);
|
.make-sm-column-offset(8);
|
||||||
.btn;
|
.btn;
|
||||||
.btn-link;
|
padding: 17px 0 0;
|
||||||
text-align: right;
|
a {
|
||||||
|
display: block;
|
||||||
|
margin: 3px 0;
|
||||||
|
}
|
||||||
a.fa-sign-out {
|
a.fa-sign-out {
|
||||||
.fa-2x;
|
.fa-2x;
|
||||||
color: @gray-light;
|
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”
|
* The “slider”
|
||||||
*
|
*
|
||||||
|
|
@ -500,13 +488,38 @@ input[type='radio'].nice-radio {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/** Alert messages **/
|
/** Flash messages **/
|
||||||
.alert {}
|
|
||||||
.alert-log {
|
#flashMessage {
|
||||||
p {display: none;}
|
position: fixed;
|
||||||
.btn-show-log {
|
top: 0px;
|
||||||
.btn();
|
max-height: 30px;
|
||||||
.btn-default();
|
z-index: 2001; // above pacman
|
||||||
.btn-sm();
|
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>
|
<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">
|
||||||
|
|
||||||
<header id="masthead" class="page-header">
|
<header id="masthead" class="page-header">
|
||||||
|
|
@ -19,12 +21,17 @@
|
||||||
<img src="dist/img/icon.png" style="width: 70px;">
|
<img src="dist/img/icon.png" style="width: 70px;">
|
||||||
</a>
|
</a>
|
||||||
<span class="logout-button pull-right" role="button">
|
<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>
|
</span>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="flash" role="alert"></div>
|
|
||||||
|
|
||||||
<div id="slider-container">
|
<div id="slider-container">
|
||||||
|
|
||||||
<div id="slideBack" style="display: none;"></div>
|
<div id="slideBack" style="display: none;"></div>
|
||||||
|
|
@ -38,10 +45,6 @@
|
||||||
<div id="slideTo" style="display: none; z-index: 100;"></div>
|
<div id="slideTo" style="display: none; z-index: 100;"></div>
|
||||||
|
|
||||||
</div><!--/#slider-container-->
|
</div><!--/#slider-container-->
|
||||||
|
|
||||||
<footer class="page-footer">
|
|
||||||
<a href="/" class="ssolink" data-y18n="user_interface_link" target="_blank">User interface</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
|
<div id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
|
||||||
|
|
|
||||||
|
|
@ -72,36 +72,15 @@ var app = Sammy('#main', function (sam) {
|
||||||
store.set('flash', true);
|
store.set('flash', true);
|
||||||
}
|
}
|
||||||
|
|
||||||
var flashContainer = $('#flash'),
|
$('#slider').css('padding-top', '30px');
|
||||||
lastFlashAlert = $('.alert:last-child', flashContainer),
|
|
||||||
|
var flashContainer = $('#flashMessage'),
|
||||||
alertClass = (level !== 'fail') ? alertClass = 'alert-'+ level : 'alert-danger';
|
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
|
flashContainer
|
||||||
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
.prepend('<div class="alert-msg '+ alertClass +'">'+
|
||||||
|
'<p>'+ message +'</p></div>');
|
||||||
},
|
},
|
||||||
|
|
||||||
checkInstall: function(callback) {
|
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
|
// If not connected, WebSocket connection will raise an error, but we do not want to interrupt API request
|
||||||
ws.onerror = ws.onopen;
|
ws.onerror = ws.onopen;
|
||||||
|
|
||||||
ws.onclose = function() {
|
ws.onclose = function() {};
|
||||||
store.clear('flash');
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onopen = call(uri, callback, method, data);
|
ws.onopen = call(uri, callback, method, data);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -239,6 +216,7 @@ var app = Sammy('#main', function (sam) {
|
||||||
loaded = true;
|
loaded = true;
|
||||||
$('div.loader').remove();
|
$('div.loader').remove();
|
||||||
$('#modal').modal('hide');
|
$('#modal').modal('hide');
|
||||||
|
$('#flashModal').modal('hide');
|
||||||
|
|
||||||
if (enableSlide) {
|
if (enableSlide) {
|
||||||
var leSwap = function() {
|
var leSwap = function() {
|
||||||
|
|
@ -459,11 +437,7 @@ var app = Sammy('#main', function (sam) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
sam.after(function () {
|
sam.after(function () {});
|
||||||
|
|
||||||
// Clear flash notifications
|
|
||||||
store.clear('flash');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -1740,7 +1714,7 @@ var app = Sammy('#main', function (sam) {
|
||||||
// Remove useless interface
|
// Remove useless interface
|
||||||
delete monitorData.network.usage.lo;
|
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 {
|
else {
|
||||||
monitorData.status = false;
|
monitorData.status = false;
|
||||||
c.view('tools/tools_monitor', monitorData);
|
c.view('tools/tools_monitoring', monitorData);
|
||||||
}
|
}
|
||||||
|
|
||||||
}, 'GET');
|
}, 'GET');
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue