- Menu on the side

- Bootstrap 4

by LD

trefle/explorer/app.css

@@ -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;
+}

trefle/explorer/components/catalog.tag.html

 <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">

trefle/explorer/components/financements.tag.html

 <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>

trefle/explorer/components/glossary.tag.html

 <glossary>
+  <h2 class="page-title">Glossaire</h2>
   <dl each={ props, name in this.items }>
     <dt>{name}</dt>
     <dd>{ props.description || props }</dd>

trefle/explorer/components/navbar.tag.html

 <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>

trefle/explorer/components/rules.tag.html

 <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>

trefle/explorer/components/scenarios.tag.html

 <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>

trefle/explorer/components/schema.tag.html

 <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>

trefle/explorer/components/simulate.tag.html

 <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>

trefle/explorer/components/tools.tag.html

 <tools>
+  <h2 class="page-title">Outils</h2>
   <idcc-search class=tools></idcc-search>
   <catalog class=tools></catalog>
   <script>

trefle/explorer/index.html

@@ -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"></header>
 <main>
-  <schema class=tools></schema>
-  <glossary class=full></glossary>
-  <rules class=tools></rules>
-  <simulate class=tools></simulate>
-  <financements class=full></financements>
-  <scenarios class=tools></scenarios>
-  <tools></tools>
+  <div class="page-content">
+      <schema class=tools></schema>
+      <glossary class=full></glossary>
+      <rules class=tools></rules>
+      <simulate class=tools></simulate>
+      <financements class=full></financements>
+      <scenarios class=tools></scenarios>
+      <tools></tools>
+  </div>
 </main>
 
 <script>