From 10b6a9248159830f45012a1d551e82d86aeb75d0 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 9 Sep 2015 23:29:19 +0200 Subject: Style panels and add blank container Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/base/gl_bootstrap.scss | 14 +++++++++++++- app/assets/stylesheets/base/gl_variables.scss | 11 ++++++----- app/assets/stylesheets/generic/buttons.scss | 2 +- app/assets/stylesheets/generic/sidebar.scss | 6 ++++++ app/helpers/page_layout_helper.rb | 22 ++++++++++++++++++++++ app/views/layouts/_page.html.haml | 2 +- app/views/profiles/preferences/show.html.haml | 4 ++-- app/views/projects/edit.html.haml | 7 ++++--- 8 files changed, 55 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/base/gl_bootstrap.scss b/app/assets/stylesheets/base/gl_bootstrap.scss index ae72c5b8d97..94508b902c4 100644 --- a/app/assets/stylesheets/base/gl_bootstrap.scss +++ b/app/assets/stylesheets/base/gl_bootstrap.scss @@ -157,8 +157,10 @@ * */ .panel { + box-shadow: none; .panel-heading { - font-weight: bold; + font-size: 17px; + line-height: 38px; .panel-head-actions { position: relative; @@ -182,6 +184,10 @@ .pagination { margin: 0; } + + .btn { + min-width: 124px; + } } &.panel-small { @@ -209,6 +215,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..f501bd579e3 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -28,6 +28,12 @@ padding: $gl-padding; border: 1px solid #e7e9ed; min-height: 90vh; + + &.container-blank { + background: none; + padding: 0; + border: none; + } } } 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/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| -- cgit v1.2.1 From 12ad9b4ba0341ac7b5012dd52b1d6cd6e68f778a Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 9 Sep 2015 23:38:27 +0200 Subject: Enable blank container for group settings page Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/base/gl_bootstrap.scss | 10 +++++++--- app/views/groups/edit.html.haml | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/base/gl_bootstrap.scss b/app/assets/stylesheets/base/gl_bootstrap.scss index 94508b902c4..eb8d23d6453 100644 --- a/app/assets/stylesheets/base/gl_bootstrap.scss +++ b/app/assets/stylesheets/base/gl_bootstrap.scss @@ -156,12 +156,16 @@ * Add some extra stuff to panels * */ + +.container-blank .panel .panel-heading { + font-size: 17px; + line-height: 38px; +} + .panel { box-shadow: none; - .panel-heading { - font-size: 17px; - line-height: 38px; + .panel-heading { .panel-head-actions { position: relative; top: -5px; 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 -- cgit v1.2.1 From 960a1880ab09f8c12d6f7a7c22296c876ddad1ac Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 9 Sep 2015 23:49:34 +0200 Subject: Fix last element of sidebar being hidden for small screens Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/generic/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index f501bd579e3..41ffd358576 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -39,7 +39,7 @@ .nav-sidebar { margin-top: 14 + $header-height; - margin-bottom: 50px; + margin-bottom: 100px; transition-duration: .3s; list-style: none; overflow: hidden; -- cgit v1.2.1