11 files changed, 39 insertions, 13 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 588a4b4eef6..30d4955c9f3 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -49,6 +49,8 @@ v 8.8.0 (unreleased)
   - Total method execution timings are no longer tracked
   - Allow Admins to remove the Login with buttons for OAuth services and still be able to import !4034. (Andrei Gliga)
   - Add API endpoints for un/subscribing from/to a label. !4051 (Ahmad Sherif)
+  - Hide left sidebar on phone screens to give more space for content
+  - Redesign navigation for profile and group pages
 
 v 8.7.5
   - Fix relative links in wiki pages. !4050
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 3386523dbf7..f8aecd0558d 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -289,7 +289,7 @@ table {
   text-shadow: none;
 
   @media (min-width: $screen-sm-min) {
-    margin-top: 11px;
+    margin-top: 8px;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index dc4668877f2..51a17d1469e 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -9,9 +9,6 @@
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
     .header-logo {
-      background-color: $color;
-      border-color: $color;
-
       a {
         color: $color-light;
 
@@ -21,7 +18,7 @@
       }
 
       &:hover {
-        background-color: $color-darker;
+        background-color: $color-dark;
         a {
           color: #fff;
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 8190a97ed58..0da96c4017d 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -6,12 +6,12 @@ header {
   transition-duration: .3s;
 
   &.navbar-empty {
-    height: 58px;
+    height: $header-height;
     background: #fff;
     border-bottom: 1px solid $btn-gray-hover;
 
     .center-logo {
-      margin: 11px 0;
+      margin: 8px 0;
       text-align: center;
 
       #tanuki-logo, img {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index f2d7dc625e0..a81fcb1c6b3 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -209,6 +209,15 @@
     float: right;
     padding: 7px 0 0;
 
+    @media (max-width: $screen-xs-min) {
+      float: none;
+      padding: 0 9px;
+
+      .dropdown-new {
+        width: 100%;
+      }
+    }
+
     i {
       color: $layout-link-gray;
     }
@@ -225,6 +234,10 @@
 
     .dropdown {
       margin-left: 7px;
+
+      @media (max-width: $screen-xs-min) {
+        margin-left: 0;
+      }
     }
   }
 
@@ -260,4 +273,10 @@
 
 .page-with-layout-nav {
   margin-top: 50px;
+
+  &.controls-dropdown-visible {
+    @media (max-width: $screen-xs-min) {
+      margin-top: 96px;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index bd91f51708c..f90d7a806d3 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -312,7 +312,7 @@
     }
 
     .nav-sidebar li a {
-      width: 230px;
+      width: $sidebar_width;
 
       &.back-link {
         i {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 84e74db06b0..5fa4c266607 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -2,7 +2,7 @@
  * Layout
  */
 $sidebar_collapsed_width: 62px;
-$sidebar_width: 230px;
+$sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 1cf3023ecc9..d06086a581b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -125,7 +125,7 @@
 
 .right-sidebar {
   position: fixed;
-  top: 58px;
+  top: $header-height;
   bottom: 0;
   right: 0;
   z-index: 10;
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index 3aa41030453..fbb799eecd3 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -43,4 +43,12 @@ module NavHelper
     class_name += " with-horizontal-nav" if defined?(nav) && nav
     class_name
   end
+
+  def layout_nav_class
+    "page-with-layout-nav" if defined?(nav) && nav
+  end
+
+  def layout_dropdown_class
+    "controls-dropdown-visible" if current_user
+  end
 end
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 3c3bc41bf0e..5be0b546a62 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,5 +1,4 @@
 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
-  = render "layouts/broadcast"
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo
       %a#logo
@@ -26,7 +25,8 @@
     .layout-nav
       .container-fluid
         = render "layouts/nav/#{nav}"
-  .content-wrapper{ class: ('page-with-layout-nav' if defined?(nav) && nav) }
+  .content-wrapper{ class: "#{layout_nav_class} #{layout_dropdown_class}" }
+    = render "layouts/broadcast"
     = render "layouts/flash"
     = yield :flash_message
     %div{ class: (container_class unless @no_container) }
diff --git a/app/views/layouts/nav/_group_settings.html.haml b/app/views/layouts/nav/_group_settings.html.haml
index e391ec7f2b7..0b2673f1a82 100644
--- a/app/views/layouts/nav/_group_settings.html.haml
+++ b/app/views/layouts/nav/_group_settings.html.haml
@@ -1,7 +1,7 @@
 - if current_user
   - if access = @group.users.find_by(id: current_user.id)
     .controls
-      %span.dropdown.group-settings-dropdown
+      .dropdown.group-settings-dropdown
         %a.dropdown-new.btn.btn-default#group-settings-button{href: '#', 'data-toggle' => 'dropdown'}
           = icon('cog')
           = icon('caret-down')