Merge branch 'develop' into 'master'

Merge latest changes

See merge request ArisuOngaku/wms-boilerplate!1
This commit is contained in:
Alice Gaudon 2020-07-06 10:05:56 +00:00
commit d2fdaed83b
8 changed files with 97 additions and 21 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

@ -14,13 +14,13 @@ export default Object.assign(require("wms-core/config/default").default, {
host: "localhost",
user: "root",
password: "",
database: "wms2",
database: "example_app",
create_database_automatically: false
},
redis: {
host: "127.0.0.1",
port: 6379,
prefix: 'wms'
prefix: 'example_app'
},
session: {
secret: "very_secret_not_known",

View File

@ -18,6 +18,7 @@
"@babel/preset-env": "^7.9.5",
"@types/config": "^0.0.36",
"@types/express": "^4.17.6",
"@types/formidable": "^1.0.31",
"@types/jest": "^25.2.1",
"@types/node": "^13.13.2",
"babel-loader": "^8.1.0",

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">
<li><a href="{{ route('about') }}"><i data-feather="info"></i> About</a></li>
</ul>
</nav>