fix some inconsistencies with the breadcrumbs

app/assets/javascripts/breadcrumb.js

@@ -14,7 +14,8 @@ export default () => {
   topLevelLinks.forEach(el => addTooltipToEl(el));
 
   $expander.closest('.dropdown')
-    .on('show.bs.dropdown hide.bs.dropdown', () => {
-      $expander.toggleClass('open');
+    .on('show.bs.dropdown hide.bs.dropdown', (e) => {
+      $('.js-breadcrumbs-collapsed-expander', e.currentTarget).toggleClass('open')
+        .tooltip('hide');
     });
 };

app/assets/stylesheets/new_nav.scss

@@ -330,6 +330,7 @@ header.navbar-gitlab-new {
 
 .breadcrumbs-list {
   display: flex;
+  flex-wrap: wrap;
   margin-bottom: 0;
 
   > li {
@@ -338,11 +339,7 @@ header.navbar-gitlab-new {
     position: relative;
 
     &:not(:last-child) {
-      margin-right: 10px;
-    }
-
-    &:not(:first-child) {
-      margin-left: 10px;
+      margin-right: 20px;
     }
 
     > a {

app/helpers/groups_helper.rb

@@ -22,7 +22,7 @@ module GroupsHelper
         full_title += if show_new_nav?
                         breadcrumb_list_item group_title_link(parent, hidable: false)
                       else
-                        group_title_link(parent, hidable: true)
+                        "#{group_title_link(parent, hidable: true)} <span class='hidable'> / </span>".html_safe
                       end
       end
     end

app/helpers/issuables_helper.rb

@@ -126,12 +126,21 @@ module IssuablesHelper
   end
 
   def issuable_meta(issuable, project, text)
-    output = content_tag(:strong, class: "identifier") do
+    output = ""
+
+    unless show_new_nav?
+      output << content_tag(:strong, class: "identifier") do
         concat("#{text} ")
         concat(to_url_reference(issuable))
       end
+    end
 
-    output << " opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe
+    opened_text = if show_new_nav?
+                    "Opened"
+                  else
+                    " opened"
+                  end
+    output << "#{opened_text} #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe
     output << content_tag(:strong) do
       author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "hidden-xs", tooltip: true)
       author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg")
@@ -141,7 +150,7 @@ module IssuablesHelper
     output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "hidden-xs hidden-sm")
     output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "hidden-md hidden-lg")
 
-    output
+    output.html_safe
   end
 
   def issuable_todo(issuable)

app/helpers/projects_helper.rb

@@ -81,7 +81,7 @@ module ProjectsHelper
       end
     end
 
-    "#{namespace_link} #{project_link}".html_safe
+    "#{namespace_link} #{('/' unless show_new_nav?)} #{project_link}".html_safe
   end
 
   def remove_project_message(project)

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

-- breadcrumb_link = breadcrumb_title_link
 - hide_top_links = @hide_top_links || false
 
-%nav.breadcrumbs{ role: "navigation" }
-  .breadcrumbs-container{ class: [container_class, @content_class] }
+%nav.breadcrumbs{ role: "navigation", class: [container_class, @content_class] }
+  .breadcrumbs-container
     - if defined?(@new_sidebar)
       = button_tag class: 'toggle-mobile-nav', type: 'button' do
         %span.sr-only Open sidebar

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

 - @no_container = true
-- breadcrumb_title "Commit #{@commit.short_id}"
+- add_to_breadcrumbs "Commit", project_commits_path(@project)
+- breadcrumb_title @commit.short_id
 - container_class = !fluid_layout && diff_view == :inline ? 'container-limited' : ''
 - limited_container_width = fluid_layout ? '' : 'limit-container-width'
 - @content_class = limited_container_width

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

 - @no_container = true
-- breadcrumb_title "Enviroment '#{@environment.name}'"
+- add_to_breadcrumbs "Environments", project_environments_path(@project)
+- breadcrumb_title @environment.name
 - page_title "Environments"
 = render "projects/pipelines/head"
 

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

 - @content_class = "limit-container-width" unless fluid_layout
-- breadcrumb_title "Issues #{@issue.to_reference}"
+- add_to_breadcrumbs "Issues", project_issues_path(@project)
+- breadcrumb_title @issue.to_reference
 - page_title           "#{@issue.title} (#{@issue.to_reference})", "Issues"
 - page_description     @issue.description
 - page_card_attributes @issue.card_attributes

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

 - @no_container = true
-- breadcrumb_title "Jobs ##{@build.id}"
+- add_to_breadcrumbs "Jobs", project_jobs_path(@project)
+- breadcrumb_title "##{@build.id}"
 - page_title "#{@build.name} (##{@build.id})", "Jobs"
 = render "projects/pipelines/head"
 

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

 - @content_class = "limit-container-width" unless fluid_layout
-- breadcrumb_title "Merge Requests #{@merge_request.to_reference}"
+- add_to_breadcrumbs "Merge Requests", project_merge_requests_path(@project)
+- breadcrumb_title @merge_request.to_reference
 - page_title "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
 - page_description @merge_request.description
 - page_card_attributes @merge_request.card_attributes

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

 - @no_container = true
-- breadcrumb_title "Milestone #{@milestone.title}"
+- add_to_breadcrumbs "Milestones", project_milestones_path(@project)
+- breadcrumb_title @milestone.title
 - page_title       @milestone.title, "Milestones"
 - page_description @milestone.description
 = render "shared/mr_head"

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

 - @no_container = true
-- breadcrumb_title "Pipelines ##{@pipeline.id}"
+- add_to_breadcrumbs "Pipelines", project_pipelines_path(@project)
+- breadcrumb_title "##{@pipeline.id}"
 - page_title "Pipeline"
 = render "projects/pipelines/head"
 

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

 - @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout
-- breadcrumb_title "Snippet #{@snippet.to_reference}"
+- add_to_breadcrumbs "Snippets", dashboard_snippets_path
+- breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 
 = render 'shared/snippets/header'

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

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

app/views/shared/snippets/_header.html.haml

@@ -3,9 +3,13 @@
     %span.sr-only
       = visibility_level_label(@snippet.visibility_level)
     = visibility_level_icon(@snippet.visibility_level, fw: false)
+  - unless show_new_nav?
     %strong.item-title
       Snippet #{@snippet.to_reference}
   %span.creator
+    - if show_new_nav?
+      Authored
+    - else
       authored
     = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
     by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}

app/views/snippets/show.html.haml

 - @hide_top_links = true
 - @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout
+- add_to_breadcrumbs "Snippets", dashboard_snippets_path
+- breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets"
 
 = render 'shared/snippets/header'