Merge branch 'ui-improvements' into 'master'

Ui improvements

* allow containers without bg and border
* style twbs panels

See merge request !1270

9 files changed, 62 insertions, 15 deletions

diff --git a/app/assets/stylesheets/base/gl_bootstrap.scss b/app/assets/stylesheets/base/gl_bootstrap.scss
index ae72c5b8d97..eb8d23d6453 100644
--- a/app/assets/stylesheets/base/gl_bootstrap.scss
+++ b/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,
diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index d18b48eaca9..bfef5f78f83 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -114,11 +114,12 @@ $alert-border-radius:            0;
 //
 //##
 
-$panel-border-radius:            0;
-$panel-default-text:          $text-color;
-$panel-default-border:        #E7E9ED;
-$panel-default-heading-bg:    #F8FAFC;
-
+$panel-border-radius:         2px;
+$panel-default-text:       $text-color;
+$panel-default-border:     $border-color;
+$panel-default-heading-bg: $background-color;
+$panel-footer-bg:          $background-color;
+$panel-inner-border:       $border-color;
 
 //== Wells
 //
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index e8237509092..46ef595ddf0 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -10,7 +10,7 @@
   }
 
   &.btn-save {
-    @extend .btn-primary;
+    @extend .btn-success;
   }
 
   &.btn-remove {
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index 22720c2e1d5..41ffd358576 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/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;
diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb
index 8473d6d75d0..bfbaf11c25a 100644
--- a/app/helpers/page_layout_helper.rb
+++ b/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
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 2ff4b7e23ea..ac7d9ba0f4f 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -1,3 +1,4 @@
+- @blank_container = true
 .panel.panel-default
   .panel-heading
     %strong= @group.name
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index c1746676ae2..707905ee92a 100644
--- a/app/views/layouts/_page.html.haml
+++ b/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
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index f8cbdb79329..60289bfe7cd 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -1,11 +1,11 @@
 - 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
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index e8e65d87f47..90dce739992 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -1,10 +1,11 @@
+- @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|