adding a search field on list element

trefle/explorer/app.css

@@ -289,8 +289,8 @@ dl:nth-child(even) {
 .page-content {
   width: 100vw;
   position: absolute;
-  left: 15rem;
-  top: 6rem;
+  left: 14rem;
+  top: 5rem;
   transition: all 0.4s;
 }
 
@@ -305,7 +305,7 @@ dl:nth-child(even) {
   border-radius: 5px;
   width: 80vw;
   height: 100vh;
-  margin: 1rem;
+  margin: 3rem;
   -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
   -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
@@ -323,6 +323,12 @@ dl:nth-child(even) {
   font-style: bolder;  
 }
 
+#ref-last-update {
+  font-size: 0.9em;
+  color: #000; /* Fallback for older browsers */
+  color: rgba(0, 0, 0, 0.5);
+}
+
 /*#ref-filter-row {
 }
 

trefle/explorer/components/navbar.tag.html

@@ -2,53 +2,53 @@
   <progress style="display: none" id="progress" />
 
     <!-- Horizontal navbar -->
-    <div class="horizontal-nav bg-light" id="sidebar">
+    <div class="horizontal-nav bg-white" id="sidebar">
 
-      <ul class="nav bg-light mb-0">
-        <li class="nav-item bg-light">          
+      <ul class="nav bg-white mb-0">
+        <li class="nav-item bg-white">
         </li>
       </ul>
     </div>
     <!-- End horizontal navbar -->
 
     <!-- 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">
+    <div class="vertical-nav bg-white" id="sidebar">
+      <ul class="nav flex-column bg-white mb-0">
+        <li class="nav-item bg-white">
           <a href="." id="nav-title" class="nav-link text-dark">☘</a>
         </li>
         <li class="nav-item">
-          <a href="." class="{selected: window.location.hash.startsWith('')} nav-link text-dark bg-light">
+          <a href="." class="{selected: window.location.hash.startsWith('')} nav-link text-dark bg-white">
             <img src="/explorer/images/Icone_Home.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
             Accueil
           </a>
         </li>
         <li class="nav-item">
-          <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-light">
+          <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-white">
             <img src="/explorer/images/Icone_Referentiel.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
             Référentiel
           </a>
         </li>
         <li class="nav-item">
-          <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link text-dark bg-light">
+          <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link text-dark bg-white">
             <img src="/explorer/images/Icone_Financement.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
             Financements
           </a>
         </li>
         <li class="nav-item">
-          <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-light">
+          <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-white">
             <img src="/explorer/images/Icone_Simulateur.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
             Simulateur
           </a>
         </li>
         <li class="nav-item">
-          <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-light">
+          <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-white">
             <img src="/explorer/images/Icone_Scenarios.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
             Scénarios
           </a>
         </li>
         <li class="nav-item">
-          <a href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-light">
+          <a href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-white">
             <img src="/explorer/images/Icone_Outils.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
             Outils
           </a>

trefle/explorer/components/rules.tag.html

 <rules>
-  <div id="ref-main-div" class="bg-light">  
+  <div id="ref-main-div" class="bg-white">  
     <div id="ref-header-row">
       <div class="container">
         <div class="row mb-4">
           <div id="ref-count-financements" class="col-md-3 col-sm-6 col-xs-12">
-            <span id="ref-count-financements-number" class="ref-count-financements-text">{ this.count_financements }&nbsp;</span>
-            <span class="ref-count-financements-text" if={ this.lt_two }>financement</span>
-            <span class="ref-count-financements-text" if={ !this.lt_two }>financements</span>
+            <span id="ref-count-financements-number" class="ref-results-count-number ref-count-financements-text">{ this.count_financements }</span>
+            <span class="ref-count-financements-text" if={ this.lt_two }>&nbsp;financement</span>
+            <span class="ref-count-financements-text" if={ !this.lt_two }>&nbsp;financements</span>
           </div>
           <div id="ref-create-financement" class="col-md-3 col-sm-6 col-xs-12 my-auto">
             <button href="#" class="btn btn-outline-success" disabled>Créer un financement</button>
@@ -16,7 +16,6 @@
               <div class="form-group mx-sm-3 mb-2">
                 <input class="form-control" id="financement-search-field" name="financement-search" type="search" placeholder="Rechercher">
               </div>
-              <button class="btn btn-success mb-2" id="financement-search-button">OK</button>
             </div>
           </div>
         </div>
@@ -37,16 +36,16 @@
     <hr class="ref-horizontal-separator">
     <div id="ref-result-row" class="container">
       <span class="ref-results-count" if={ this.lt_two }>
-          Résultat ({ this.count_financements })
+          Résultat (<span class="ref-results-count-number">{ this.count_financements }</span>)
       </span>
       <span class="ref-results-count" if={ !this.lt_two }>
-          Résultats ({ this.count_financements })
+          Résultats (<span class="ref-results-count-number">{ this.count_financements }</span>)
       </span>
       <div id="ref-results-list">
-        <ul each={ this.financements } class="container">
-          <li class="row">
+        <ul id="ul-ref-results-list" class="container">
+          <li each={ this.financements } class="mt-4 row">
             <span class="col-md-3 col-sm-12">
-              <strong>{ intitule }</strong>
+              <strong class="ref-fields">{ intitule }</strong>
             </span>
             <span class="col-md-8 col-sm-11">
               <button each={ tag in _tags} class="btn btn-outline-info" href="#" disabled>{ tag }</button>