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>
<li each={ label, id in this.categories }><a href="#schema/{ id }" class='{ on: this.opts.id && this.opts.id.startsWith(id) }' title={ id }>{ label }</a></li>
</ul>
......
<simulate>
<section>
<h2>Depuis un résultat de financement LBF <a if={ opts.url } href={ opts.url }><i class=icon>link</i></a></h2>
<h2 class="page-title">Simuler depuis un résultat de financement LBF <a if={ opts.url } href={ opts.url }><i class=icon>link</i></a></h2>
</section>
<section if={ Object.keys(this.errors).length && !Object.keys(this.context).length } class=results>
<ul>
......
<tools>
<h2 class="page-title">Outils</h2>
<idcc-search class=tools></idcc-search>
<catalog class=tools></catalog>
<script>
......
......@@ -3,7 +3,14 @@
<title>Trèfle feuille à feuille</title>
<script src="vendor/riot/riot%2Bcompiler.js"></script>
<script src="vendor/riot/route%2Btag.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="app.css">
<script type="text/javascript" src="mixin/view.mixin.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="components/navbar.tag.html" type="riot/tag"></script>
......@@ -19,15 +26,18 @@
<script src="components/catalog.tag.html" type="riot/tag"></script>
<script src="components/context.tag.html" type="riot/tag"></script>
<header data-is=navbar></header>
<header data-is=navbar style="border:none"><