Clean up views to be consistent with new design

Author: achan

app/components/bulletin-cover.js

@@ -20,5 +20,7 @@ export default Ember.Component.extend({
 });
 
 function suitableScreenHeight() {
-  return Math.max(Ember.$(window).height() - 40, 320);
+  const navBarHeightPx = 50;
+  const coverBorderWidthPx = 10;
+  return Math.max(Ember.$(window).height() - (navBarHeightPx + coverBorderWidthPx), 320);
 }

app/styles/_variables.scss

@@ -22,5 +22,5 @@ $small-device-break: 768px;
 $medium-device-break: 992px;
 $large-device-break: 1200px;
 
-$nav-bar-height: 30px;
+$nav-bar-height: 50px;
 $bulletin-announcements-color: $gray-blue-light;

app/styles/app.scss

@@ -1,4 +1,5 @@
 @import "utils";
+@import "hiding-menu";
 @import "announcement-editor";
 @import "components/bulletin-cover";
 @import "components/bulletin-navigator";
@@ -25,6 +26,7 @@
 
 body {
   background-color: $white;
+  padding-top: $nav-bar-height;
   @include body-font();
 }
 

app/styles/components/bulletin-cover.scss

@@ -6,7 +6,7 @@
   margin: 0 $padding-m $padding-m $padding-m;
 
   .inner {
-    bottom: $padding-m;
+    bottom: 0;
     color: $white;
     position: absolute;
     margin: $padding-m;
@@ -65,8 +65,6 @@
 
   @media only screen and (min-width: $small-device-break) {
     .inner {
-      padding: 0 $padding-xl;
-
       audio {
         max-width: initial;
       }
@@ -84,4 +82,10 @@
       font-size: 24px;
     }
   }
+
+  @media only screen and (min-width: $medium-device-break) {
+    .inner {
+      padding: 0 $padding-xl;
+    }
+  }
 }

app/styles/components/bulletin-navigator.scss

@@ -1,6 +1,6 @@
 .bulletin-navigator {
-  margin-left: $padding-l;
-  margin-top: $padding-l;
+  margin-left: $padding-m * 2;
+  margin-top: $padding-m * 2;
   position: absolute;
   z-index: 100;
 
@@ -16,6 +16,6 @@
   }
 
   @media only screen and (min-width: $medium-device-break) {
-    margin-left: $padding-xl;
+    padding-left: $padding-xl;
   }
 }

app/styles/components/mcac-header.scss

@@ -1,15 +1,17 @@
 .navbar {
-  background-color: transparent;
+  z-index: 100;
+  background-color: $white;
   border-style: none;
-  color: $white;
   width: 100%;
 
   .navbar-header {
     float: none;
-    padding: 6px 0 0 $padding-m;
+    height: $nav-bar-height;
+    margin-left: 0;
+    margin-right: 0;
 
     .navbar-brand {
-      color: $white;
+      color: $black;
       float: none;
       line-height: $nav-bar-height;
       padding: 0;
@@ -20,16 +22,20 @@
       font-size: 36px;
 
       &:before {
+        margin-left: 0;
       }
     }
 
     abbr[title] {
       border-style: none;
       position: absolute;
-      top: -8px;
+      cursor: pointer;
     }
   }
 
   @media only screen and (min-width: $small-device-break) {
+    .navbar-header .navbar-brand {
+      margin-left: 0;
+    }
   }
 }

app/templates/components/mcac-header.hbs

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-default navbar-fixed-top">
+{{#hiding-menu throttleTime=200 topTolerance=50 class="navbar navbar-default navbar-fixed-top"}}
   <div class="container">
     <div class="navbar-header">
       {{#link-to "index" class="navbar-brand"}}
@@ -7,5 +7,5 @@
       {{/link-to}}
     </div>
   </div>
-</nav>
-{{yield}}
+  {{yield}}
+{{/hiding-menu}}

package.json

@@ -54,6 +54,8 @@
     "ember-data": "^2.7.0",
     "ember-disable-proxy-controllers": "^1.0.1",
     "ember-export-application-global": "^1.0.4",
+    "ember-hiding-menu": "0.0.3",
+    "ember-in-viewport": "2.0.8",
     "ember-load-initializers": "^0.5.0",
     "ember-marked": "0.0.4",
     "ember-metrics": "0.6.0",