HospitalRun · jglovier · Jul 8, 2015 · May 28, 2015 · May 28, 2015 · May 28, 2015
diff --git a/app/index.html b/app/index.html
@@ -15,36 +15,18 @@
     {{content-for 'head-footer'}}
   </head>
   <body>
-    <div class="jumbotron" id="apploading">
-        <div class="alert alert-warning" role="alert">
-            <h1><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>HospitalRun is Initializing... </h1>
-            <p>Did You Know: <span id="apploadingmsg"></span></p>
+    <div class="loading-notice apploading" id="apploading" role="alert">
+        <div class="wrapper">
+            <div class="spinner">
+                <div class="rect1"></div>
+                <div class="rect2"></div>
+                <div class="rect3"></div>
+                <div class="rect4"></div>
+                <div class="rect5"></div>
+            </div>
+            <p class="loading-text">Loading</p>
         </div>
     </div>
-    <script>
-        var messages = [
-            'The Brimstone butterfly (Gonepteryx rhamni) has the longest lifetime of the adult butterflies: 9-10 months.',
-            'Apples are more efficient than caffeine in keeping people awake in the mornings.',
-            'The human heart creates enough pressure when it pumps out to the body to squirt blood 30 feet.',
-            'Starfish have no brains.',
-            'A dinomaniac is someone with the compulsive urge to dance.',
-            'There is no leading cause of death for people who live past the age of 100.',
-            'Nepal is the only country that doesn’t have a rectangular flag.',
-            'The international telephone dialing code for Antarctica is 672.',
-            'Camels chew in a figure 8 pattern.',
-            'A shark is the only fish that can blink with both eyes.'
-        ]
-        function randomMsg() {
-            var apploading = document.getElementById('apploading');
-            if (apploading) {
-                var idx = Math.floor(Math.random()*10),
-                    message = document.getElementById('apploadingmsg');
-                message.innerHTML = messages[idx];
-                setTimeout(randomMsg, 300);
-            }
-        }
-        randomMsg();
-    </script>
     <script>
         window.addEventListener('load',function(e){window.applicationCache.addEventListener('updateready', function(e){if (window.applicationCache.status==window.applicationCache.UPDATEREADY){window.applicationCache.swapCache();window.location.reload();}},false);},false);
     </script>

diff --git a/app/styles/_variables_mixins.scss b/app/styles/_variables_mixins.scss
@@ -5,15 +5,21 @@ $green:                 #00bd9c;
 $green_light:           #13d8b6;
 $navy:                  #2e4359;
 $navy_mid:              #546a83;
-$navy_mid2:             #3A4D63;
+$navy_mid2:             #2F4358;
+$navy_mid3:             #3A4D63;
 $navy_drk:              #253649;
+$navy_drk2:             #263648;
+$navy_drkest:           #1E2C3A;
 $navy_text:             #97afc8;
 $blue_light:            #dbebff;
 $blue_light2:           #e9f3ff;
+$blue_lightest:         #EFF2F5;
+$blue_lightest2:        #DEE2E7;
 $red:                   #ff6d6f;
 $red_light:             rgba($red,.3);
 $gray_light:            #d9d9d9;
 $gray:                  rgba($navy,.65);
+$sidebar_icon:          #92a7bc;
 
 
 // end variables ------------/
