style broadcasts and toggle them

app/controllers/top.coffee

@@ -37,12 +37,16 @@ Controller = Ember.Controller.extend
         broadcasts.set('isLoading', false)
 
       broadcasts
-  ).property()
+  ).property('broadcasts')
 
   actions: {
     toggleBurgerMenu: ->
       @toggleProperty('is-open')
       return false
+
+    toggleBroadcasts: ->
+      @toggleProperty('showBroadcasts')
+      return false
   }
 
   showCta: (->

app/styles/app/layouts/broadcasts.sass

@@ -1,5 +1,67 @@
 .broadcasts
-  // display: none
+  position: absolute
+  top: 3.2em
+  width: 27em
+  z-index: 70
+  background-color: $white
+  list-style: none
+  padding: 0 1em
+  margin: 0
+  border: solid 2px $cream-dark
+  border-radius: 2px
+  margin-left: -0.7em
+
+  transform-origin: top left
+  transform: translateY(-100%) scale(.9)
+  opacity: 0
+  transition: transform 300ms ease, opacity 150ms ease
+
+  &:after
+    content: ""
+    position: absolute
+    display: block
+    width: 14px
+    height: 14px
+    background: $white
+    top: -0.5em
+    transform: rotate(45deg)
+    left: 1rem
+    border-top: solid 2px $cream-dark
+    border-left: solid 2px $cream-dark
+
+  li
+    border-bottom: solid 2px $cream-dark
+    &:last-of-type
+      border-bottom: none
+
+  p
+    margin: .5em 0
+    padding-left: 1.5rem
+    word-wrap: break-word
+
+  a
+    display: inline
+    line-height: 1.45
+
+  &.is-open
+    opacity: 1
+    transform: translateY(0) scale(1)
+
+
+.broadcast-status
+  display: inline-block
+  width: 10px
+  height: 10px
+  margin-right: .5rem
+  margin-left: -1.5rem
+  border-radius: 50%
+  background-color: $grey-medium
+
+  &.warning
+    background-color: $red-dark
+
+  &.announcement
+    background-color: $green-dark
 
 
 .icon-broadcast

app/styles/app/layouts/top.sass

@@ -74,6 +74,8 @@ $top-height: 55px
 
 .top
   background-color: #eff0ec
+  position: relative
+  z-index: 90
 
 .topbar
   font-size: $font-size-m
@@ -99,7 +101,6 @@ $top-height: 55px
 
   a,
   .navigation-anchor
-    display: block
     color: #898989
     font-size: $font-size-m
     cursor: pointer

app/templates/top.hbs

@@ -7,11 +7,11 @@
   <ul id="navigation" class="navigation {{if is-open 'is-open'}}">
 
     <li class="">
-      <span class="navigation-anchor"><span class="icon-broadcast {{broadcasts.lastBroadcastStatus}}" title="broadcasts"></span></span>
+      <span class="navigation-anchor" {{action 'toggleBroadcasts'}}><span class="icon-broadcast {{broadcasts.lastBroadcastStatus}}" title="broadcasts"></span></span>
       {{#if auth.signedIn}}
-        <ul class="broadcasts">
+        <ul class="broadcasts {{if showBroadcasts 'is-open'}}">
         {{#each broadcasts.content as |broadcast|}}
-          <li>{{broadcast.category}} {{{broadcast.message}}}</li>
+          <li><p><span class="broadcast-status {{broadcast.category}}" title="{{broadcast.updated_at}}"></span> {{{broadcast.message}}}</p></li>
         {{/each}}
         </ul>
       {{/if}}