To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit 46f13d9c authored by Sandro Lutz's avatar Sandro Lutz Committed by Sandro Lutz
Browse files

Make main menu responsive (Resolves #41)

parent 4ed65819
......@@ -6,6 +6,7 @@
"loading_error": "Ein Fehler ist während dem Laden der Daten aufgetreten.",
"load_more": "Mehr laden",
"load_more_error": "Es ist ein Fehler aufgetreten beim Laden der Daten. Nochmal versuchen?",
"Menu": "Menu",
"AMIV": "AMIV",
"About AMIV": "Über den AMIV",
"Board": "Vorstand",
......
......@@ -6,6 +6,7 @@
"loading_error": "Error while loading data.",
"load_more": "Load more",
"load_more_error": "There was an error while loading the data. Try again?",
"Menu": "Menu",
"AMIV": "AMIV",
"About AMIV": "About AMIV",
"Board": "Board",
......
import m from 'mithril';
import { mainNavigation } from '../models/navigation';
import AmivLogo from './images/logo.svg';
import MobileMenuButton from './images/mobileMenuButton.svg';
import { i18n, currentLanguage, switchLanguage } from '../models/language';
import { Button } from '../components';
import { isLoggedIn } from '../models/auth';
export default class Header {
static onbeforeupdate() {
oninit() {
this._mobileMenuShowing = false;
}
// eslint-disable-next-line class-methods-use-this
onbeforeupdate() {
mainNavigation.onupdate();
}
static view() {
view() {
return m('header', [
m(
'section.blue',
m('div', [
m(
'a',
{ href: `/${currentLanguage()}/`, onupdate: m.route.link },
m('img.logo', { src: AmivLogo })
),
m('nav', [
m(
'ul.mainmenu',
mainNavigation.map((item, index) =>
m(
'li',
{
class: mainNavigation.selectedIndex === index ? 'active' : '',
},
[
m(
'a',
{
href: item.getLink(),
onupdate: item.onupdate,
},
i18n(item.label)
),
item.submenu
? m('ul.submenu', [
item.submenu.map((subitem, subindex) =>
m(
'li',
{ class: item.submenu.selectedIndex === subindex ? 'active' : '' },
m(
'a',
{
href: subitem.getLink(),
onupdate: subitem.onupdate,
},
i18n(subitem.label)
)
)
),
])
: m(''),
]
)
)
),
m(
'nav',
{
class: this._mobileMenuShowing ? 'expanded' : '',
},
[
m(
'ul.profile',
isLoggedIn()
? [
m(
'li',
{
class: m.route.get() === `/${currentLanguage()}/profile` ? 'active' : '',
},
m(
'a',
{ href: `/${currentLanguage()}/profile`, onupdate: m.route.link },
i18n('Profile')
)
),
m(
'li',
m(
'a',
{ href: `/${currentLanguage()}/logout`, onupdate: m.route.link },
i18n('Logout')
)
),
]
: [
m(
'li',
m(
'a',
{ href: `/${currentLanguage()}/profile`, onupdate: m.route.link },
i18n('Login')
)
),
]
'a',
{ href: `/${currentLanguage()}/`, onupdate: m.route.link },
m('img.logo', { src: AmivLogo })
),
this.constructor._mainMenu,
this.constructor._profileMenu,
m(
'div.language-switcher',
m(Button, {
......@@ -102,10 +40,99 @@ export default class Header {
events: { onclick: () => switchLanguage() },
})
),
]),
])
m(
'div.mobile-menu',
{
onclick: () => {
this._mobileMenuShowing = !this._mobileMenuShowing;
},
},
m('img', { src: MobileMenuButton, alt: i18n('Menu') })
),
]
)
),
m('section.grey'),
]);
}
static get _mainMenu() {
return m(
'ul.mainmenu',
mainNavigation.map((item, index) =>
m(
'li',
{
class: mainNavigation.selectedIndex === index ? 'active' : '',
},
[
m(
'a',
{
href: item.getLink(),
onupdate: item.onupdate,
},
i18n(item.label)
),
item.submenu
? m('ul.submenu', [
item.submenu.map((subitem, subindex) =>
m(
'li',
{ class: item.submenu.selectedIndex === subindex ? 'active' : '' },
m(
'a',
{
href: subitem.getLink(),
onupdate: subitem.onupdate,
},
i18n(subitem.label)
)
)
),
])
: m(''),
]
)
)
);
}
static get _profileMenu() {
return m(
'ul.profile',
isLoggedIn()
? [
m(
'li',
{
class: m.route.get().includes(`/profile`) ? 'active' : '',
},
m(
'a',
{ href: `/${currentLanguage()}/profile`, onupdate: m.route.link },
i18n('Profile')
)
),
m(
'li',
m(
'a',
{ href: `/${currentLanguage()}/logout`, onupdate: m.route.link },
i18n('Logout')
)
),
]
: [
m(
'li',
m(
'a',
{ href: `/${currentLanguage()}/profile`, onupdate: m.route.link },
i18n('Login')
)
),
]
);
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve"> <image id="image0" width="256" height="256" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAQAAAD2e2DtAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZ
cwAAAFoAAABaAHAjuH0AAAAHdElNRQfiBhgPCCUFNIOLAAAByElEQVR42u3doU1DYRSG4dNLKwgJ
ExAcDsccKEZAMAmaDRgB2xFA1SDRuGIbBAnoS9D/ueF7ngX60bypOvmpAgAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH5b9X78d9VUx91fwkCr+qyv5i99Zt09oC5qu4AVo6zr
trbdI+aDum3qrDbdIwZa2O/d1D2AXgIIJ4BwAggngHACCCeAcAIIJ4BwAggngHACCCeAcAIIJ4Bw
AggngHACCNd/EravhzrqHjHMVG/dEwAAAAAAAAAI0P9I1Eldda8YaKrX2i/pz+0P4LJ2UW8E3dTT
kgJwEhZOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDh+t8Ieq+77sO0
gabadU8AAAAAAAAAAOBf638k6jzqv4at676el3QA1X8SdlrXUa+EPXYPmHMUGk4A4QQQTgDhBBBO
AOEEEE4A4QQQTgDhBBBOAOEEEE4A4QQQTgDhBBBOAOH6T8IO9RJ1E/jRPWGu/yg00JKOQgEAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPjTD1TVF9/MoC8YAAAAJXRFWHRkYXRl
OmNyZWF0ZQAyMDE4LTA2LTI0VDE1OjA4OjM3KzA2OjAwo1/avAAAACV0RVh0ZGF0ZTptb2RpZnkA
MjAxOC0wNi0yNFQxNTowODozNyswNjowMNICYgAAAABXdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8v
L2hvbWUvc3ZnaW1hZ2UvcHVibGljX2h0bWwvZG93bmxvYWRzL21lbnUtYnV0dG9uLXJlc3BvbnNp
dmVfNzc3LnN2Zww7UV8AAAAASUVORK5CYII=" />
</svg>
@import './colors.less';
@import './dimensions.less';
@import './mediaquery.less';
@import './frontpage.less';
@import './studydocList.less';
@import './legalNotice.less';
......@@ -18,6 +19,10 @@ html,body {
font-size: 16px;
box-sizing: border-box;
@media @tablet, @mobile {
font-size: 18px;
}
> div {
width: 100%;
min-height: 100%;
......@@ -43,6 +48,7 @@ section {
> * {
max-width: @dimension-max-content-width;
padding: 0 1em;
margin: 0 auto;
}
}
......@@ -53,6 +59,7 @@ main {
> * {
max-width: @dimension-max-content-width;
padding: 0 1em;
margin: 0 auto;
}
}
......
@color-red: #e8462b;
@color-dark-blue: #1f2d54;
@color-grey: #eee;
@color-white: #fff;
@color-mobile-submenu: @color-white;
@dimension-max-content-width: 1280px;
@dimension-desktop-header-height: 88px;
@dimension-desktop-submenu-height: 45px;
@dimension-desktop-submenu-height: 2.5em;
@dimension-mobile-header-height: 88px;
@import './colors.less';
@import './dimensions.less';
@import './mediaquery.less';
.mainmenu-template {
li {
......@@ -31,72 +32,114 @@ header {
display: block;
width: 100%;
font-size: 1.2em;
z-index: 1000;
section.blue > div {
section.blue > nav {
display: grid;
grid-template-columns: auto 1fr;
grid-area: navigation;
height: @dimension-desktop-header-height;
grid-template-areas:
"logo navigation";
@media @wide, @desktop {
grid-template-columns: auto 1fr auto auto auto;
grid-template-areas:
'logo main-navigation profile language-switcher';
}
@media @tablet {
grid-template-columns: auto 1fr auto auto;
grid-template-areas:
'logo main-navigation language-switcher';
}
@media @mobile {
grid-template-columns: 1fr auto auto;
grid-template-areas:
'logo language-switcher mobile-menu'
'main-navigation main-navigation main-navigation'
'profile profile profile';
height: auto;
max-height: @dimension-mobile-header-height;
overflow: hidden;
&.expanded {
max-height: 1000px;
}
}
.logo {
grid-area: logo;
height: @dimension-desktop-header-height;
@media @mobile {
height: @dimension-mobile-header-height;
}
}
nav {
display: grid;
grid-area: navigation;
grid-template-columns: 1fr auto auto auto;
grid-template-areas:
"main-navigation profile language-switcher";
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
@media @mobile {
width: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
display: inline-block;
height: 100%;
li {
display: inline-block;
height: 100%;
@media @mobile {
width: 100%;
height: auto;
text-align: center;
border-bottom: 1px solid @color-grey;
}
}
}
ul.mainmenu {
.mainmenu-template;
grid-area: main-navigation;
ul.mainmenu {
.mainmenu-template;
grid-area: main-navigation;
li {
&.active {
ul.submenu {
display: block;
z-index: 5;
}
li {
&.active {
background-color: @color-grey;
ul.submenu {
display: block;
visibility: visible;
z-index: 1005;
}
}
@media @wide, @desktop, @tablet {
&:hover {
ul.submenu {
display: block;
visibility: visible;
}
}
}
> a {
display: block;
height: 100%;
line-height: @dimension-desktop-header-height;
padding: 0 1.3em;
color: #fff;
text-decoration: none;
> a {
display: block;
height: 100%;
line-height: @dimension-desktop-header-height;
padding: 0 1.3em;
color: #fff;
text-decoration: none;
&:hover {
color: @color-red;
}
&:hover {
color: @color-red;
}
}
}
}
ul.submenu {
display: none;
ul.submenu {
display: block;
visibility: hidden;
@media @wide, @desktop, @tablet {
position: absolute;
top: @dimension-desktop-header-height;
left: 0;
......@@ -104,47 +147,124 @@ header {
height: @dimension-desktop-submenu-height;
text-align: center;
background-color: @color-grey;
z-index: 10;
z-index: 1010;
transition-delay: 150ms;
transition-property: visibility;
}
li {
&.active {
background-color: @color-grey;
@media @tablet {
// NOTE: Adjust this value when profile menu changes!
width: calc(100% - 190px);
}
> a {
color: @color-red;
}
@media @mobile {
display: none;
background-color: @color-mobile-submenu;
}
li {
&.active {
background-color: @color-grey;
@media @mobile {
background-color: @color-mobile-submenu;
}
&:hover {
> a {
color: @color-red;
}
> a {
color: @color-red;
}
}
&:hover {
> a {
color: @color-red;
}
}
> a {
display: block;
height: 100%;
line-height: @dimension-desktop-submenu-height;
padding: 0 0.5em;
color: #000;
text-decoration: none;
}
}
}
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 0.5em;
padding: 0 .5em;
color: #000;
text-decoration: none;
}
&.active > a {
color: @color-red;
}
}
}
ul.profile {
.mainmenu-template;
grid-area: profile;
// @media @mobile {
// display: grid;
// grid-template-columns: .5fr .5fr;
// text-align: center;
// }
}
.language-switcher {
grid-area: language-switcher;
align-self: center;
}
.mobile-menu {
grid-area: mobile-menu;
display: none;
height: @dimension-desktop-header-height;
img {
margin: .5em;
height: calc(100% - 1em);
cursor: pointer;
}
.language-switcher {
grid-area: language-switcher;
align-self: center;
@media @mobile {
display: block;
}
}
}
section.grey {
height: @dimension-desktop-submenu-height;
@media @mobile {
display: none;
}
}
}
// This file contains all allowed media queries. Only use those for responsive styling!
@mobile: ~"screen and (max-width: 880px)";
@tablet: ~"screen and (min-width: 881px) and (max-width: 1050px)";
@desktop: ~"screen and (min-width: 1051px) and (max-width: 1280px)";
@wide: ~"screen and (min-width: 1281px)";
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