pageManager: new loader and snackbar

admin/dashboard.js

@@ -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
+        });
     }
 }
 

admin/theme/admin.css

@@ -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 */

admin/theme/dashboard.html

@@ -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>