Merge branch 'fluid-fixed-layout' into 'master'

Limit content width for big screens except certain pages

- [x] limit content width to 1200px
- [x] align header with head
- [x] set full-width for split diff pages

Fixes #2353
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

See merge request !1207

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)

app/assets/stylesheets/base/layout.scss

@@ -20,3 +20,8 @@ html {
 .navless-container {
   margin-top: 30px;
 }
+
+
+.container-limited {
+  max-width: $fixed-layout-width;
+}

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;
 
 
 /*

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;

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;
+    }
+  }
+}

app/assets/stylesheets/pages/issuable.scss

@@ -45,9 +45,3 @@
 
   .btn { font-size: 13px; }
 }
-
-.issuable-details {
-  .description {
-    max-width: $readable-width;
-  }
-}

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;

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;
-        }
+      a {
+        color: $color-light;
+      }
 
-        &:hover {
-          background-color: $color-dark;
-          a {
-            color: #FFF;
-          }
+      &:hover {
+        background-color: $color-dark;
+        a {
+          color: #FFF;
         }
       }
     }
-  }
 
-  .page-with-sidebar {
     .collapse-nav a {
       color: #FFF;
       background: $color;

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

app/views/layouts/_page.html.haml

 .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

app/views/layouts/header/_default.html.haml

 %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')

app/views/layouts/header/_public.html.haml

 %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

app/views/projects/deploy_keys/index.html.haml

 - page_title "Deploy Keys"
+
 %h3.page-title
   Deploy keys allow read-only access to the repository
 

app/views/projects/diffs/_diffs.html.haml

+- if params[:view] == 'parallel'
+  - fluid_layout true
+
 .prepend-top-20.append-bottom-20
   .pull-right
     .btn-group

app/views/projects/merge_requests/_show.html.haml

 - 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"