diff options
| author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-10-09 07:40:09 +0000 |
|---|---|---|
| committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-10-09 07:40:09 +0000 |
| commit | 63adaacdc85bbde4e51f612012249c1d499ca181 (patch) | |
| tree | e7797b6112a7f7f21ff7e7c07684baa5f1bd3d9c | |
| parent | 680b6d88a5c0d63deeb2909f1c83e3630db87780 (diff) | |
| parent | 95411f7151a8e1058731a6eb5fefcf7d91312b58 (diff) | |
| download | gitlab-ce-63adaacdc85bbde4e51f612012249c1d499ca181.tar.gz | |
Merge branch 'fix-header-hamburger-positioning' into 'master'
Fixed positioning of hamburger menu on header
Hey guys just noticed the hamburger menu for the top navigation was mis-aligned on
`gitlab-ce:master` and `gitlab.com`.
I was not able to find an open issue or merge request directly referencing this issue so thought I would add a quick fix.
### Changes
This MR changes the vertical positioning from `top` to vertical margins (Like in bootstrap itself).
- Also added a minor fix to remove `border-top` from the collapse menu so its the same height as the navigation.
- finally added an active class to the hamburger toggle so you can see when its open.
This changes an element in `app/views/layouts/header/_default.html.haml` and thus would impact most pages behind login.
## Screenshots
### Before
### After
Happy to discuss any changes/suggestions.
Thanks
See merge request !1541
| -rw-r--r-- | CHANGELOG | 1 | ||||
| -rw-r--r-- | app/assets/javascripts/application.js.coffee | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/header.scss | 7 |
3 files changed, 7 insertions, 2 deletions
diff --git a/CHANGELOG b/CHANGELOG index b1a35c3c2ab..20bd95f03a9 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -41,6 +41,7 @@ v 8.1.0 (unreleased) - Move CI services page to project settings area - Add "Quick Submit" behavior to input fields throughout the application. Use Cmd+Enter on Mac and Ctrl+Enter on Windows/Linux. + - Fix position of hamburger in header for smaller screens (Han Loong Liauw) v 8.0.4 - Fix Message-ID header to be RFC 2111-compliant to prevent e-mails being dropped (Stan Hu) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 8e987ac4e83..945ffb660e6 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -180,6 +180,7 @@ $ -> $('.navbar-toggle').on 'click', -> $('.header-content .title').toggle() $('.header-content .navbar-collapse').toggle() + $('.navbar-toggle').toggleClass('active') # Show/hide comments on diff $("body").on "click", ".js-toggle-diff-comments", (e) -> diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 543ce41ab52..91e6975e269 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -50,15 +50,17 @@ header { .navbar-toggle { color: #666; - margin: 0; + margin: 6px 0; border-radius: 0; position: absolute; right: 2px; - top: 15px; &:hover { background-color: #EEE; } + &.active { + color: #7f8fa4; + } } } } @@ -87,6 +89,7 @@ header { .navbar-collapse { float: right; + border-top: none; } } |