New style for push notifications.

tapquo · Mar 4, 2015 · b7082fb · b7082fb
1 parent 8c02cbc
commit b7082fb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/organism/dialog_push.coffee b/organism/dialog_push.coffee
@@ -13,19 +13,23 @@ class Atoms.Organism.Push extends Atoms.Organism.Dialog
 
   @template: """
               <article>
-                <h1></h1>
-                <section>
+                <header>
                   <figure></figure>
+                  <span class="icon user"></span>
+                  <h1></h1>
+                </header>
+                <section>
                   <p></p>
                 </section>
               </article>"""
 
   constructor: (attributes) ->
     super attributes
     @parent = @el.parent().addClass "no-block"
-    @title = @el.children("h1")
-    @text = @el.find("p")
     @figure = @el.find("figure")
+    @icon = @el.find(".icon")
+    @title = @el.find("h1")
+    @text = @el.find("p")
     @el.on "touch", @_onTouch
 
   # -- Instance Methods ---------------------------------------------------------
@@ -37,6 +41,9 @@ class Atoms.Organism.Push extends Atoms.Organism.Dialog
     @figure.hide()
     if attributes.image?
       @figure.show().css "background-image", "url('#{attributes.image}')"
+    @icon.hide()
+    if attributes.icon?
+      @icon.show().attr "class", "icon #{attributes.icon}"
 
     @el.parent().addClass "active"
     @el.addClass "show"

diff --git a/style/organism.dialog.styl b/style/organism.dialog.styl
@@ -16,11 +16,10 @@
   &.no-block
     position: absolute
     bottom: 0
-    height: HEIGHT = (HEADER_HEIGHT / 2)
-    padding-top: (.5 * PADDING)
+    height: HEIGHT = (HEADER_HEIGHT / 1.05)
     line-height: HEIGHT
     &.expand
-      height: (HEADER_HEIGHT / 2) + (HEADER_HEIGHT * 1.1)
+      height: HEIGHT + (1.125 * HEADER_HEIGHT)
 
   &:not(.active)
     visibility: hidden
@@ -48,31 +47,31 @@
         height: SIZE
 
   > [data-organism-dialog=push]
-    PADDING = (.75 * PADDING)
-    > h1
-      font-size: FONT_SIZE_SMALL
-      font-weight: normal
-      padding: 0 PADDING
-    > section
-      height: (1.25 * HEADER_HEIGHT)
-      padding: PADDING
+    > header
+      height: (HEADER_HEIGHT / 1.05)
+      line-height: HEADER_HEIGHT
       display-flex()
       flex-direction row
-      justify-content center
-      align-content center
       text-align: -webkit-match-parent
-      SIZE = 2.35rem
-      > figure
-        height: SIZE
+      > h1
+        font-size: FONT_SIZE_SMALL
+        font-weight: normal
+      > figure, > .icon
+        margin: (U / 2)
+        height: SIZE = (2.2 * U)
         width: SIZE
-        margin-right: PADDING
-        background-size: cover
+        font-size: SIZE
         flex-shrink 0
+      > figure
+        background-size: cover
+
+    > section
+      height: HEADER_HEIGHT
+      padding: (U / 2.5) (U / 1.5)
       > p
         flex-grow 2
         font-size: FONT_SIZE_TINY
-        line-height: FONT_SIZE_BIG
-        height: SIZE
+        line-height: (FONT_SIZE_NORMAL * 1.1)
         overflow: hidden