Make call button align in all 4 browsers

clientapp/templates.js

@@ -194,7 +194,7 @@ exports.misc.growlMessage = function anonymous(locals) {
 exports.pages.chat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="conversation"><header><h1><span class="name"></span><span class="status"></span></h1><button class="primary small call">call</button><div class="tzo"></div><!--.activeCall<video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="end primary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside>--></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="conversation"><header><h1><button class="primary small call">call</button><span class="name"></span><span class="status"></span></h1><div class="tzo"></div><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="end primary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/chat.jade

@@ -2,11 +2,11 @@ section.page.chat
   section.conversation
     header
       h1
+        button.primary.small.call call
         span.name
         span.status
-      button.primary.small.call call
       .tzo
-      //.activeCall
+      .activeCall
         video.remote(autoplay)
         video.local(autoplay, muted)
         aside.button-wrap

public/css/otalk.css

@@ -978,6 +978,7 @@ button.secondary:hover:not(:disabled) {
   border-width: 0px;
   padding: 0px;
   display: inline-block;
+  overflow: hidden;
 }
 .conversation header .status {
   font-weight: normal;
@@ -1020,9 +1021,10 @@ button.secondary:hover:not(:disabled) {
   font-weight: bold;
 }
 .conversation header .call {
-  margin-top: -2px;
   text-transform: capitalize;
   display: inline-block;
+  margin-left: 10px;
+  float: right;
 }
 .conversation header .activeCall {
   height: 0px;
@@ -1054,7 +1056,11 @@ button.secondary:hover:not(:disabled) {
 .conversation header .activeCall .button-wrap .button-group {
   margin-left: 5px;
 }
+.conversation .activeCall {
+  display: none;
+}
 .conversation.onCall .activeCall {
+  display: block;
   height: 400px;
 }
 .messages {

public/css/pages/chat.styl

@@ -101,6 +101,7 @@
       border-width: 0px
       padding: 0px
       display: inline-block
+      overflow: hidden
 
     .status
       font-weight: normal
@@ -138,9 +139,10 @@
         font-weight: bold
 
     .call
-      margin-top: -2px
       text-transform: capitalize
       display: inline-block
+      margin-left: 10px
+      float: right
 
     .activeCall
       transition(height 250ms)
@@ -172,8 +174,11 @@
 
   // while on video call the parent has
   // this class so we animate the height
+  .activeCall
+    display: none
   &.onCall
     .activeCall
+      display: block
       height: 400px
 
 .messages

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1387577442446
+# 0.0.1 1387579027983
 
 CACHE:
 /app.js