Refactored status bar to be outside of header bar for better flexibility.

html/main.html

@@ -7,7 +7,6 @@
 <div id="background"></div>
 <div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div>
 <page></page>
-
 <div class="navbar navbar-default navbar-fixed-top bar">
     <div class="container-fluid">
         <div class="navbar-header">
@@ -19,26 +18,23 @@
             <div class="navbar-brand left">
                 <%template "logo" .%>
             </div>
-            <div class="nav navbar-nav middle visible-xs">
-                <status-message></status-message>
-            </div>
         </div>
         <div class="navbar-collapse collapse" collapse="isCollapsed">
-            <ul class="nav navbar-nav middle hidden-xs">
-                <status-message></status-message>
-            </ul>
             <ul class="nav navbar-nav navbar-right right">
-                <div class="ng-cloak">
-                <button title="{{_('Present a file')}}" class="btn aenablebtn" ng-show="status=='connected' || status=='conference' || layout.presentation" ng-model="layout.presentation" btn-checkbox><i class="fa fa-folder-open-o"></i></button>
-                <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
-                <button title="{{_('Chat')}}" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen" ng-bind="chatMessagesUnseen"></span></button>
-                <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
-                <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
-                <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
-                </div>
+                <li class="ng-cloak">
+                    <button title="{{_('Present a file')}}" class="btn aenablebtn" ng-show="status=='connected' || status=='conference' || layout.presentation" ng-model="layout.presentation" btn-checkbox><i class="fa fa-folder-open-o"></i></button>
+                    <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
+                    <button title="{{_('Chat')}}" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen" ng-bind="chatMessagesUnseen"></span></button>
+                    <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
+                    <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
+                    <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
+                </li>
             </ul>
         </div>
     </div>
+    <div class="callbar middle">
+        <status-message></status-message>
+    </div>
 </div>
 <div id="roombar" class="ng-cloak">
     <room-bar/>

src/styles/components/_audiolevel.scss

@@ -27,10 +27,6 @@
   top: $audiolevel-top;
   width: 400px;
   z-index: 6;
