Commit 05e72f4e authored by jhuwyler's avatar jhuwyler Committed by scmoritz
Browse files

Improvements on the menubar

parent b046bb63
...@@ -49,14 +49,6 @@ html,body { ...@@ -49,14 +49,6 @@ html,body {
section { section {
width: 100%; width: 100%;
&.blue {
background-color: @color-dark-blue;
}
&.grey {
background-color: @color-grey;
}
> * { > * {
max-width: @dimension-max-content-width; max-width: @dimension-max-content-width;
padding: 0 1em; padding: 0 1em;
......
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
@import './mediaquery.less'; @import './mediaquery.less';
.mainmenu-template { .mainmenu-template {
transition: background-color ease-in-out 300ms;
li { li {
&.active { &.active {
background-color: @color-grey; background-color: @color-grey;
...@@ -14,7 +16,7 @@ ...@@ -14,7 +16,7 @@
> a { > a {
display: block; display: block;
height: 100%; height: calc(@dimension-desktop-header-height - 1px);
line-height: @dimension-desktop-header-height; line-height: @dimension-desktop-header-height;
padding: 0 1.3em; padding: 0 1.3em;
color: #fff; color: #fff;
...@@ -28,34 +30,32 @@ ...@@ -28,34 +30,32 @@
} }
header { header {
background-color: @color-dark-blue;
margin-bottom: 5px;
grid-area: header; grid-area: header;
display: block; display: block;
width: 100%; width: 100%;
font-size: 1.2em; font-size: 1.2em;
z-index: 1000; z-index: 1000;
section.grey {
height: @dimension-desktop-submenu-height;
@media @mobile {
display: none;
}
}
} }
header nav { header nav {
padding: 0 1em;
margin: 0 auto;
display: grid; display: grid;
grid-area: navigation; grid-area: navigation;
height: @dimension-desktop-header-height; min-height: @dimension-desktop-header-height;
@media @wide, @desktop { @media @wide, @desktop {
grid-template-columns: auto 1fr auto auto auto; grid-template-columns: auto 1fr auto auto auto;
grid-template-areas: 'logo main-navigation profile language-switcher'; grid-template-areas: 'logo main-navigation profile language-switcher';
max-width: @dimension-max-content-width;
} }
@media @tablet { @media @tablet {
grid-template-columns: auto 1fr auto auto; grid-template-columns: auto 1fr auto auto;
grid-template-areas: 'logo main-navigation language-switcher'; grid-template-areas: 'logo main-navigation profile language-switcher';
font-size: .7em;
} }
@media @mobile { @media @mobile {
...@@ -66,6 +66,7 @@ header nav { ...@@ -66,6 +66,7 @@ header nav {
'profile profile profile'; 'profile profile profile';
height: auto; height: auto;
max-height: @dimension-mobile-header-height; max-height: @dimension-mobile-header-height;
transition: max-height ease-in-out 500ms;
overflow: hidden; overflow: hidden;
&.expanded { &.expanded {
...@@ -81,13 +82,16 @@ header .logo { ...@@ -81,13 +82,16 @@ header .logo {
@media @mobile { @media @mobile {
height: @dimension-mobile-header-height; height: @dimension-mobile-header-height;
} }
img {
height: 100%;
}
} }
header ul { header ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%;
@media @mobile { @media @mobile {
width: 100%; width: 100%;
...@@ -95,7 +99,6 @@ header ul { ...@@ -95,7 +99,6 @@ header ul {
li { li {
display: inline-block; display: inline-block;
height: 100%;
@media @mobile { @media @mobile {
width: 100%; width: 100%;
...@@ -106,30 +109,53 @@ header ul { ...@@ -106,30 +109,53 @@ header ul {
} }
} }
.phantomElement {
height: 1px;
}
header ul.mainmenu { header ul.mainmenu {
.mainmenu-template; .mainmenu-template;
grid-area: main-navigation; grid-area: main-navigation;
li.active { @media @mobile {
transition: none;
}
> li.active {
height: auto;
background-color: @color-grey; background-color: @color-grey;
transition: none;
ul.submenu { .phantomElement {
height: @dimension-desktop-submenu-height;
display: block;
width: 100%;
@media @mobile {
display: none;
}
}
> ul.submenu {
display: block; display: block;
visibility: visible; visibility: visible;
height: @dimension-desktop-submenu-height;
transition: none !important;
transition-duration: 0ms !important;
transition-delay: 0ms !important;
z-index: 1005; z-index: 1005;
} }
} }
@media @wide, @desktop, @tablet { @media @wide, @desktop, @tablet {
li:hover ul.submenu { > li:hover ul.submenu {
visibility: visible; visibility: visible;
height: @dimension-desktop-submenu-height;
} }
} }
li > a { li > a {
display: block; display: block;
height: 100%;
line-height: @dimension-desktop-header-height;
padding: 0 1.3em; padding: 0 1.3em;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
...@@ -143,23 +169,21 @@ header ul.mainmenu { ...@@ -143,23 +169,21 @@ header ul.mainmenu {
header ul.submenu { header ul.submenu {
display: block; display: block;
visibility: hidden; visibility: hidden;
height: 0;
@media @wide, @desktop, @tablet { @media @wide, @desktop, @tablet {
position: absolute; position: absolute;
top: @dimension-desktop-header-height; top: @dimension-desktop-header-height;
left: 0; left: 0;
width: 100%; width: 100%;
height: @dimension-desktop-submenu-height;
text-align: center; text-align: center;
background-color: @color-grey; background-color: @color-grey;
z-index: 1010; z-index: 1010;
overflow-y: hidden;
transition-delay: 150ms; transition-delay: 150ms;
transition-property: visibility; transition-property: height;
} transition-duration: 150ms;
transform-style: flat;
@media @tablet {
// NOTE: Adjust this value when profile menu changes!
width: calc(100% - 190px);
} }
@media @mobile { @media @mobile {
...@@ -168,8 +192,12 @@ header ul.submenu { ...@@ -168,8 +192,12 @@ header ul.submenu {
} }
li { li {
@media @mobile {
background-color: @color-mobile-submenu;
}
&.active { &.active {
background-color: @color-grey; background-color: transparent;
@media @mobile { @media @mobile {
background-color: @color-mobile-submenu; background-color: @color-mobile-submenu;
...@@ -186,7 +214,7 @@ header ul.submenu { ...@@ -186,7 +214,7 @@ header ul.submenu {
> a { > a {
display: block; display: block;
height: 100%; height: @dimension-desktop-submenu-height;
line-height: @dimension-desktop-submenu-height; line-height: @dimension-desktop-submenu-height;
padding: 0 .5em; padding: 0 .5em;
color: #000; color: #000;
...@@ -199,51 +227,40 @@ header ul.profile { ...@@ -199,51 +227,40 @@ header ul.profile {
.mainmenu-template; .mainmenu-template;
grid-area: profile; grid-area: profile;
@media @tablet { > span {
position: absolute; display: none;
top: @dimension-desktop-header-height;
right: 0;
padding: 0 .5em;
height: @dimension-desktop-submenu-height;
z-index: 1015;
background-color: #eee;
// border left
&:before {
content: '';
position: absolute;
left: 0;
bottom: 25%;
height: 50%;
width: 1px;
border-left: 1px solid @color-dark-blue;
}
li {
> a {
display: block;
height: 100%;
line-height: @dimension-desktop-submenu-height;
padding: 0 .5em;
color: #000;
}
&.active > a {
color: @color-red;
}
}
} }
@media @mobile { @media @mobile {
li:last-of-type { li:last-of-type {
border-bottom: none; border-bottom: none;
} }
.profilePicture {
display: none;
}
a {
padding: 0 !important;
display: inline;
}
span {
display: inline-block;
}
} }
} }
header .language-switcher { header .language-switcher {
grid-area: language-switcher; grid-area: language-switcher;
align-self: center; height: @dimension-desktop-header-height;
> button {
display: block;
height: 100%;
line-height: @dimension-desktop-header-height;
padding: 0 1.3em;
}
} }
header .mobile-menu { header .mobile-menu {
......
...@@ -21,44 +21,41 @@ export default class Header { ...@@ -21,44 +21,41 @@ export default class Header {
} }
view() { view() {
return m('header', [ return m(
'header',
m( m(
'section.blue', 'nav',
m( {
'nav', class: this._mobileMenuShowing ? 'expanded' : '',
{ },
class: this._mobileMenuShowing ? 'expanded' : '', [
}, m(
[ 'a.logo',
m( { href: `/${currentLanguage()}/`, onupdate: m.route.link },
'a', m('img', { src: AmivLogo })
{ href: `/${currentLanguage()}/`, onupdate: m.route.link }, ),
m('img.logo', { src: AmivLogo }) this.constructor._mainMenu,
), this.constructor._profileMenu,
this.constructor._mainMenu, m(
this.constructor._profileMenu, 'div.language-switcher',
m( m(Button, {
'div.language-switcher', className: 'red-button',
m(Button, { label: i18n('language_button'),
className: 'red-button', events: { onclick: () => switchLanguage() },
label: i18n('language_button'), })
events: { onclick: () => switchLanguage() }, ),
}) m(
), 'div.mobile-menu',
m( {
'div.mobile-menu', onclick: () => {
{ this._mobileMenuShowing = !this._mobileMenuShowing;
onclick: () => {
this._mobileMenuShowing = !this._mobileMenuShowing;
},
}, },
m('img', { src: MobileMenuIcon, alt: i18n('Menu') }) },
), m('img', { src: MobileMenuIcon, alt: i18n('Menu') })
] ),
) ]
), )
m('section.grey'), );
]);
} }
static get _mainMenu() { static get _mainMenu() {
...@@ -88,30 +85,33 @@ export default class Header { ...@@ -88,30 +85,33 @@ export default class Header {
i18n(item.label) i18n(item.label)
), ),
item.submenu item.submenu
? m('ul.submenu', [ ? [
item.submenu.map((subitem, subindex) => m('div.phantomElement'),
m( m('ul.submenu', [
'li', item.submenu.map((subitem, subindex) =>
{ class: item.submenu.selectedIndex === subindex ? 'active' : '' },
m( m(
'a', 'li',
{ { class: item.submenu.selectedIndex === subindex ? 'active' : '' },
href: subitem.getLink(), m(
onupdate: subitem.onupdate, 'a',
}, {
[ href: subitem.getLink(),
i18n(subitem.label), onupdate: subitem.onupdate,
subitem.url },
? m('img', { [
src: ExternalLinkIcon, i18n(subitem.label),
style: 'width:12px;height:12px;padding:0 0 0 5px;', subitem.url
}) ? m('img', {
: m(''), src: ExternalLinkIcon,
] style: 'width:12px;height:12px;padding:0 0 0 5px;',
})
: m(''),
]
)
) )
) ),
), ]),
]) ]
: m(''), : m(''),
] ]
) )
...@@ -147,6 +147,7 @@ export default class Header { ...@@ -147,6 +147,7 @@ export default class Header {
: [ : [
m( m(
'li', 'li',
{ class: 'not-logged-in' },
m( m(
'a', 'a',
{ {
...@@ -156,7 +157,7 @@ export default class Header { ...@@ -156,7 +157,7 @@ export default class Header {
e.preventDefault(); e.preventDefault();
}, },
}, },
i18n('Login') m('span', i18n('Login'))
) )
), ),
] ]
......
Supports Markdown
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