added page loading animation while the app is loading.

Gruntfile.js

@@ -62,7 +62,7 @@ module.exports = function (grunt) {
             general  : {
                 expand :true,
                 src   : [
-                            'UI/Content/base.less',
+                            'UI/Content/theme.less',
                             'UI/Content/overrides.less',
                             'UI/Series/series.less',
                             'UI/AddSeries/addSeries.less',

UI/Calendar/calendar.less

@@ -28,11 +28,11 @@
   }
 
   .fc-state-highlight {
-    background: #f1f1f1;
+    background : #f1f1f1;
   }
 
   .past {
-    opacity: 0.8;
+    opacity : 0.8;
   }
 }
 
@@ -44,14 +44,14 @@
   padding-top   : 10px;
 
   h4 {
-    font-weight    : 500;
+    font-weight : 500;
-    color          : #008dcd;
+    color       : #008dcd;
-    margin         : 5px 0px;
+    margin      : 5px 0px;
   }
 
   p {
-    color : #999999;
+    color  : #999999;
-    margin: 0px;
+    margin : 0px;
   }
 
   .date {
@@ -63,10 +63,10 @@
     margin-right : 20px;
 
     h4 {
-      line-height : 1em;
+      line-height    : 1em;
-      color       : #555555;
+      color          : #555555;
-      font-weight : 300;
+      font-weight    : 300;
-      text-transform: uppercase;
+      text-transform : uppercase;
     }
 
     h1 {
@@ -76,42 +76,45 @@
   }
 
   .primary {
-    border-color     : @btnPrimaryBackground;
+    border-color : @btnPrimaryBackground;
   }
 
   .info {
-    border-color     : @btnInfoBackground;
+    border-color : @btnInfoBackground;
   }
 
   .inverse {
-    border-color     : @btnInverseBackground;
+    border-color : @btnInverseBackground;
   }
 
   .warning {
-    border-color     : @btnWarningBackground;
+    border-color : @btnWarningBackground;
   }
 
   .danger {
-    border-color     : @btnDangerBackground;
+    border-color : @btnDangerBackground;
   }
 
   .success {
-    border-color     : @btnSuccessBackground;;
+    border-color : @btnSuccessBackground;;
   }
 
   .purple {
-    border-color     : #7932ea;
+    border-color : #7932ea;
   }
 
   .episode-title {
     .btn-link;
-    color: @linkColor;
+    color      : @linkColor;
-    margin-top: 1px;
+    margin-top : 1px;
     .text-overflow;
   }
 }
 
-.calendar, {
+.calendar {
+
+  background-position : -160px -128px;
+
   .primary {
     border-color     : @btnPrimaryBackground;
     background-color : @btnPrimaryBackground;
@@ -146,4 +149,4 @@
     border-color     : #7932ea;
     background-color : #7932ea;
   }
-}
+}

UI/Content/Overrides/bootstrap.less

@@ -31,3 +31,13 @@
 .slide-button {
   min-width : 0px;
 }
+
+.popover-title {
+  text-transform : none;
+}
+
+.line &>[class^="icon-"], .line &>[class*=" icon-"] {
+  margin-top  : 1em;
+  height      : 1em;
+  line-height : 1em;
+}

UI/Content/Overrides/browser.less

@@ -10,3 +10,8 @@ button::-moz-focus-inner, a::-moz-focus-inner {
 a:focus {
   outline : none;
 }
+
+body h1, body h2, body h3, body h4, body h5, body h6 {
+  text-transform : capitalize;
+  font-weight    : 300;
+}

UI/Content/base.less

@@ -1,127 +0,0 @@
-@import "Bootstrap/variables";
-@import "Bootstrap/mixins";
-@import "Bootstrap/type";
-@import "font";
-@import "form";
-@import "theme";
-@import "menu";
-@import "Backgrid/backgrid";
-@import "../Shared/Styles/clickable";
-@import "prefixer";
-@import "icons";
-@import "spinner";
-@import "legend";
-
-.progress {
-  width         : 125px;
-  position      : relative;
-  margin-bottom : 2px;
-
-  .progressbar-back-text, .progressbar-front-text {
-    font-size  : 11.844px;
-    font-weight: bold;
-    text-align : center;
-  }
-
-  .progressbar-back-text {
-    position   : absolute;
-    width      : 100%;
-    height     : 100%;
-  }
-
-  .progressbar-front-text {
-    display    : block;
-    width      : 125px;
-  }
-  .bar {
-    position : absolute;
-    overflow : hidden;
-  }
-}
-
-.backdrop .page {
-  background-color : transparent;
-  box-shadow       : none;
-}
-
-.line &>[class^="icon-"], .line &>[class*=" icon-"] {
-  margin-top  : 1em;
-  height      : 1em;
-  line-height : 1em;
-}
-
-#localSeriesLookup {
-  width      : 220px;
-  border     : 0px;
-  background : rgb(75, 75, 75);
-  color      : rgb(169, 169, 169);
-  padding    : 4px;
-  font-size  : 13px;
-}
-
-.nz-loading {
-  .text-center;
-  font-size   : 40px;
-  font-weight : 300;
-  padding     : 30px;
-}
-
-.page-toolbar {
-  margin-top    : 10px;
-  margin-bottom : 30px;
-}
-
-.page-container {
-  min-height : 600px;
-}
-
-#scroll-up {
-  .clickable;
-
-  &:hover {
-    text-decoration : none;
-    .opacity         (0.4);
-  }
-
-  .opacity   (0.2);
-  position  : fixed;
-  bottom    : 50px;
-  right     : 50px;
-  display   : none;
-  font-size : 56px;
-  color     : white;
-}
-
-.label-large {
-  padding   : 4px 6px;
-  font-size : 16px;
-}
-
-th {
-  &.sortable {
-    &:hover {
-      background : @tableBackgroundHover;
-    }
-    .clickable();
-
-  }
-}
-
-#footer-region {
-  .text-center();
-  position : relative;
-  width    : 256px;
-  margin   : 50px auto 0px auto;
-  display  : block;
-}
-
-a, .btn {
-  i {
-    cursor: pointer;
-  }
-}
-
-.label-white {
-  color: black;
-  background-color: white;
-}

