pageManager: new loader and snackbar

This commit is contained in:
Tony Yang 2019-05-31 00:07:47 +08:00
parent de29584680
commit 2b292693cd
Signed by: t510599
GPG Key ID: D88388851C28715D
3 changed files with 38 additions and 5 deletions

View File

@ -47,11 +47,16 @@ Manager.prototype = {
this.components[name].render(...args);
delete this.cache[name];
},
setHeader: function (title) {
setHeader: function(title) {
$('#header').text(title);
},
setLoaderState: function (state) {
$('.pusher .dimmer').toggleClass('active', state);
setLoaderState: function(state) {
$('.pusher > .progress').toggleClass('invisible', !state);
},
snackbar: function(message) {
ts('.snackbar').snackbar({
content: message
});
}
}

View File

@ -1,3 +1,7 @@
.pusher {
overflow-x: hidden;
}
/* nav bar */
button#toggleSidebar {
border-radius: 0;
@ -13,11 +17,31 @@ button#toggleSidebar {
top: 0;
}
.pusher > .progress:not(.invisible) + nav {
margin: -3px; /* to overlap progress */
}
/* loader */
.pusher > .progress.invisible {
display: none;
}
/* content */
#header {
margin-top: 5px;
}
#content {
padding-bottom: 1.5em;
}
/* config */
#config::after {
display: block;
content: '';
clear: both;
}
@media (max-width: 768px) {
.ts.visible.sidebar:not(.overlapped) ~ .pusher.squeezable {
/* RWD fix */

View File

@ -46,8 +46,8 @@
</div>
<div class="comupter squeezable pusher" id="pusher">
<div class="ts active inverted dimmer">
<div class="ts loader"></div>
<div class="ts bottom attached indeterminate progress">
<div class="bar"></div>
</div>
<nav class="sidebar menu">
<button class="ts inverted icon button" id="toggleSidebar">
@ -58,6 +58,10 @@
<div class="ts big dividing header" id="header"></div>
<div class="ts fluid container" id="content"></div>
</div>
<!-- Anchor -->
<div class="ts bottom right snackbar">
<div class="content"></div>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>