Merge branch 'ui-improvements' into 'master'

Ui improvements

* allow containers without bg and border
* style twbs panels

See merge request !1270

app/assets/stylesheets/base/gl_bootstrap.scss

@@ -156,10 +156,16 @@
  * Add some extra stuff to panels
  *
  */
+
+.container-blank .panel .panel-heading {
+  font-size: 17px;
+  line-height: 38px;
+}
+
 .panel {
-  .panel-heading {
-    font-weight: bold;
+  box-shadow: none;
 
+  .panel-heading {
     .panel-head-actions {
       position: relative;
       top: -5px;
@@ -182,6 +188,10 @@
     .pagination {
       margin: 0;
     }
+
+    .btn {
+      min-width: 124px;
+    }
   }
 
   &.panel-small {
@@ -209,6 +219,12 @@
   }
 }
 
+.alert-help {
+  background-color: $background-color;
+  border: 1px solid $border-color;
+  color: $gl-gray;
+}
+
 // Typography =================================================================
 
 .text-primary,

app/assets/stylesheets/base/gl_variables.scss

@@ -114,11 +114,12 @@ $alert-border-radius:            0;
 //
 //##
 
-$panel-border-radius:            0;
+$panel-border-radius:         2px;
 $panel-default-text:       $text-color;
-$panel-default-border:        #E7E9ED;
-$panel-default-heading-bg:    #F8FAFC;
-
+$panel-default-border:     $border-color;
+$panel-default-heading-bg: $background-color;
+$panel-footer-bg:          $background-color;
+$panel-inner-border:       $border-color;
 
 //== Wells
 //

app/assets/stylesheets/generic/buttons.scss

@@ -10,7 +10,7 @@
   }
 
   &.btn-save {
-    @extend .btn-primary;
+    @extend .btn-success;
   }
 
   &.btn-remove {

app/assets/stylesheets/generic/sidebar.scss

@@ -28,12 +28,18 @@
     padding: $gl-padding;
     border: 1px solid #e7e9ed;
     min-height: 90vh;
+
+    &.container-blank {
+      background: none;
+      padding: 0;
+      border: none;
+    }
   }
 }
 
 .nav-sidebar {
   margin-top: 14 + $header-height;
-  margin-bottom: 50px;
+  margin-bottom: 100px;
   transition-duration: .3s;
   list-style: none;
   overflow: hidden;

app/helpers/page_layout_helper.rb

@@ -31,4 +31,26 @@ module PageLayoutHelper
       @fluid_layout
     end
   end
+
+  def blank_container(enabled = false)
+    if @blank_container.nil?
+      @blank_container = enabled
+    else
+      @blank_container
+    end
+  end
+
+  def container_class
+    css_class = "container-fluid"
+
+    if fluid_layout
+      css_class += " container-limited"
+    end
+
+    if blank_container
+      css_class += " container-blank"
+    end
+
+    css_class
+  end
 end

app/views/groups/edit.html.haml

+- @blank_container = true
 .panel.panel-default
   .panel-heading
     %strong= @group.name

app/views/layouts/_page.html.haml

@@ -19,7 +19,7 @@
           = current_user.username
   .content-wrapper
     = render "layouts/flash"
-    %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" }
+    %div{ class: container_class }
       .content
         .clearfix
           = yield

app/views/profiles/preferences/show.html.haml

 - page_title 'Preferences'
 - header_title page_title, profile_preferences_path
+- @blank_container = true
 
-.gray-content-block.top-block
+.alert.alert-help
   These settings allow you to customize the appearance and behavior of the site.
   They are saved with your account and will persist to any device you use to
   access the site.
-.prepend-top-default
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: {class: 'js-preferences-form form-horizontal'} do |f|
   .panel.panel-default.application-theme

app/views/projects/edit.html.haml

+- @blank_container = true
+
 .project-edit-container
   .project-edit-errors
   .project-edit-content
-    %div
-      %h3.page-title
+    .panel.panel-default
+      .panel-heading
         Project settings
-      %hr
       .panel-body
         = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit_project form-horizontal fieldset-form" }, authenticity_token: true do |f|