Group navigation design update

app/assets/stylesheets/framework/blocks.scss

@@ -150,6 +150,13 @@
       right: auto;
     }
   }
+
+  &.groups-cover-block {
+    background: $white-light;
+    border-bottom: 1px solid $border-color;
+    text-align: left;
+    padding: 24px 0;
+  }
 }
 
 .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/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 {
@@ -193,7 +193,7 @@
   .controls {
     float: right;
     position: relative;
-    top: 10px;
+    top: 0;
 
     .dropdown {
       margin-left: 7px;
@@ -202,5 +202,9 @@
 
   .nav-links {
     border-bottom: none;
+
+    a {
+      padding-top: 2px;
+    }
   }
 }

app/assets/stylesheets/framework/variables.scss

@@ -74,6 +74,7 @@ $btn-transparent-color: #8f8f8f;
 $settings-icon-size: 18px;
 $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
+$link-underline-blue: #4a8bee;
 
 /*
  * Color schema
@@ -108,6 +109,7 @@ $red-light: #e52c5a;
 $red-normal: #d22852;
 $red-dark: darken($red-normal, 5%);
 
+$black: #000000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 
 $border-white-light: #f1f2f4;

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/show.html.haml

@@ -4,22 +4,16 @@
   - 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
-  .avatar-holder
+.cover-block.groups-cover-block
+  .container-fluid
     = 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-title
+      %h1 @#{@group.path}
 
-  .cover-desc.username
-    @#{@group.path}
-
-  - if @group.description.present?
-    .cover-desc.description
-      = markdown(@group.description, pipeline: :description)
+    - if @group.description.present?
+      .cover-desc.description
+        = markdown(@group.description, pipeline: :description)
 
 %div{ class: container_class }
   .top-area

app/views/layouts/nav/_group.html.haml

@@ -44,14 +44,16 @@
       %span
         Issues
         - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-        %span.badge.count= number_with_delimiter(issues.count)
+        %span.count
+          (#{number_with_delimiter(issues.count)})
   = nav_link(path: 'groups#merge_requests') do
     = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
       = icon('tasks fw')
       %span
         Merge Requests
         - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-        %span.badge.count= number_with_delimiter(merge_requests.count)
+        %span.count
+          (#{number_with_delimiter(merge_requests.count)})
   = nav_link(controller: [:group_members]) do
     = link_to group_group_members_path(@group), title: 'Members' do
       = icon('users fw')