UI/Content/menu.less

@@ -10,29 +10,6 @@
   }
 }
 
-#nav-region li a {
-  color : #b9b9b9;
-}
-
-#nav-region li a:focus {
-  text-decoration : none;
-}
-
-#nav-region {
-  margin-bottom : 80px;
-
-  .span12 {
-    margin-left : 0px;
-  }
-
-  .logo {
-    margin-top     : 25px;
-    vertical-align : middle;
-    height         : 70px;
-    width          : 70px;
-  }
-}
-
 .backdrop #nav-region {
   background-color : #000000;
   .opacity(0.85);
@@ -44,6 +21,22 @@
 }
 
 #nav-region {
+
+  margin-bottom : 80px;
+  height        : 120px;
+
+  .span12 {
+    margin-left : 0px;
+  }
+
+
+  .logo {
+    margin-top     : 25px;
+    vertical-align : middle;
+    height         : 70px;
+    width          : 70px;
+  }
+
   ul {
     text-align    : center;
     margin-bottom : 10px;
@@ -52,13 +45,18 @@
     list-style-type : none;
     display         : inline-block;
     a {
+
+      &:focus {
+        text-decoration : none;
+      }
+
       display       : block;
       border-radius : 6px;
       padding       : 15px 10px 5px;
       min-height    : 56px;
       min-width     : 64px;
       margin        : 20px 10px 10px;
-      color         : #ffffff;
+      color         : #b9b9b9;
       font-weight   : 100;
     }
     span.label.pull-right {

UI/Content/theme.less

@@ -1,4 +1,99 @@
-@import "../Shared/Styles/card";
+@import "Bootstrap/variables";
+@import "Bootstrap/mixins";
+@import "Bootstrap/type";
+@import "font";
+@import "form";
+@import "menu";
+@import "Backgrid/backgrid";
+@import "prefixer";
+@import "icons";
+@import "spinner";
+@import "legend";
+@import "../Shared/Styles/clickable";
+@import "../Shared/Styles/card";
+
+.progress {
+  width         : 125px;
+  position      : relative;
+  margin-bottom : 2px;
+
+  .progressbar-back-text, .progressbar-front-text {
+    font-size   : 11.844px;
+    font-weight : bold;
+    text-align  : center;
+  }
+
+  .progressbar-back-text {
+    position : absolute;
+    width    : 100%;
+    height   : 100%;
+  }
+
+  .progressbar-front-text {
+    display : block;
+    width   : 125px;
+  }
+  .bar {
+    position : absolute;
+    overflow : hidden;
+  }
+}
+
+.backdrop #page {
+  background-color : transparent;
+  box-shadow       : none;
+}
+
+.page-toolbar {
+  margin-top    : 10px;
+  margin-bottom : 30px;
+}
+
+#scroll-up {
+  .clickable;
+
+  &:hover {
+    text-decoration : none;
+    .opacity         (0.4);
+  }
+
+  .opacity   (0.2);
+  position  : fixed;
+  bottom    : 50px;
+  right     : 50px;
+  display   : none;
+  font-size : 56px;
+  color     : white;
+}
+
+.label-large {
+  padding   : 4px 6px;
+  font-size : 16px;
+}
+
+th {
+  &.sortable {
+    &:hover {
+      background : @tableBackgroundHover;
+    }
+    .clickable();
+
+  }
+}
+
+
+
+a, .btn {
+  i {
+    cursor : pointer;
+  }
+}
+
+.label-white {
+  color            : black;
+  background-color : white;
+}
+
 
 body {
   background-color : #1c1c1c;
@@ -9,27 +104,6 @@ body {
   }
 }
 
