Commit 6685faf4 authored by alexandre's avatar alexandre

Implementing help views

parent 82059947
......@@ -221,6 +221,7 @@ section.hidden { display: none; }
box-sizing: border-box;
width: 100vw;
height: 100vh;
overflow: hidden;
}
......@@ -234,23 +235,33 @@ section.hidden { display: none; }
position: relative;
left: 0;
box-sizing: border-box;
width: 300px;
padding: 30px;
transition: all .2s;
color: white;
background-color: darkgray;
}
.main-header--collapsed { left: -300px; }
.main-header .content {
width: 300px;
padding: 30px;
}
.main-header.is-collapsed .content { display: none; }
.btn-hamburger {
position: absolute;
top: 10px;
right: 10px;
color: grey;
font-family: Sans-Serif;
font-size: 16px;
font-weight: bold;
top: 10px;
}
.btn-hamburger--right {
right: 10px;
}
.btn-hamburger--left {
left: 10px;
}
.btn-hamburger:hover {
......@@ -258,11 +269,14 @@ section.hidden { display: none; }
color: black;
}
.main-header--collapsed .btn-hamburger {
position: absolute;
.main-header.is-collapsed .btn-hamburger {
right: -26px;
}
#help.is-collapsed .btn-hamburger {
left: -26px;
}
.logo { margin: 21px 0 42px 0; }
.logo h1 {
......@@ -281,7 +295,7 @@ section.hidden { display: none; }
/* Main area (content)
========================================================================== */
.main-header--collapsed + .main-area { margin-left: -300px; }
/* .main-header.is-collapsed + .main-area { margin-left: -300px; } */
.main-area {
overflow: auto;
......@@ -900,3 +914,45 @@ li li li li li li li li li li li li form { color: var(--color-12); }
li li li li li li li li li li li li li form { color: var(--color-13); }
li li li li li li li li li li li li li li form { color: var(--color-14); }
#help {
position: relative;
right: 0;
box-sizing: border-box;
transition: all .2s;
color: white;
background-color: darkgray;
}
.help__content {
overflow: auto;
width: 500px;
padding: 30px;
height: 100%;
}
#help.is-collapsed .help__content { display: none; }
......@@ -1078,7 +1078,7 @@ window.W = window.W || {};
slider: {
el: '#expand-level-slider',
replaceElement: true
}
},
},
ui: {
......@@ -1237,7 +1237,6 @@ window.W = window.W || {};
},
onRender: function () {
document.title = this.model.get('title');
var mainlineView = new W.TreeNode({ model: this.model.get('mainline') });
......@@ -1627,7 +1626,43 @@ window.W = window.W || {};
});
W.HeaderView = Backbone.Marionette.View.extend({
W.ToggableView = Backbone.Marionette.View.extend({
onShow: function () {
this.$el.removeClass('is-collapsed');
},
onHide: function () {
console.log("hiding");
this.$el.addClass('is-collapsed');
},
onToggle: function () {
this.$el.toggleClass('is-collapsed');
},
});
W.helpView = W.ToggableView.extend({
template: '#help-template',
attributes: {
id: 'help',
class: 'is-collapsed'
},
ui: {
'toggle': '.btn-hamburger',
},
triggers: {
'click @ui.show': 'show',
'click @ui.hide': 'hide',
'click @ui.toggle': 'toggle',
},
});
W.HeaderView = W.ToggableView.extend({
tagName: 'header',
template: '#header-template',
......@@ -1659,19 +1694,6 @@ window.W = window.W || {};
create: '#create'
},
onShow: function () {
this.$el.removeClass('main-header--collapsed');
},
onHide: function () {
console.log("hiding");
this.$el.addClass('main-header--collapsed');
},
onToggle: function () {
this.$el.toggleClass('main-header--collapsed');
},
onRender: function () {
var myCreateView = new W.CreateView();
......@@ -1700,6 +1722,10 @@ window.W = window.W || {};
el: '.main-area',
// replaceElement: true
},
help: {
el: '#help',
replaceElement: true
},
modal: {
el: '.modal',
// replaceElement: true
......@@ -1715,6 +1741,7 @@ window.W = window.W || {};
onRender: function () {
this.showChildView('header', new W.HeaderView({model: this.model}));
this.showChildView('help', new W.helpView());
},
showLogin: function(event) {
......
......@@ -47,6 +47,10 @@
{% include "playground/underscore/header.mtpl" %}
</script>
<script id="help-template" type="text/template">
{% include "playground/underscore/help.mtpl" %}
</script>
<script id="home-template" type="text/template">
{% include "playground/underscore/home.mtpl" %}
</script>
......
<header class="main-header"></header>
<main class="main-area"></main>
<div id="help"></div>
<div class="modal"></div>
......@@ -6,9 +6,10 @@
<!-- • Aide -->
<!-- • crédits -->
<div class="btn-hamburger js-collapse">☰</div>
<div class="btn-hamburger btn-hamburger--right js-collapse">☰</div>
<nav>
<div class="content">
<nav>
<% if (username) { %>
Bienvenue <a href="/users/<%- pk %>"><%- username %></a>
<% } else { %>
......@@ -23,19 +24,20 @@
<li><a href="#" class="btn-register">S'inscrire</a></li>
<% } %>
</ul>
</nav>
</nav>
<div class="logo">
<div class="logo">
<h1><a href="/">Organon</a></h1>
<h2>Un logiciel pour noter l’action performée, développé par W</h2>
</div>
</div>
<div id="create"></div>
<div id="create"></div>
<nav>
<nav>
<ul>
<li><a href="/apropos/">À propos</a></li> <!-- + crédits -->
<li><a href="/partitions/">Partitions</a></li>
<li><a href="#">Aide</a></li>
</ul>
</nav>
</nav>
</div>
<header id="sidebar" data-expanded="<%- metaExpanded %>">
<div>
<header id="sidebar" data-expanded="<%- metaExpanded %>">
<div class="score-actions">
<button class="save" data-label-progress="Saving..." data-label="Enregistrer" <% if (!hasChanges) { %>disabled<% } %>>Enregistrer</button>
<button class="duplicate">Dupliquer</button>
......@@ -98,11 +99,12 @@
<form></form>
</header>
</header>
<div id="main-area">
<div id="main-area">
<div id="expand-level-slider"></div>
<div id="axis-wrapper">
<ol></ol>
</div>
</div>
</div>
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