Offline indicator will show on top of logo when there is no internet connection

admin/controllers/index.coffee

@@ -37,6 +37,7 @@ class App extends Spine.Controller
     @navigate('/')
 
     @hookPanelsToNav()
+    @setupOnlineOffline()
     @doOtherStuff()
 
   setupSession: ->
@@ -102,6 +103,19 @@ class App extends Spine.Controller
     for k, v of @mainStack.controllers
       @mainStack[k].active -> cls.mainNav.selectFromClassName(@className)
 
+  setupOnlineOffline: ->   
+    if not navigator.onLine
+      @mainNav.offline.show(500)
+      Spine.trigger 'app:offline'
+      
+    $(window).on 'offline', =>
+      @mainNav.offline.show(500)
+      Spine.trigger 'app:offline'
+    
+    $(window).on 'online', =>
+      @mainNav.offline.hide()
+      Spine.trigger 'app:online'
+
   doOtherStuff: ->
     # Use the fastclick module for touch devices.
     # Add a class of `needsclick` if the original click

admin/controllers/main-nav.coffee

@@ -13,6 +13,7 @@ class MainNav extends Spine.Controller
     'input[name=password]':   'formPassword'
     'li a':                   'links'
     '.user-greeting':         'userGreeting'
+    '.offline':               'offline'
 
   events:
     'submit form.login':      'login'

admin/static/css/mixin.styl

@@ -42,6 +42,7 @@ $faintGrey      = #f0f0f0
 $linkColor      = darken($primaryColor, 20%)
 $textColor      = #808080
 $textDarkColor  = darken($textColor, 4%)
+$alertColor     = #D3A924
 
 $normalFont     = 300
 $boldFont       = 400

admin/static/css/theme.styl

@@ -69,7 +69,7 @@ span.label
     right: 0
     width: 22px
     height: 20px
-    background: #D3A924
+    background: $alertColor
     padding: 0
     margin: 10px
     color: white
@@ -241,6 +241,20 @@ span.label
     &.show
       left: 0
 
+  .offline
+    display: none
+    position: absolute
+    top: 22px
+    left: 0
+    width: $navbarWidth
+    font-size: 2em
+    line-height: 2em
+    font-weight: $boldFont
+    text-transform: uppercase
+    text-align: center
+    color: #fff
+    background: $alertColor 
+
 .main.stack
   position: absolute
   top: 0
@@ -307,7 +321,7 @@ span.label
           cursor: pointer
           &:hover
             color: #fff
-            background: #D3A924
+            background: $alertColor
 
         input[type='text'],
         input[type='search'],
@@ -507,7 +521,7 @@ span.label
         display: none
         color: #fff
         padding: 5px 10px
-        background: orange
+        background: $alertColor
       
       &.fullscreen
 

admin/templates/dashboard.html

@@ -1,5 +1,5 @@
 <div class="content">
-  <h1>Dashboard</h1>
+  <h1>Dashboard <i class="icon icon-gauge"></i></h1>
 
   <h3>Draft Essays</h3>
   {{#if essays}}

admin/templates/main-nav.html

@@ -21,3 +21,4 @@
   <li class="logout"><a class="logout-button"><i class="icon icon-off"></i>Sign Out</a></li>
 </ul>
 <div class="user-greeting"></div>
+<div class="offline">offline</div>