[Mobile] open/close main menu with a hamburger icon.

pull/6232/head
Wieland Lindenthal 7 years ago
parent 803ab77f7f
commit cd33556541
  1. 4
      app/assets/stylesheets/layout/_main_menu_mobile.sass
  2. 3
      app/assets/stylesheets/layout/_top_menu.sass
  3. 18
      app/assets/stylesheets/layout/_top_menu_mobile.sass
  4. 12
      app/views/layouts/base.html.erb

@ -38,8 +38,8 @@
%absolute-layout-mode &
height: auto
#toggle-project-menu
position: relative
bottom: initial
display: none
.hidden-navigation #main-menu
overflow: hidden
border-bottom: 0

@ -26,6 +26,9 @@
// See docs/COPYRIGHT.rdoc for more details.
//++
#mobile-main-menu-toggle
display: none
#logo
@include varprop(width, main-menu-width)
@include varprop(height, header-height)

@ -27,6 +27,24 @@
//++
@include breakpoint(680px down)
#mobile-main-menu-toggle
display: block
width: 50px
height: $header-height-mobile
float: left
text-align: center
margin-right: -13px
a
height: $header-height-mobile
line-height: $header-height-mobile
zoom: 1
@include varprop(color, header-item-font-color)
@include varprop(font-size, header-item-font-size)
text-decoration: none
padding: 0 15px
.nosidebar
#mobile-main-menu-toggle
display: none
#logo
background-color: transparent

@ -99,6 +99,16 @@ See docs/COPYRIGHT.rdoc for more details.
<h1 class="hidden-for-sighted">
<%= l(:label_top_menu) %>
</h1>
<div id="mobile-main-menu-toggle"
ng-controller="MainMenuController as mainMenu"
ng-click="mainMenu.toggleNavigation()">
<a icon="icon-hamburger"
title="Toggle main menu"
aria-haspopup="true"
href="">
<i class="icon-hamburger" aria-hidden="true"></i>
</a>
</div>
<a href="" class="hidden-for-sighted skip-navigation-link"
aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
<%= I18n.t('js.work_packages.jump_marks.content') %>
@ -123,7 +133,7 @@ See docs/COPYRIGHT.rdoc for more details.
<div id="main-menu" ng-controller="MainMenuController as mainMenu">
<h1 class="hidden-for-sighted"><%= l(:label_main_menu) %></h1>
<div id="toggle-project-menu"
ng-class="{ 'show': !showNavigation }">
ng-class="{ 'show': !showNavigation }">
<a href="#"
title="<%= l(:show_hide_project_menu) %>"
class="navigation-toggler"

Loading…
Cancel
Save