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