-
-.calendar {
-  background-position : -160px -128px;
-}
-
-.panel .primary, .panel .primary h6 {
-  background-color : #007ccd;
-}
-
-.panel .info, .panel .info h6 {
-  background-color : #14b8d4;
-}
-
-.message-sidebar a.message-preview p, .message-sidebar a.message-preview h5 {
-  color : #999999;
-}
-
-ul.stat-list li label, ul.stat-list li h4, ul.stat-list li small, ul.stat-list li p {
-  display : inline-block;
-}
-
 footer {
   font-size       : 13px;
   font-weight     : lighter;
@@ -47,30 +121,23 @@ footer {
   p {
     margin-bottom : 0px;
   }
+
+  #footer-region {
+    .text-center();
+    position : relative;
+    width    : 256px;
+    margin   : 50px auto 0px auto;
+    display  : block;
+  }
 }
 
-.popover-title {
+.started #page {
-  text-transform : none;
+  .card(#aaaaaa);
-}
+  width      : 1210px;
-
+  min-width  : 1210px;
-.message-sidebar a.active p, .message-sidebar a.active h5 {
+  margin     : auto;
-  color : rgba(255, 255, 255, 0.8);
+  margin-top : -70px;
-}
+  padding    : 20px 0px;
-
-
-
-body h1, body h2, body h3, body h4, body h5, body h6 {
-  text-transform : capitalize;
-  font-weight    : 300;
-}
-
-.page {
-  .card(#AAAAAA);
-  width            : 1210px;
-  min-width        : 1210px;
-  margin           : auto;
-  margin-top       : -70px;
-  padding          : 20px 0px;
   .header {
     padding-bottom : 10px;
     margin-bottom  : 20px;

UI/Router.js

@@ -6,8 +6,9 @@ require(
         'Controller',
         'Series/SeriesCollection',
         'Navbar/NavbarView',
-        'jQuery/RouteBinder'
+        'jQuery/RouteBinder',
-    ], function (App, Marionette, Controller, SeriesCollection,NavbarView, RouterBinder) {
+        'jquery'
+    ], function (App, Marionette, Controller, SeriesCollection, NavbarView, RouterBinder, $) {
 
         var Router = Marionette.AppRouter.extend({
 
@@ -36,11 +37,11 @@ require(
 
             App.Router = new Router();
 
-            SeriesCollection.fetch()
+            SeriesCollection.fetch().done(function () {
-                .done(function(){
                     Backbone.history.start({ pushState: true });
                     RouterBinder.bind(App.Router);
                     App.navbarRegion.show(new NavbarView());
+                    $('body').addClass('started');
                 })
         });
 

UI/index.html

@@ -8,7 +8,7 @@
     <link href="/Content/Messenger/messenger.css" rel='stylesheet' type='text/css'/>
     <link href="/Content/Messenger/messenger.future.css" rel='stylesheet' type='text/css'/>
     <link href="/Content/fullcalendar.css" rel='stylesheet' type='text/css'>
-    <link href="/Content/base.css" rel='stylesheet' type='text/css'/>
+    <link href="/Content/theme.css" rel='stylesheet' type='text/css'/>
     <link href="/Cells/cells.css" rel='stylesheet' type='text/css'>
     <link href="/Series/series.css" rel='stylesheet' type='text/css'/>
     <link href="/Logs/logs.css" rel='stylesheet' type='text/css'/>
@@ -24,7 +24,7 @@
 </head>
 <body>
 <div id="nav-region"></div>
-<div class="page">
+<div id="page">
     <div class="page-container">
         <div class="container">
             <div class="row">