@@ -25,7 +31,7 @@ $gray:                  rgba($navy,.65);
 @mixin vertically_centered {
   position: relative;
   top: 50%;
-  margin-top: -50%;
+  transform: translateY(-50%)
 }
 
 @mixin transition($value) {

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -126,57 +126,105 @@ h3.panel-title {
 // jglovier's temporary style tweaks
 // -------------------------------------------/
 
-body {
-    background-color: $navy;
-    //JK commenting out this right now because text on white backgrounds is invisible with this.
-    //color: #fff;
+body { background-color: $navy; }
+
+// change to $navy_drk2 once rest of UI elements are styled accordingly
+
+.ember-application {
+    padding-left: 275px; // to accomodate for .sidebar-nav
 }
 
-.header-nav {
-    > a {
-        display: block;
-        float: right;
-        color: #fff;
-        font-size: 14px;
-        font-weight: 300;
-        line-height: 64px;
-        padding: 0 16px;
-        text-decoration: none;
+// Loading notice styles
+// ------------------------------------------
 
-        &:hover { color: $green; }
-    }
+.loading-notice {
+    text-align: center;
+    margin: 0 auto;
 
-    .menu-link {
-        position: relative;
-        top: 5px;
+    .wrapper {
+        width: 140px;
+        border-radius: 10px;
+        background-color: $navy_drk2;
+        padding: 20px;
+        margin: 20px auto;
+    }
 
-        &:hover path { fill: $green; }
+    &.apploading {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+
+        .wrapper {
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+        }
     }
-}
 
-.navbar {
-    min-height: 64px;
-}
+    .loading-text {
+        text-transform: uppercase;
+        font-weight: 300;
+        letter-spacing: 2px;
+        margin-bottom: 0;
+    }
 
-.navbar-header {
-    float: left;
-}
+    // adapted from @tobiasahlin's spinkit: http://tobiasahlin.com/spinkit/
+    .spinner {
+        width: 50px;
+        margin: 0 auto 10px;
+        height: 40px;
+        text-align: center;
+        font-size: 10px;
 
-.navbar-brand {
-    display: block;
-    height: 60px;
-    padding: 0 25px;
+        > div {
+            background-color: $green;
+            height: 100%;
+            width: 6px;
+            display: inline-block;
+            margin-left: 3px;
+            border-radius: 50px;
+            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+            animation: stretchdelay 1.2s infinite ease-in-out;
+
+            &:first-child { margin-left: 0; }
+        }
 
-    .logo-svg {
-        width: 150px;
-        @include vertically_centered; }
+        .rect2 {
+            -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s;
+        }
+        .rect3 {
+            -webkit-animation-delay: -1.0s;
+            animation-delay: -1.0s;
+        }
+        .rect4 {
+            -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s;
+        }
+        .rect5 {
+            -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s;
+        }
+    }
+}
 
+@-webkit-keyframes stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
 }
 
-.navbar-text {
-    line-height: 64px;
-    margin-top: 0;
-    margin-bottom: 0;
+@keyframes stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
 }
 
 .site-search-form {
@@ -218,18 +266,6 @@ body {
     }
 }
 
-.navbar-nav {
-
-    > li {
-
-        > a {
-            padding: 0 15px;
-            line-height: 64px; }
-
-    }
-
-}
-
 .jumbotron {
     background-color: #2e4359;
 
@@ -243,9 +279,7 @@ body {
 }
 
 .container {
-
     label { font-weight: 300; }
-
 }
 
 .panel-primary {
@@ -295,6 +329,84 @@ h1 {
 
 // end temp style tweaks ------------/
 
+// Sidebar nav
+// -------------------------------------------/
+
+.sidebar-nav {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 275px;
+    display: block;
+    z-index: 1;
+    color: #fff;
+    font-weight: 300;
+    background-color: $navy_drk2;
+    box-shadow: 1px 0 0 $navy_drkest;
+
+    .mega-octicon {
+        font-size: 24px;
+        color: $sidebar_icon;
+    }
+
+    .sidebar-nav-section { height: 55px; }
+
+    .sidebar-nav-header {
+        background-color: $navy_mid2;
+        box-shadow: 0 1px 0 $navy_drkest;
+    }
+
+    .sidebar-nav-logo {
+        display: inline-block;
+        height: 55px;
+        padding: 0 15px;
+
+        .logo-svg {
+            width: 150px;
+            position: relative;
+            top: 15px;
+        }
+    }
+
+    .settings-trigger {
+        float: right;
+        padding: 15px;
+    }
+
+    .settings-nav {
+        background-color: $blue_lightest;
+        border-radius: 5px;
+        position: absolute;
+        top: 48px;
+        right: 10px;
+        z-index: 10;
+        min-width: 130px;
+
+        &:before {
+            content: " ";
+            display: block;
+            position: absolute;
+            border-bottom: 7px solid $blue_lightest;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            top: -7px;
+            right: 10px;
+        }
+
+        > a {
+            border-top: 1px solid $blue_lightest2;
+            padding: 6px 10px;
+            display: block;
+            color: $navy_mid3;
+            font-size: 14px;
+            font-weight: 400;
+
+            &:first-of-type { border-top: none; }
+        }
+    }
+}
+
 // Index (dashboard) styles
 // -------------------------------------------/
 
@@ -510,10 +622,7 @@ h1 {
 }
 
 @media print {
-    body {
-        font-size: 10px;
-    }
-    .panel-footer {
-        display: none;
-    }
+    body { font-size: 10px; }
+
+    .panel-footer { display: none; }
 }
diff --git a/app/templates/components/cross-icon-svg.hbs b/app/templates/components/cross-icon-svg.hbs
@@ -0,0 +1,5 @@
+<svg class="cross-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+  <polygon fill="#1ABC9C" points="21.33,10.67 21.33,0 10.67,0 10.67,10.67 0,10.67 0,21.33 10.67,21.33 10.67,32 21.33,32
+  21.33,21.33 32,21.33 32,10.67 "/>
+</svg>
diff --git a/app/templates/components/logo-svg.hbs b/app/templates/components/logo-svg.hbs
@@ -1,4 +1,4 @@
-<svg version="1.1" class="logo-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg class="logo-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 347.907 60.807" enable-background="new 0 0 347.907 60.807" xml:space="preserve">
   <g>
     <path fill="#FFFFFF" d="M39.118,49.621V0h8.247v19.067c1.336-1.269,2.805-2.293,4.408-3.072c1.603-0.779,3.483-1.169,5.643-1.169