Merge branch '21506-fix-title-dropdown-chevron' into 'master'

Resolve "Inconsistency: Repo Title "down caret" cropped on smaller viewports" ## What does this MR do? Fixes an issue where the dropdown chevron for a project list was not visible on smaller viewports. This MR also changes the dropdown trigger into a `button` element for better accessibility (it can now be tabbed to like any link). ## Are there points in the code the reviewer needs to double check? None that I can think of. ## Why was this MR needed? Better accessibility and support for smaller viewports. ## Screenshots (if relevant) Dropdown toggle now targetable by pressing tab to select. ![Screen_Shot_2016-08-31_at_9.12.15_PM](/uploads/8b2038a8ae259efd32da2e94a309ce88/Screen_Shot_2016-08-31_at_9.12.15_PM.png) Chevron no longer hidden when project title length triggers `overflow: ellipsis`. ![Screen_Shot_2016-08-31_at_9.13.38_PM](/uploads/382e76c06e54bc307106a84ec21ab892/Screen_Shot_2016-08-31_at_9.13.38_PM.png) ## Does this MR meet the acceptance criteria? - [x] CHANGELOG entry added - Tests - [x] All builds are passing - [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides) - [x] Branch has no merge conflicts with `master` (if you do - rebase it please) - [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits) ## What are the relevant issue numbers? Closes #21506 See merge request !6140

Merge branch '21506-fix-title-dropdown-chevron' into 'master'
bc13cd7a · Annabel Dunstone Gray · 9e2feaa5 · cf1174c6 · bc13cd7a · bc13cd7a
Commit bc13cd7a authored Sep 01, 2016 by Annabel Dunstone Gray
Hide whitespace changes
Inline Side-by-side

Showing with 19 additions and 6 deletions

CHANGELOG CHANGELOG +1 -0

header.scss app/assets/stylesheets/framework/header.scss +15 -5

projects_helper.rb app/helpers/projects_helper.rb +3 -1

No files found.
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -34,6 +34,7 @@ v 8.12.0 (unreleased)
  - Use JavaScript tooltips for mentions !5301 (winniehell)
  - Fix markdown help references (ClemMakesApps)
  - Add last commit time to repo view (ClemMakesApps)
+  - Fix accessibility and visibility of project list dropdown button !6140
  - Added project specific enable/disable setting for LFS !5997
  - Don't expose a user's token in the `/api/v3/user` API (!6047)
  - Remove redundant js-timeago-pending from user activity log (ClemMakesApps)

--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -136,6 +136,8 @@ header {
    }

    .title {
+      position: relative;
+      padding-right: 20px;
      margin: 0;
      font-size: 19px;
      max-width: 400px;
@@ -148,7 +150,11 @@ header {
      vertical-align: top;
      white-space: nowrap;

-      @media (max-width: $screen-sm-max) {
+      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+        max-width: 300px;
+      }
+
+      @media (max-width: $screen-xs-max) {
        max-width: 190px;
      }

@@ -160,11 +166,15 @@ header {
      }

      .dropdown-toggle-caret {
-        position: relative;
-        top: -2px;
+        color: $gl-text-color;
+        border: transparent;
+        background: transparent;
+        position: absolute;
+        right: 3px;
        width: 12px;
-        line-height: 12px;
-        margin-left: 5px;
+        line-height: 19px;
+        margin-top: (($header-height - 19) / 2);
+        padding: 0;
        font-size: 10px;
        text-align: center;
        cursor: pointer;

--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -61,7 +61,9 @@ module ProjectsHelper
    project_link = link_to simple_sanitize(project.name), project_path(project), { class: "project-item-select-holder" }

    if current_user
-      project_link << icon("chevron-down", class: "dropdown-toggle-caret js-projects-dropdown-toggle", aria: { label: "Toggle switch project dropdown" }, data: { target: ".js-dropdown-menu-projects", toggle: "dropdown" })
+      project_link << button_tag(type: 'button', class: "dropdown-toggle-caret js-projects-dropdown-toggle", aria: { label: "Toggle switch project dropdown" }, data: { target: ".js-dropdown-menu-projects", toggle: "dropdown" }) do
+        icon("chevron-down")
+      end
    end

    full_title = "#{namespace_link} / #{project_link}".html_safe