Skip to content

Commit

Permalink
menu restyle and html change to ensure easier cross platform stabilit…
Browse files Browse the repository at this point in the history 
…y - still work to do
  • Loading branch information
@MortenHofft
MortenHofft committed Oct 26, 2016
1 parent 03a18bc commit 928be1a
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 42 deletions.
11 changes: 7 additions & 4 deletions app/views/shared/layout/partials/navigation/mobileheader/mobileheader.nunjucks
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
<div>
<div class="site-header__mobile-options clearfix">
<div class="navbar-action">
<a href="#" class="action-icon gb-icon-logo site-header__menu-toggle">
<span>Menu</span>
<a href="" class="action-icon site-header__menu-toggle">
<span class="site-header__mobile__icon gb-icon-logo"></span>
<span class="site-header__mobile__icon gb-icon-close"></span>
<span class="site-header__mobile__text">Menu</span>
</a>
</div>

Expand All @@ -15,8 +17,9 @@
</div>-->

<div class="navbar-action">
<a href="#" class="action-icon gb-icon-search site-header__search-toggle">
<span>Search</span>
<a href="" class="action-icon site-header__search-toggle">
<span class="site-header__mobile__icon gb-icon-search"></span>
<span class="site-header__mobile__text">Search</span>
</a>
</div>

Expand Down
52 changes: 49 additions & 3 deletions app/views/shared/layout/partials/navigation/mobileheader/mobileheader.styl
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
.site-header {
siteHeaderBar()
a {
height ($navBar_height - $navBar_borderWidth)
text-decoration none
color inherit
menuTextShadow()
display inline-block
width 4rem
relative()
}

.site-header__mobile-options {
Expand All @@ -14,11 +18,53 @@
float right
> div {
float right
height ($navBar_height - $navBar_borderWidth)
}
}
}
.site-header__mobile__icon {
position absolute
font-size 28px
width 4rem
display block
text-align center
overflow hidden
top 6px
height 28px
line-height 28px
}
.site-header__mobile__text {
position absolute
bottom 4px
width 4rem
display block
text-align center
}
&__menu-toggle {
.gb-icon-close {
display none
}
}
}

.is-active.site-header__search-toggle:before, .site-header.is-active .site-header__menu-toggle:before {
content $icon-string-close_L
}

.is-active .site-header__menu-toggle {
.gb-icon-logo {
display none
}
.gb-icon-close {
display block
}
}

.site-header__search-toggle, .site-header__menu-toggle {
transition background-color 200ms ease
}
.is-active .site-header__menu-toggle, .site-header__menu-toggle:hover, .site-header__search-toggle:hover, .is-active.site-header__search-toggle {
background-color #85a26c
}

//.is-active.site-header__search-toggle:before, .site-header.is-active .site-header__menu-toggle:before {
// content $icon-string-close_L
//}

26 changes: 19 additions & 7 deletions app/views/shared/layout/partials/navigation/navigation.nunjucks
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,18 @@

{% if not _meta.hideSearchAction %}
<li class="service-menu__search">
<a href="" class="gb-icon-search" ng-click="nav.toggleSearch()"><span>Search</span></a>
<a href="" ng-click="nav.toggleSearch()">
<span class="service-menu__icon gb-icon-search"></span>
<span class="service-menu__text">Search</span>
</a>
</li>
{% endif %}

<li class="service-menu__feedback">
<a href="" class="gb-icon-comment" ng-click="nav.toggleFilter()"><span>Feedback</span></a>
<a href="" ng-click="nav.toggleFilter()">
<span class="service-menu__icon gb-icon-comment"></span>
<span class="service-menu__text">Feedback</span>
</a>
<span class="badge badge--error menu-notification">1</span>
</li>

Expand Down Expand Up @@ -76,13 +82,18 @@


