style updates

fixed some more breadcrumb titles

app/assets/stylesheets/new_nav.scss

@@ -292,7 +292,7 @@ header.navbar-gitlab-new {
 .breadcrumbs {
   display: flex;
-  min-height: 61px;
+  min-height: 48px;
   color: $gl-text-color;
 }
@@ -300,6 +300,8 @@ header.navbar-gitlab-new {
   display: flex;
   width: 100%;
   position: relative;
+  padding-top: $gl-padding;
+  padding-bottom: $gl-padding;
   align-items: center;
   border-bottom: 1px solid $border-color;
 }
@@ -311,7 +313,7 @@ header.navbar-gitlab-new {
   color: $gl-text-color-secondary;
   .avatar-tile {
-    margin-right: 5px;
+    margin-right: 4px;
     border: 1px solid $border-color;
     border-radius: 50%;
     vertical-align: sub;
@@ -332,6 +334,7 @@ header.navbar-gitlab-new {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 0;
+  line-height: 16px;
   > li {
     display: flex;
@@ -343,16 +346,21 @@ header.navbar-gitlab-new {
     }
     > a {
-      @include str-truncated(128px);
+      font-size: 12px;
       color: currentColor;
     }
   }
 }
+.breadcrumb-item-project-name {
+  @include str-truncated(128px);
+}
+
 .breadcrumbs-list-angle {
   position: absolute;
   right: -12px;
   top: 50%;
+  color: $gl-text-color-tertiary;
   transform: translateY(-50%);
 }
@@ -364,7 +372,7 @@ header.navbar-gitlab-new {
 .breadcrumbs-sub-title {
   margin: 0;
-  font-size: $gl-font-size;
+  font-size: 12px;
   font-weight: 600;
   line-height: 1;

app/helpers/groups_helper.rb

@@ -17,7 +17,7 @@ module GroupsHelper
     group.ancestors.reverse.each_with_index do |parent, index|
       if show_new_nav? && index > 0
-        add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false), location: :before)
+        add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false, show_avatar: true), location: :before)
       else
         full_title += if show_new_nav?
                         breadcrumb_list_item group_title_link(parent, hidable: false)
@@ -83,10 +83,10 @@ module GroupsHelper
   private
-  def group_title_link(group, hidable: false)
+  def group_title_link(group, hidable: false, show_avatar: false)
     link_to(group_path(group), class: "group-path #{'hidable' if hidable}") do
       output =
-        if show_new_nav? && group.try(:avatar_url)
+        if show_new_nav? && group.try(:avatar_url) || (show_new_nav? && show_avatar)
           image_tag(group_icon(group), class: "avatar-tile", width: 16, height: 16)
         else
           ""

app/helpers/projects_helper.rb

@@ -52,7 +52,7 @@ module ProjectsHelper
   def project_title(project)
     namespace_link =
       if project.group
-        group_title(project.group)
+        group_title(project.group, nil, nil)
       else
         owner = project.namespace.owner
         link_to(simple_sanitize(owner.name), user_path(owner))
@@ -66,7 +66,7 @@ module ProjectsHelper
           ""
         end
-      output << simple_sanitize(project.name)
+      output << content_tag("span", simple_sanitize(project.name), class: "breadcrumb-item-project-name")
       output.html_safe
     end

app/views/groups/subgroups.html.haml

+- breadcrumb_title "Details"
 - @no_container = true
 = render 'head'

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

@@ -13,7 +13,8 @@
         - if @breadcrumbs_extra_links
           - @breadcrumbs_extra_links.each do |extra|
             = breadcrumb_list_item link_to(extra[:text], extra[:link])
-        = render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :after
+        - if defined?(@breadcrumb_dropdown_links) && @breadcrumb_dropdown_links.key?(:after)
+          = render "layouts/nav/breadcrumbs/collapsed_dropdown", items: @breadcrumb_dropdown_links[:after]
         %li
           %h2.breadcrumbs-sub-title= @breadcrumb_title
     - if content_for?(:breadcrumbs_extra)

app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml

@@ -8,4 +8,4 @@
     .dropdown-menu
       %ul
         - @breadcrumb_dropdown_links[dropdown_location].each_with_index do |link, index|
-          %li{ style: "text-indent: #{[index * 15, 60].min}px;" }= link
+          %li{ style: "text-indent: #{[index * 16, 60].min}px;" }= link

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

 - @no_container = true
 - @content_class = "issue-boards-content"
-- breadcrumb_title "Issue Board"
+- breadcrumb_title "Issues Board"
 - page_title "Boards"
 - content_for :page_specific_javascripts do

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

 - @no_container = true
+- breadcrumb_title "Compare Revisions"
 - page_title "Compare"
 = render "projects/commits/head"

app/views/projects/compare/show.html.haml

 - @no_container = true
-- breadcrumb_title "Compare"
+- add_to_breadcrumbs "Compare Revisions", project_compare_index_path(@project)
 - page_title "#{params[:from]}...#{params[:to]}"
 = render "projects/commits/head"

app/views/projects/pipeline_schedules/edit.html.haml

+- add_to_breadcrumbs _("Schedules"), pipeline_schedules_path(@project)
+- breadcrumb_title "##{@schedule.id}"
 - page_title _("Edit"), @schedule.description, _("Pipeline Schedule")
 %h3.page-title

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

-- breadcrumb_title "Schedules"
+- breadcrumb_title _("Schedules")
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'common_vue'

app/views/projects/releases/edit.html.haml

 - @no_container = true
+- add_to_breadcrumbs "Tags", project_tags_path(@project)
+- breadcrumb_title @tag.name
 - page_title "Edit", @tag.name, "Tags"
 = render "projects/commits/head"

app/views/projects/snippets/edit.html.haml

+- add_to_breadcrumbs "Snippets", project_snippets_path(@project)
+- breadcrumb_title @snippet.to_reference
 - page_title "Edit", "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 %h3.page-title

app/views/projects/snippets/new.html.haml

+- add_to_breadcrumbs "Snippets", project_snippets_path(@project)
+- breadcrumb_title "New"
 - page_title "New Snippets"
 %h3.page-title