diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2016-09-01 17:49:25 +0000 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2016-09-01 17:49:25 +0000 |
commit | bc13cd7a9bca2c21d974170f24653934b1bded2d (patch) | |
tree | 9e070b6b581c382bd7d8ff711322a17e4bc073b3 /app | |
parent | 9e2feaa55618f5676ba50428041cda6cc7a32783 (diff) | |
parent | cf1174c673ce4244236b64f25e34f1a609552ede (diff) | |
download | gitlab-ce-bc13cd7a9bca2c21d974170f24653934b1bded2d.tar.gz |
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
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 20 | ||||
-rw-r--r-- | app/helpers/projects_helper.rb | 4 |
2 files changed, 18 insertions, 6 deletions
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 2b4fc0fb068..1036219172e 100644 --- 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; diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 79a1eba9714..d6efa603223 100644 --- 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 |