Commit 626626d4 authored by alexandre's avatar alexandre
Browse files

Retractable menu

parent 7dbbcc8f
...@@ -10,11 +10,74 @@ body { ...@@ -10,11 +10,74 @@ body {
line-height: 24px; line-height: 24px;
} }
#score {
.outer-wrapper {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
}
.main-header {
color: white;
background-color: darkgray;
width: 300px;
/* border-right: 3px solid black; */
padding: 30px;
position: relative;
box-sizing: border-box;
transition: all .2s;
left: 0;
}
.main-header--collapsed {
left: -300px;
}
.main-header--collapsed + .main-area {
margin-left: -300px;
}
.main-area {
flex: 1;
padding: 30px 30px;
overflow: auto;
transition: all .2s;
margin-left: 0;
}
.btn-hamburger {
font-family: Sans-Serif;
font-size: 16px;
font-weight: bold;
position: absolute;
right: 10px;
top: 10px;
color: grey;
}
.btn-hamburger:hover {
color: black;
cursor:pointer;
}
.main-header--collapsed .btn-hamburger {
position: absolute;
right: -26px;
}
/* Score */
#score {
box-sizing: border-box;
display: flex;
flex-direction: row; flex-direction: row;
} }
...@@ -44,7 +107,7 @@ body { ...@@ -44,7 +107,7 @@ body {
} }
h1 { #score h1 {
font-size: 2em; font-size: 2em;
line-height: 1em; line-height: 1em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
......
...@@ -1479,7 +1479,24 @@ window.W = window.W || {}; ...@@ -1479,7 +1479,24 @@ window.W = window.W || {};
W.HeaderView = Backbone.Marionette.View.extend({ W.HeaderView = Backbone.Marionette.View.extend({
tagName: 'header',
template: '#header-template', template: '#header-template',
attributes: {
class: 'main-header'
},
ui: {
'toggle': '.btn-hamburger',
},
triggers: {
'click @ui.toggle': 'toggle',
},
onToggle: function() {
this.$el.toggleClass('main-header--collapsed');
}
}); });
...@@ -1490,9 +1507,19 @@ window.W = window.W || {}; ...@@ -1490,9 +1507,19 @@ window.W = window.W || {};
W.BaseView = Backbone.Marionette.View.extend({ W.BaseView = Backbone.Marionette.View.extend({
template: '#base-template', template: '#base-template',
attributes: {
class: 'outer-wrapper',
},
regions: { regions: {
header: 'header', header: {
main: 'main' el: '.main-header',
replaceElement: true
},
main: {
el: '.main-area',
// replaceElement: true
}
}, },
onRender: function () { onRender: function () {
......
<header></header> <header class="main-header"></header>
<main class="main-area"></main>
<main></main>
...@@ -6,24 +6,29 @@ ...@@ -6,24 +6,29 @@
<!-- • Aide --> <!-- • Aide -->
<!-- • crédits --> <!-- • crédits -->
<div class="btn-hamburger js-collapse">☰</div>
<nav>
Bienvenue {{ user.username }}
<ul>
{% if user.is_authenticated %}
<li><a href="{% url 'auth_logout' %}">Se déconnecter</a></li>
{% else %}
<li><a href="{% url 'auth_login' %}">Se connecter</a></li>
<li><a href="{% url 'registration_register' %}">S'inscrire</a></li>
{% endif %}
</ul>
</nav>
<div class="logo"> <div class="logo">
<h1>Organon</h1> <h1><a href="/">Organon</a></h1>
<h2>Un logiciel pour noter l’action performée, développé par W</h2> <h2>Un logiciel pour noter l’action performée, développé par W</h2>
</div> </div>
<nav> <nav>
<ul> <ul>
<li><a href="/">Accueil</a></li>
<li><a href="/apropos/">À propos</a></li> <!-- + crédits --> <li><a href="/apropos/">À propos</a></li> <!-- + crédits -->
<li><a href="/partitions/">Partitions</a></li> <li><a href="/partitions/">Partitions</a></li>
<li><a href="#">Aide</a></li> <li><a href="#">Aide</a></li>
{% if user.is_authenticated %}
<li>Bienvenue {{ user.username }} <a href="{% url 'auth_login' %}">Se déconnecter</a></li>
<li><a href="#">Mes partitions</a></li>
{% else %}
<li><a href="{% url 'auth_login' %}">Se connecter</a></li>
<li><a href="{% url 'registration_register' %}">S'inscrire</a></li>
{% endif %}
</ul> </ul>
</nav> </nav>
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