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

7 files changed, 66 insertions, 83 deletions

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