Improved settings so OK button is static on top.

src/styles/components/_settings.scss

@@ -24,13 +24,13 @@
   background: $settings-background;
   border-left: 1px solid $bordercolor;
   bottom: 0;
-  padding-right: 20px;
+  padding-right: 0px;
   position: fixed;
   right: -520px;
-  top: $minbarheight;
+  top: 0;
   transition: right 200ms ease-in-out;
   width: 520px;
-  z-index: 50;
+  z-index: 80;
 
   &.show {
     right: 0;
@@ -41,18 +41,6 @@
       width: auto;
     }
 
-    .form-actions {
-
-      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-        bottom: 0;
-        height: 60px;
-        left: 0;
-        margin-bottom: 0;
-        padding: 6px 0 6px 120px;
-        position: fixed;
-        right: 0;
-      }
-    }
   }
 }
 
@@ -62,15 +50,20 @@
   left: 0;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 10px;
+  padding: 10px 15px;
   position: absolute;
   right: 0;
   top: 0;
+  margin-top: 50px;
 
   @include breakpt($breakpoint-settings-medium, max-width, only screen) {
     padding-bottom: 10px;
   }
 
+  legend {
+    font-size: ceil(($font-size-base * 1.25));
+  }
+
   .version {
     color: $settings-version;
     font-size: 10px;
@@ -79,20 +72,6 @@
     top: 10px;
   }
 
-  .form-horizontal {
-    .controls {
-      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-        margin-left: 110px;
-      }
-    }
-
-    .control-label {
-      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-        width: 100px;
-        word-wrap: break-word;
-      }
-    }
-  }
 }
 
 settings-advanced {

src/styles/global/_variables.scss

@@ -173,7 +173,7 @@ $breakpoint-large: 1280px !default;
 $breakpoint-video-small: 590px !default;
 $breakpoint-video-medium: 630px !default;
 $breakpoint-chat-small: 210px !default;
-$breakpoint-settings-medium: 630px !default;
+$breakpoint-settings-medium: 800px !default;
 
 // touch specific
 $tap-highlight: rgba(0, 0, 0, 0) !default;

static/partials/settings.html

@@ -1,3 +1,14 @@
+<div>
+  <nav class="navbar navbar-default navbar-static-top">
+    <div class="container-fluid">
+      <div>
+        <a class="navbar-brand">{{_('Settings')}}</a>
+      </div>
+      <div class="navbar-right">
+          <button ng-click="layout.settings=false" type="button" class="btn btn-primary navbar-btn">{{_('OK')}}</button>
+      </div>
+    </div>
+  </nav>
 <div class="settings nicescroll">
   <div class="version">{{version}}</div>
   <div ng-form="settingsform" class="form-horizontal" on-enter="saveSettings(user)" on-escape="cancelSettings()"
@@ -24,7 +35,8 @@
           </div>
         </div>
         <div class="form-group profile-publicnotice">
-          <div class="col-xs-8 col-xs-offset-4">
+          <label class="col-xs-4 control-label"></label>
+          <div class="col-xs-8">
             <p class="help-block">{{_('Your picture, name and status message identify yourself in calls, chats and rooms.')}}</p>
           </div>
         </div>
@@ -298,12 +310,8 @@
           </div>
         </div>
       </div>
-      <div class="form-group">
-        <div class="col-xs-8 col-xs-offset-4">
-          <a ng-click="layout.settings=false" class="btn btn-default">{{_('Close')}}</a>
-        </div>
-      </div>
 
     </fieldset>
   </div>
 </div>
+</div>