Merge branch 'group-navigation-redesign' into 'master'

Redesign navigation for group pages

Part of #14838. This MR targets on desktop version. Mobile version improvements will be in separate merge request 

See merge request !3980

app/assets/stylesheets/framework/avatar.scss

@@ -28,6 +28,7 @@
   &.s46 { width: 46px; height: 46px; margin-right: 15px; }
   &.s48 { width: 48px; height: 48px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }
+  &.s70 { width: 70px; height: 70px; margin-right: 14px; }
   &.s90 { width: 90px; height: 90px; margin-right: 15px; }
   &.s110 { width: 110px; height: 110px; margin-right: 15px; }
   &.s140 { width: 140px; height: 140px; margin-right: 20px; }

app/assets/stylesheets/framework/blocks.scss

@@ -155,6 +155,41 @@
       right: auto;
     }
   }
+
+  &.groups-cover-block {
+    background: $white-light;
+    border-bottom: 1px solid $border-color;
+    text-align: left;
+    padding: 24px 0;
+
+    .group-info {
+      .cover-title {
+        margin-top: 9px;
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      text-align: center;
+
+      .avatar {
+        float: none;
+      }
+    }
+  }
+
+  .group-info {
+
+    h1 {
+      display: inline;
+      font-weight: normal;
+      font-size: 24px;
+      color: $gl-title-color;
+    }
+  }
 }
 .block-connector {

app/assets/stylesheets/framework/header.scss

@@ -30,6 +30,10 @@ header {
     border: none;
     border-bottom: 1px solid $border-color;
+    &.with-horizontal-nav {
+      border-bottom: none;
+    }
+
     .container-fluid {
       width: 100% !important;
       filter: none;

app/assets/stylesheets/framework/mobile.scss

@@ -30,7 +30,7 @@
   }
   .rss-btn {
-    display: none !important;
+    display: none;
   }
   .project-home-links {

app/assets/stylesheets/framework/nav.scss

@@ -26,8 +26,8 @@
     }
     &.active a {
-      color: #000;
-      border-bottom: 2px solid #4688f1;
+      border-bottom: 2px solid $link-underline-blue;
+      color: $black;
     }
     .badge {
@@ -140,6 +140,12 @@
       }
     }
+    .project-filter-form {
+      input {
+        background-color: $background-color;
+      }
+    }
+
     @media (max-width: $screen-xs-max) {
       padding-bottom: 0;
@@ -187,13 +193,31 @@
 }
 .layout-nav {
+  position: fixed;
+  top: $header-height;
+  width: 100%;
+  z-index: 1;
   background: $background-color;
   border-bottom: 1px solid $border-color;
+  transition-duration: .3s;
   .controls {
     float: right;
-    position: relative;
-    top: 10px;
+    padding: 7px 5px 0 0;
+
+    i {
+      color: $layout-link-gray;
+    }
+
+    .fa-rss,
+    .fa-cog {
+      font-size: 16px;
+    }
+
+    .fa-caret-down {
+      margin-left: 5px;
+      color: $gl-icon-color;
+    }
     .dropdown {
       margin-left: 7px;
@@ -202,5 +226,34 @@
   .nav-links {
     border-bottom: none;
+    height: 51px;
+    white-space: nowrap;
+    overflow-x: auto;
+
+    li {
+
+      a {
+        padding-top: 10px;
+      }
+
+      a, i {
+        color: $layout-link-gray;
+      }
+
+      &.active {
+        a, i {
+          color: $black;
+        }
+      }
+
+      .badge {
+        color: $gl-icon-color;
+      }
+    }
   }
+
+}
+
+.page-with-layout-nav {
+  margin-top: 50px;
 }

app/assets/stylesheets/framework/sidebar.scss

@@ -3,6 +3,7 @@
   position: absolute;
   width: 58px;
   cursor: pointer;
+  margin-top: 8px;
 }
 .page-with-sidebar {
@@ -62,7 +63,7 @@
       float: left;
       height: $header-height;
       width: 100%;
-      padding: 11px 0 11px 22px;
+      padding-left: 22px;
       overflow: hidden;
       outline: none;
       transition-duration: .3s;
@@ -85,7 +86,7 @@
           margin: 0;
           margin-left: 50px;
           font-size: 19px;
-          line-height: 41px;
+          line-height: 50px;
           font-weight: normal;
         }
       }
@@ -254,6 +255,10 @@
       }
     }
   }
+
+  .layout-nav {
+    padding-right: $sidebar_collapsed_width;
+  }
 }
 .page-sidebar-expanded {
@@ -280,6 +285,10 @@
       }
     }
   }
