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;
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;
<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">
<h2>Liste des types de financements <a href= target=_blank><i class="icon">edit</i></a></h2>
<h2 class="page-title">Liste des types de financements <a href= 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>
<h2 class="page-title">Glossaire</h2>
<dl each={ props, name in this.items }>
<dd>{ props.description || props }</dd>
<progress style="display: none" id="progress" />
<h1><a href="."></a></h1>
<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>
<!-- 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">
<a href="." class="nav-link text-dark"></a>
<li class="nav-item">
<a href="#schema" class="{selected: window.location.hash.startsWith('#schema')} nav-link text-dark bg-light">Schéma</a>
<li class="nav-item">