Commit 8359a8b7 authored by Jean-Yves Stervinou's avatar Jean-Yves Stervinou

- Menu on the side

- Bootstrap 4

by LD
parent d135addb
Pipeline #1550 passed with stage
in 1 minute and 16 seconds
......@@ -154,7 +154,7 @@ input[type=submit]:hover,
word-wrap: normal;
direction: ltr;
font-variant: normal;
vertical-align: middle;
vertical-align: baseline;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
......@@ -176,7 +176,9 @@ textarea {
/************** Tool Tip Styles ********************************/
.tooltip {
position: relative;
opacity:100;
cursor: help;
display: inline;
}
.tooltip:hover {
text-decoration: underline dotted;
......@@ -227,3 +229,33 @@ dl:nth-child(even) {
background: #f3f3f3;
}
/* Navbar stylesheet */
.vertical-nav {
min-width: 14rem;
width: 14rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.nav-link {
min-width : 14rem;
width: 14rem;
}
/* Page content stylesheet */
.page-content {
width: calc(100% - 15rem);
margin-left: 15rem;
transition: all 0.4s;
}
.page-title {
margin-bottom : 3rem;
font-variant: small-caps;
}
<catalog>
<section>
<h2>Catalogue</h2>
<h2 class="page-title">Catalogue</h2>
<form onsubmit={ this.submit }>
<input type="text" ref="intercarif" placeholder="Identifiant INTERCARIF" name="intercarif">
<input type="submit" value="Chercher">
......
<financements>
<h2>Liste des types de financements <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/financements.yml target=_blank><i class="icon">edit</i></a></h2>
<h2 class="page-title">Liste des types de financements <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/financements.yml target=_blank></a><i class="icon" style="vertical-align: baseline;">edit</i></h2>
<dl each={ this.financements }>
<dt>{ intitule }</dt>
<dd if={ racine.endsWith('.rules') }><strong>Règles racine</strong>: <a href="#/rules/{ racine }">{ racine } <i class="icon">arrow_forward</i></a></dd>
......
<glossary>
<h2 class="page-title">Glossaire</h2>
<dl each={ props, name in this.items }>
<dt>{name}</dt>
<dd>{ props.description || props }</dd>
......
<navbar>
<progress style="display: none" id="progress" />
<h1><a href="."></a></h1>
<nav>
<a href="#schema" class="{selected: window.location.hash.startsWith('#schema')}">Schéma</a>
<a href="#rules" class="{selected: window.location.hash.startsWith('#rules')}">Règles de gestion</a>
<a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')}">Simuler</a>
<a href="#financements" class="{selected: window.location.hash.startsWith('#financements')}">Financements</a>
<a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')}">Scénarios</a>
<a href="#tools" class="{selected: window.location.hash.startsWith('#tools')}">Outils</a>
<a href="#glossary" class="{selected: window.location.hash.startsWith('#glossary')}">Glossaire</a>
</nav>
<!-- Vertical navbar -->
<div class="vertical-nav bg-light" id="sidebar">
<ul class="nav flex-column bg-light mb-0">
<li class="nav-item bg-light" style="margin-bottom:4em">
<h1>
<a href="." class="nav-link text-dark"></a>
</h1>
</li>
<li class="nav-item">
<h4>
<a href="#schema" class="{selected: window.location.hash.startsWith('#schema')} nav-link text-dark bg-light">Schéma</a>
</h4>
</li>
<li class="nav-item">
<h4>
<a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-light">Règles de gestion</a>
</h4>
</li>
<li class="nav-item">
<h4>
<a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-light">Simuler</a>
</h4>
</li>
<li class="nav-item">
<h4>
<a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link text-dark bg-light">Financements</a>
</h4>
</li>
<li class="nav-item">
<h4>
<a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-light">Scénarios</a>
</h4>
</li>
<li class="nav-item">
<h4>
<a href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-light">Outils</a>
</h4>
</li>
<li class="nav-item">
<h4>
<a href="#glossary" class="{selected: window.location.hash.startsWith('#glossary')} nav-link text-dark bg-light">Glossaire</a>
</h4>
</li>
</ul>
</div>
<!-- End vertical navbar -->
<style scoped>
:scope {
display: grid;
grid-template-columns: 1fr 4fr;
......@@ -49,6 +88,13 @@
<script>
this.on('mount', () => init())
$(function() {
// Sidebar toggle behavior
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
});
});
</script>
</navbar>
<rules>
<h2 class="page-title">Règles de gestion</h2>
<aside>
<rules-menu title="Règles régionales" namespace="région"></rules-menu>
<rules-menu title="Règles nationales" namespace="règles nationales"></rules-menu>
......
<scenarios>
<h2 class="page-title">Scénarios</h2>
<ul>
<li each={ filter in this.filters }><a href="#" onclick={ this.toggle } class='{ on: this.selected_filters && (this.selected_filters.indexOf(filter) != -1) }' title={ filter }>{ filter }</a></li>
</ul>
......
<schema>
<h2 class="page-title">Schéma</h2>
<ul>