<div class="main-menu">
<a href="/" class="gb-icon-home"><span>{$ __('menu.home') $}</span></a>
<a href="/" class="main-menu__home">
<span class="main-menu__icon gb-icon-home"></span>
<span class="main-menu__icon gb-icon-logo"></span>
<span class="main-menu__home__text">{$ __('menu.home') $}</span>
</a>
<ul>
{% for menuGroup in gb.menu %}
{% if menuGroup.type == 'normal' %}
<li class="main-menu__item is-category">
<a href="" class="{$ menuGroup.icon $}">
{$ __('menu.' + menuGroup.name) $}
<a href="">
<span class="main-menu__icon {$ menuGroup.icon $}"></span>
<span class="main-menu__text">{$ __('menu.' + menuGroup.name) $}</span>
</a>
<ul>
{% for item in menuGroup.items %}
Expand All @@ -96,8 +107,9 @@
{% endif %}
{% if menuGroup.type == 'mega' %}
<li class="is-category is-mega">
<a href="" class="{$ menuGroup.icon $}">
{$ __('menu.' + menuGroup.name) $}
<a href="">
<span class="main-menu__icon {$ menuGroup.icon $}"></span>
<span class="main-menu__text">{$ __('menu.' + menuGroup.name) $}</span>
</a>
<ul>
{% for category in menuGroup.items %}
Expand Down
90 changes: 62 additions & 28 deletions app/views/shared/layout/partials/navigation/navigation.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,10 @@ siteHeaderBar() {
> ul, > a {
float left
}
> ul > li > a:before {
content ''
content unset
> ul > li > a {
.main-menu__icon {
display none
}
}
> ul > li > a, > a {
white-space nowrap
Expand All @@ -159,19 +160,28 @@ siteHeaderBar() {
height ($navBar_height - $navBar_borderWidth)
padding 0 vrBlock(0.75)
}
> a {
.main-menu__home {
width vrBlock(3)
position relative
span {
.main-menu__home__text {
position absolute
left -9999px
}
&:before {
content $icon-string-logo
.main-menu__icon {
font-size vrBlock(2)
position absolute
bottom vrBlock(0.5)
line-height ($navBar_height - $navBar_borderWidth)
text-align center
&.gb-icon-home {
display none
}
}
//&:before {
// content $icon-string-logo
// font-size vrBlock(2)
// position absolute
// bottom vrBlock(0.5)
//}
}
}
}
Expand All @@ -183,7 +193,15 @@ siteHeaderBar() {
//set base colors
background $navDrawer_background
color $navDrawer_color

.main-menu__icon.gb-icon-logo {
display none
}
.main-menu__icon {
font-size vrBlock(1)
position absolute
left 10px
top vrBlock(0.5)
}
//all list items should have the same padding
li > a, .main-menu > a {
display block
Expand All @@ -199,12 +217,12 @@ siteHeaderBar() {
//items with icons need additional styling
a {
position relative
&:before {
font-size vrBlock(1)
position absolute
left 10px
top vrBlock(0.5)
}
//&:before {
// font-size vrBlock(1)
// position absolute
// left 10px
// top vrBlock(0.5)
//}

//add an overlay instead of dark color since background changes
&:hover, &.is-active {
Expand Down Expand Up @@ -306,7 +324,7 @@ siteHeaderBar() {

actionIcon() {
display inline-block
padding vrBlock(1.5) vrBlock(1) vrBlock(0.25) vrBlock(1)
//padding vrBlock(1.5) vrBlock(1) vrBlock(0.25) vrBlock(1)
relative()
height vrBlock(2.75)
font-size (100 /$majorThird) %
Expand Down Expand Up @@ -424,23 +442,39 @@ $service-menu_teaser_pos_r = vrBlock(0.5);
margin-right 1rem
}
> a {
> span {
height ($navBar_height - $navBar_borderWidth)
.service-menu__icon {
position absolute
font-size 28px
width 4rem
display block
text-align center
overflow hidden
height ($navBar_height - $navBar_borderWidth)
line-height ($navBar_height - $navBar_borderWidth)
}
.service-menu__text {
position absolute
bottom vrBlock(0.25)
text-align center
left 0
width 4rem
display none
}
display inline-block
width 3rem
padding vrBlock(1.5) vrBlock(1) vrBlock(0.25) vrBlock(1)
width 4rem
//padding vrBlock(1.5) vrBlock(1) vrBlock(0.25) vrBlock(1)
relative()
font-size (100 /$majorThird) %
&:before {
display block
width 100%
height vrBlock(2.75)
text-align center
absolute(top left)
setType(2)
line-height vrBlock(2.75)
}
//&:before {
// display block
// width 100%
// height vrBlock(2.75)
// text-align center
// absolute(top left)
// setType(2)
// line-height vrBlock(2.75)
//}
}
}
}
Expand Down

0 comments on commit 928be1a

Please sign in to comment.