diff --git a/CHANGELOG b/CHANGELOG index dc1d88bf61e..03b12ff1331 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -19,6 +19,7 @@ v 8.0.0 (unreleased) - Improve abuse reports management from admin area - Move dashboard activity to separate page - Improve performance of git blame + - Limit content width to 1200px for most of pages to improve readability on big screens v 7.14.1 (unreleased) - Only include base URL in OmniAuth full_host parameter (Stan Hu) diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss index 690d89a5c16..734b95e26c0 100644 --- a/app/assets/stylesheets/base/layout.scss +++ b/app/assets/stylesheets/base/layout.scss @@ -20,3 +20,8 @@ html { .navless-container { margin-top: 30px; } + + +.container-limited { + max-width: $fixed-layout-width; +} diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss index cb439a0e0bf..26d0a1e5363 100644 --- a/app/assets/stylesheets/base/variables.scss +++ b/app/assets/stylesheets/base/variables.scss @@ -13,7 +13,7 @@ $code_line_height: 1.5; $border-color: #E5E5E5; $background-color: #f5f5f5; $header-height: 50px; -$readable-width: 1100px; +$fixed-layout-width: 1200px; /* diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 31e2ad86691..6a29b32e196 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -20,16 +20,16 @@ header { } &.navbar-gitlab { + padding: 0 20px; z-index: 100; margin-bottom: 0; min-height: $header-height; border: none; - width: 100%; + border-bottom: 1px solid #EEE; - .container { + .container-fluid { background: #FFF; width: 100% !important; - padding: 0; filter: none; .nav > li > a { @@ -64,55 +64,11 @@ header { } } - .header-logo { - border-bottom: 1px solid transparent; - float: left; - height: $header-height; - width: $sidebar_width; - overflow: hidden; - transition-duration: .3s; - - a { - float: left; - height: $header-height; - width: 100%; - padding: ($header-height - 36 ) / 2 8px; - overflow: hidden; - - img { - width: 36px; - height: 36px; - float: left; - } - - .gitlab-text-container { - width: 230px; - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 14px; - font-size: 18px; - line-height: $header-height - 14; - font-weight: normal; - } - } - } - - &:hover { - background-color: #EEE; - } - } - .header-content { - border-bottom: 1px solid #EEE; - padding-right: 35px; height: $header-height; .title { margin: 0; - padding: 0 15px 0 35px; overflow: hidden; font-size: 18px; line-height: $header-height; @@ -168,15 +124,7 @@ header { } @mixin collapsed-header { - .header-logo { - width: $sidebar_collapsed_width; - } - - .header-content { - .title { - margin-left: 30px; - } - } + margin-left: $sidebar_collapsed_width; } @media (max-width: $screen-md-max) { @@ -191,16 +139,14 @@ header { } .header-expanded { + margin-left: $sidebar_width; } } @media (max-width: $screen-xs-max) { - header .container { + header .container-fluid { font-size: 18px; - .title { - } - .navbar-nav { margin: 0px; float: none !important; diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index b96664d30db..320bdb1c765 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -188,3 +188,46 @@ width: $sidebar_width - 2 * 10px; } } + +.sidebar-wrapper { + .header-logo { + border-bottom: 1px solid transparent; + float: left; + height: $header-height; + width: $sidebar_width; + overflow: hidden; + transition-duration: .3s; + + a { + float: left; + height: $header-height; + width: 100%; + padding: ($header-height - 36 ) / 2 8px; + overflow: hidden; + + img { + width: 36px; + height: 36px; + float: left; + } + + .gitlab-text-container { + width: 230px; + + h3 { + width: 158px; + float: left; + margin: 0; + margin-left: 14px; + font-size: 18px; + line-height: $header-height - 14; + font-weight: normal; + } + } + } + + &:hover { + background-color: #EEE; + } + } +} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 3f617e72b02..586e7b5f8da 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -45,9 +45,3 @@ .btn { font-size: 13px; } } - -.issuable-details { - .description { - max-width: $readable-width; - } -} diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 5f1a3db4fb6..81e2aa7bb9c 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -117,7 +117,6 @@ .readme-holder { margin: 0 auto; - max-width: $readable-width; .readme-file-title { font-size: 14px; diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss index 3589cb88d03..77b62c3153f 100644 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ b/app/assets/stylesheets/themes/gitlab-theme.scss @@ -7,27 +7,23 @@ * $color-dark - */ @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { - header { - &.navbar-gitlab { - .header-logo { - background-color: $color-darker; - border-color: $color-darker; + .page-with-sidebar { + .header-logo { + background-color: $color-darker; + border-color: $color-darker; + a { + color: $color-light; + } + + &:hover { + background-color: $color-dark; a { - color: $color-light; - } - - &:hover { - background-color: $color-dark; - a { - color: #FFF; - } + color: #FFF; } } } - } - .page-with-sidebar { .collapse-nav a { color: #FFF; background: $color; diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb index 01b6a63552c..8473d6d75d0 100644 --- a/app/helpers/page_layout_helper.rb +++ b/app/helpers/page_layout_helper.rb @@ -23,4 +23,12 @@ module PageLayoutHelper @sidebar end end + + def fluid_layout(enabled = false) + if @fluid_layout.nil? + @fluid_layout = enabled + else + @fluid_layout + end + end end diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 96e15783a36..0104d7198df 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -1,6 +1,11 @@ .page-with-sidebar{ class: nav_sidebar_class } = render "layouts/broadcast" .sidebar-wrapper.nicescroll + .header-logo + = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do + = brand_header_logo + .gitlab-text-container + %h3 GitLab - if defined?(sidebar) && sidebar = render "layouts/nav/#{sidebar}" - elsif current_user @@ -13,7 +18,7 @@ .username = current_user.username .content-wrapper - .container-fluid + %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" } .content = render "layouts/flash" .clearfix diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 12ddbe6f1b7..0b630b55c70 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -1,10 +1,5 @@ %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } - .container - .header-logo - = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do - = brand_header_logo - .gitlab-text-container - %h3 GitLab + %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" } .header-content %button.navbar-toggle{type: 'button'} %span.sr-only Toggle navigation @@ -17,15 +12,6 @@ %li.visible-sm.visible-xs = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom'} do = icon('search') - -#%li.hidden-xs - = link_to help_path, title: 'Help', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('question-circle fw') - -#%li - = link_to explore_root_path, title: 'Explore', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('globe fw') - -#%li - = link_to user_snippets_path(current_user), title: 'Your snippets', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('clipboard fw') - if current_user.is_admin? %li = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do @@ -34,9 +20,6 @@ %li.hidden-xs = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do = icon('plus fw') - -#%li - = link_to profile_path, title: 'Profile settings', data: {toggle: 'tooltip', placement: 'bottom'} do - = icon('cog fw') %li = link_to destroy_user_session_path, class: 'logout', method: :delete, title: 'Sign out', data: {toggle: 'tooltip', placement: 'bottom'} do = icon('sign-out') diff --git a/app/views/layouts/header/_public.html.haml b/app/views/layouts/header/_public.html.haml index 15c2e292be3..af4b9ba58f6 100644 --- a/app/views/layouts/header/_public.html.haml +++ b/app/views/layouts/header/_public.html.haml @@ -1,10 +1,5 @@ %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class } - .container - .header-logo - = link_to explore_root_path, class: "home" do - = brand_header_logo - .gitlab-text-container - %h3 GitLab + %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" } .header-content - unless current_controller?('sessions') .pull-right diff --git a/app/views/projects/deploy_keys/index.html.haml b/app/views/projects/deploy_keys/index.html.haml index 2e9c5dc08c8..8e24c778b7c 100644 --- a/app/views/projects/deploy_keys/index.html.haml +++ b/app/views/projects/deploy_keys/index.html.haml @@ -1,4 +1,5 @@ - page_title "Deploy Keys" + %h3.page-title Deploy keys allow read-only access to the repository diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml index 52c1e03040c..30943f49bba 100644 --- a/app/views/projects/diffs/_diffs.html.haml +++ b/app/views/projects/diffs/_diffs.html.haml @@ -1,3 +1,6 @@ +- if params[:view] == 'parallel' + - fluid_layout true + .prepend-top-20.append-bottom-20 .pull-right .btn-group diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml index 007f6c6a787..ec1838eb489 100644 --- a/app/views/projects/merge_requests/_show.html.haml +++ b/app/views/projects/merge_requests/_show.html.haml @@ -1,4 +1,7 @@ - page_title "#{@merge_request.title} (##{@merge_request.iid})", "Merge Requests" +- if params[:view] == 'parallel' + - fluid_layout true + .merge-request{'data-url' => merge_request_path(@merge_request)} .merge-request-details.issuable-details = render "projects/merge_requests/show/mr_title"