Merge branch 'boilerplate' into develop

This commit is contained in:
Alice Gaudon 2020-07-06 12:07:38 +02:00
commit e465c3c2fb
6 changed files with 94 additions and 19 deletions

View File

@ -2,6 +2,7 @@ import './external_links';
import './message_icons';
import './forms';
import './copyable_text';
import './main_menu';
import '../sass/app.scss';

17
assets/js/main_menu.js Normal file
View File

@ -0,0 +1,17 @@
document.addEventListener('DOMContentLoaded', () => {
const menuButton = document.getElementById('menu-button');
const mainMenu = document.getElementById('main-menu');
menuButton.addEventListener('click', (e) => {
e.stopPropagation();
mainMenu.classList.toggle('open');
});
mainMenu.addEventListener('click', (e) => {
e.stopPropagation();
});
document.addEventListener('click', () => {
mainMenu.classList.remove('open');
});
});

View File

@ -25,3 +25,6 @@ $warningColor: desaturate($warningText, 50%);
$error: #ff0000;
$errorText: darken($error, 30%);
$errorColor: desaturate($errorText, 50%);
// Responsivity
$menuLayoutSwitchTreshold: 700px;

View File

@ -51,7 +51,8 @@ header {
}
}
nav ul {
nav {
ul {
display: flex;
flex-direction: row;
margin: 0;
@ -75,11 +76,61 @@ header {
}
}
a:hover {
a:hover, a:active {
background-color: rgba(255, 255, 255, 0.07);
}
}
}
#menu-button {
display: none;
}
}
@media (max-width: $menuLayoutSwitchTreshold) {
flex-direction: row-reverse;
.logo {
padding: 0 16px 0 8px;
font-size: 24px;
img {
margin-right: 8px;
}
}
nav {
#menu-button {
display: block;
margin: 0;
padding: 0 16px;
line-height: $headerHeight;
cursor: pointer;
background: transparent;
border-radius: 0;
.feather {
--icon-size: 28px;
margin: 0 8px;
}
}
ul {
flex-direction: column;
position: absolute;
left: 0;
transform: translateX(-100%);
transition: transform ease-out 150ms;
background-color: $headerBackground;
&.open {
transform: translateX(0%);
}
}
}
}
}
footer {

View File

@ -8,6 +8,8 @@
<link rel="shortcut icon" type="image/png" href="/img/logox128.png">
<link rel="shortcut icon" type="image/svg" href="/img/logo.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if description %}
<meta name="description" content="{{ description }}">
{% endif %}

View File

@ -14,7 +14,8 @@
{% block header %}
<a href="/" class="logo"><img src="/img/logo.svg" alt="Logo"> {{ app.name }}</a>
<nav>
<ul>
<button id="menu-button"><i data-feather="menu"></i></button>
<ul id="main-menu">
{% if user %}
<li><a href="{{ route('file-upload') }}"><i data-feather="upload"></i> File uploader</a></li>
<li><a href="{{ route('file-manager') }}"><i data-feather="folder"></i> File manager</a></li>