+
+  .layout-nav {
+    padding-right: $sidebar_width;
+  }
 }
 .right-sidebar-collapsed {

app/assets/stylesheets/framework/variables.scss

@@ -66,7 +66,7 @@ $gl-padding-top: 10px;
 $row-hover: #f4f8fe;
 $progress-color: #c0392b;
 $avatar_radius: 50%;
-$header-height: 58px;
+$header-height: 50px;
 $fixed-layout-width: 1280px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
@@ -75,6 +75,8 @@ $btn-transparent-color: #8f8f8f;
 $settings-icon-size: 18px;
 $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
+$link-underline-blue: #4a8bee;
+$layout-link-gray: #7e7c7c;
 /*
  * Color schema
@@ -109,6 +111,7 @@ $red-light: #e52c5a;
 $red-normal: #d22852;
 $red-dark: darken($red-normal, 5%);
+$black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 $border-white-light: #f1f2f4;

app/assets/stylesheets/pages/profile.scss

@@ -205,3 +205,21 @@
     text-align: center;
   }
 }
+
+.user-profile {
+  @media (max-width: $screen-xs-max) {
+    .cover-block {
+      padding-top: 20px;
+    }
+
+    .cover-controls {
+      position: static;
+      margin-bottom: 20px;
+
+      .btn {
+        display: inline-block;
+        width: 48%;
+      }
+    }
+  }
+}

app/helpers/nav_helper.rb

@@ -34,10 +34,13 @@ module NavHelper
   end
   def nav_header_class
-    if nav_menu_collapsed?
-      "header-collapsed"
-    else
-      "header-expanded"
-    end
+    class_name =
+      if nav_menu_collapsed?
+        "header-collapsed"
+      else
+        "header-expanded"
+      end
+    class_name += " with-horizontal-nav" if defined?(nav) && nav
+    class_name
   end
 end

app/views/groups/activity.html.haml

@@ -3,7 +3,6 @@
     = auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
 - page_title    "Activity"
-- header_title  group_title(@group, "Activity", activity_group_path(@group))
 %section.activities
   = render 'activities'

app/views/groups/edit.html.haml

-- header_title group_title(@group, "Settings", edit_group_path(@group))
-
 .panel.panel-default.prepend-top-default
   .panel-heading
     Group settings

app/views/groups/group_members/index.html.haml

 - page_title "Members"
-- header_title group_title(@group, "Members", group_group_members_path(@group))
 .group-members-page.prepend-top-default
   - if current_user && current_user.can?(:admin_group_member, @group)

app/views/groups/issues.html.haml

 - page_title "Issues"
-- header_title group_title(@group, "Issues", issues_group_path(@group))
 = content_for :meta_tags do
   - if current_user
     = auto_discovery_link_tag(:atom, issues_group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} issues")

app/views/groups/merge_requests.html.haml

 - page_title "Merge Requests"
-- header_title group_title(@group, "Merge Requests", merge_requests_group_path(@group))
 .top-area
   = render 'shared/issuable/nav', type: :merge_requests

app/views/groups/milestones/index.html.haml

 - page_title "Milestones"
-- header_title group_title(@group, "Milestones", group_milestones_path(@group))
 .top-area
   = render 'shared/milestones_filter'

app/views/groups/projects.html.haml

 - page_title "Projects"
-- header_title group_title(@group, "Projects", projects_group_path(@group))
 .panel.panel-default.prepend-top-default
   .panel-heading

app/views/groups/show.html.haml

@@ -4,28 +4,20 @@
   - if current_user
     = auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
-.cover-block
-  .cover-controls
-    - if @group && can?(current_user, :admin_group, @group)
-      = link_to icon('pencil'), edit_group_path(@group), class: 'btn'
-    - if current_user
-      = link_to icon('rss'), group_path(@group, { format: :atom, private_token: current_user.private_token }), title: "Feed", class: 'btn rss-btn'
-
-  .avatar-holder
+.cover-block.groups-cover-block
+  .container-fluid.container-limited
     = link_to group_icon(@group), target: '_blank' do
-      = image_tag group_icon(@group), class: "avatar group-avatar s90"
-  .cover-title
-    %h1
-      = @group.name
-      %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
-        = visibility_level_icon(@group.visibility_level, fw: false)
-
-  .cover-desc.username
-    @#{@group.path}
-
-  - if @group.description.present?
-    .cover-desc.description
-      = markdown(@group.description, pipeline: :description)
+      = image_tag group_icon(@group), class: "avatar group-avatar s70"
+    .group-info
+      .cover-title
+        %h1
+          @#{@group.path}
+          %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+            = visibility_level_icon(@group.visibility_level, fw: false)
+
+      - if @group.description.present?
+        .cover-desc.description
+          = markdown(@group.description, pipeline: :description)
 %div{ class: container_class }
   .top-area

app/views/layouts/_page.html.haml

@@ -26,7 +26,7 @@
     .layout-nav
       .container-fluid
         = render "layouts/nav/#{nav}"
-  .content-wrapper
+  .content-wrapper{ class: ('page-with-layout-nav' if defined?(nav) && nav) }
     = render "layouts/flash"
     = yield :flash_message
     %div{ class: (container_class unless @no_container) }

app/views/layouts/group.html.haml

 - page_title       @group.name
 - page_description @group.description  unless page_description
 - header_title     group_title(@group) unless header_title
-- sidebar          "group"             unless sidebar
+- nav              "group"
 = render template: "layouts/application"

app/views/layouts/group_settings.html.haml

 - page_title    "Settings"
-- header_title group_title(@group, "Settings", edit_group_path(@group))
-- sidebar       "group_settings"
+- nav           "group"
 = render template: "layouts/group"