-  @include breakpt($breakpoint-medium) {
-    z-index: 60;
-    top: $mobile-audiolevel-top;
-  }
   .audio-level {
     background: $audiovideolevel; /* Old browsers */
     background: gradient(linear, left top, left bottom, color-stop(0%,$audiovideolevel), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */

src/styles/components/_audiovideo.scss

@@ -27,9 +27,6 @@
   right: 0;
   top: $minbarheight;
   user-select: none;
-  @include breakpt($breakpoint-medium) {
-    top: $mobile-audiovideo-top;
-  }
 }
 
 #audiovideo {

src/styles/components/_bar.scss

@@ -22,23 +22,11 @@
 .bar {
   background: $bar-background;
   color: $componentfg1;
-  font: bold 1em/40px $font-sans-serif;
+  font: bold 1em/50px $font-sans-serif;
   text-align: center;
   touch-callout: none;
   user-select: none;
-  z-index: 5;
-  @include breakpt($breakpoint-medium) {
-    height: auto;
-    z-index: 60;
-    box-shadow: none;
-  }
-  .btn {
-    position: relative;
-  }
-  .navbar-nav {
-    display: inline-block;
-    vertical-align: middle;
-  }
+  z-index: 10;
 }
 
 .bar .left {
@@ -66,25 +54,38 @@
 }
 
 .bar .middle {
-  float: none;
-  margin-top: 5px;
-  @include breakpt($breakpoint-medium) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  pointer-events: none;
+  text-align: center;
+
+  > span {
+    display: inline-block;
+    background: $bar-background;
+    min-height: 50px;
+    pointer-events: auto;
   }
+
   .userpicture {
     border-radius: 2px;
     display: inline-block;
-    height: 46px;
-    margin: -5px .5em 0 .5em;
     width: 46px;
+    height: 46px;
+    margin: -8px .5em 0 .5em;
     @include breakpt($breakpoint-medium) {
       display: none;
     }
   }
-  &.status-connected,
-  &.status-conference {
+
+  .status-connected,
+  .status-conference,
+  .status-connecting,
+  .status-closed,
+  .status-reconnecting,
+  .status-error,
+  .status-ringing {
     @include breakpt($breakpoint-medium) {
       max-width: 100%;
       left: 0;
@@ -92,32 +93,15 @@
       right: 0;
     }
   }
-  &.status-connecting,
-  &.status-closed,
-  &.status-reconnecting,
-  &.status-error,
-  &.status-ringing  {
-    @include breakpt($breakpoint-medium) {
-      border-bottom: 1px solid $bordercolor;
-      max-width: 100%;
-      min-height: 45px;
-    }
-  }
-  // TODO(theurere): cleanup
-  &.status-connecting .actions,
-  &.status-closed .actions,
-  &.status-reconnecting .actions,
-  &.status-error .actions,
-  &.status-ringing .actions {
-    @include breakpt($breakpoint-medium) {
-      display: block;
-      padding: .2em 0 .8em 0;
-    }
+  .status-connecting .actions,
+  .status-closed .actions,
+  .status-reconnecting .actions,
+  .status-error .actions,
+  .status-ringing .actions {
   }
 }
 
 .bar .right {
-  margin-top: 3px;
   padding-right: 8px;
   .badge {
     background-color: $actioncolor1;

src/styles/components/_buddylist.scss

@@ -26,9 +26,6 @@
   top: 0;
   width: 285px;
   z-index: 50;
-  @include breakpt($breakpoint-medium) {
-    top: $mobile-buddylist-top;
-  }
 }
 
 #buddylist:before {

src/styles/components/_chat.scss

@@ -28,9 +28,6 @@
   top: 0px;
   width: 260px;
   z-index: 45;
-  @include breakpt($breakpoint-medium) {
-    top: $mobile-chat-top;
-  }
 }
 
 .withChat {

src/styles/components/_settings.scss

@@ -30,9 +30,6 @@
   transition: right 200ms ease-in-out;
   width: 520px;
   z-index: 50;
-  @include breakpt($breakpoint-medium) {
-    top: $mobile-settings-top;
-  }
 }
 
 #settings.show {

src/styles/global/_pages.scss

@@ -25,9 +25,6 @@
   position: absolute;
   right: 0;
   top: $minbarheight;
-  @include breakpt($breakpoint-medium) {
-    top: $mobile-pages-top;
-  }
 }
 
 .welcome {

src/styles/global/_variables.scss

@@ -34,9 +34,6 @@ $sidepanebg: white !default;
 $bordercolor: #e7e7e7 !default;
 $actioncolor1: rgb(132,184,25) !default;
 $actioncolor2: rgb(0,149,52) !default;
-$mobile-top-1: 48px !default;
-$mobile-top-2: 153px !default;
-$mobile-top-3: 99px !default;
 
 // branding
 $logo: url("../img/logo-small.png") !default;
@@ -66,22 +63,11 @@ $base-line-height: 1.53846156; // compass vertical_rhythm mixin
 $font-color: lighten(#000, 20%) !default;
 $font-color-accent: lighten($font-color, 50%) !default;
 
-//pages
-$mobile-pages-top: $mobile-top-1;
-
-//view
-$mobile-view-top: $mobile-top-3;
-
-//presensation
-$mobile-presentation-top: $mobile-top-3;
-
 // audio video
 $audiovideolevel: $action-enable !default;
-$mobile-audiovideo-top: $mobile-top-3;
 
 //audiolevel
 $audiolevel-top: 43px !default;
-$mobile-audiolevel-top: 88px !default;
 
 // main navigation bar
 $minbarheight: 51px !default;
@@ -114,7 +100,6 @@ $buddylist-tab-background: $componentbg !default;
 $buddylist-action-background: rgba(255,255,255,0.5) !default;
 $buddylist-buddy1: $componentfg1 !default;
 $buddylist-buddy2: $componentfg2 !default;
-$mobile-buddylist-top: $mobile-top-1;
 
 // chat
 $chat-background: #e7e7e7 !default;
@@ -149,8 +134,6 @@ $chat-bottom-background: $chat-background !default;
 $chat-typing: $chat-meta !default;
 $chat-input-border-color: #66afe9 !default;
 
-$mobile-chat-top: $mobile-top-1;
-
 // fileinfo
 $fileinfo-background: white !default;
 $fileinfo-border: #ddd !default;
@@ -164,7 +147,6 @@ $fileinfo-icon-background-color-remote: $fileinfo-icon-background-color !default
 $settings-version: #ccc !default;
 $form-help-text: #737373 !default;
 $settings-background: white !default;
-$mobile-settings-top: $mobile-top-2;
 
 // social
 $social-email-color: #aaa !default;

src/styles/global/_views.scss

@@ -27,7 +27,6 @@
   right: 0;
   top: $minbarheight;
   @include breakpt($breakpoint-medium) {
-    top: $mobile-view-top;
     left: 0px;
   }
 }