Commit 63adaacd authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

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

![before](https://gitlab.com/hanloong/gitlab-ce/uploads/e3d4631dd0420ec0e9048c435a2f734b/before.png)

### After

![after](https://gitlab.com/hanloong/gitlab-ce/uploads/7c93c3ef1b01fbefc39c5a1ed61c2d1b/after.png)

Happy to discuss any changes/suggestions.

Thanks

See merge request !1541
parents 680b6d88 95411f71
...@@ -41,6 +41,7 @@ v 8.1.0 (unreleased) ...@@ -41,6 +41,7 @@ v 8.1.0 (unreleased)
- Move CI services page to project settings area - Move CI services page to project settings area
- Add "Quick Submit" behavior to input fields throughout the application. Use - Add "Quick Submit" behavior to input fields throughout the application. Use
Cmd+Enter on Mac and Ctrl+Enter on Windows/Linux. 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 v 8.0.4
- Fix Message-ID header to be RFC 2111-compliant to prevent e-mails being dropped (Stan Hu) - Fix Message-ID header to be RFC 2111-compliant to prevent e-mails being dropped (Stan Hu)
......
...@@ -180,6 +180,7 @@ $ -> ...@@ -180,6 +180,7 @@ $ ->
$('.navbar-toggle').on 'click', -> $('.navbar-toggle').on 'click', ->
$('.header-content .title').toggle() $('.header-content .title').toggle()
$('.header-content .navbar-collapse').toggle() $('.header-content .navbar-collapse').toggle()
$('.navbar-toggle').toggleClass('active')
# Show/hide comments on diff # Show/hide comments on diff
$("body").on "click", ".js-toggle-diff-comments", (e) -> $("body").on "click", ".js-toggle-diff-comments", (e) ->
......
...@@ -50,15 +50,17 @@ header { ...@@ -50,15 +50,17 @@ header {
.navbar-toggle { .navbar-toggle {
color: #666; color: #666;
margin: 0; margin: 6px 0;
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
right: 2px; right: 2px;
top: 15px;
&:hover { &:hover {
background-color: #EEE; background-color: #EEE;
} }
&.active {
color: #7f8fa4;
}
} }
} }
} }
...@@ -87,6 +89,7 @@ header { ...@@ -87,6 +89,7 @@ header {
.navbar-collapse { .navbar-collapse {
float: right; float: right;
border-top: none;
} }
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment