From 88f8ac7c41cb5b76459929fb6de4116168e023eb Mon Sep 17 00:00:00 2001
From: Eric Fayolle <eric.fayolle@edf.fr>
Date: Tue, 1 Feb 2022 14:22:34 +0100
Subject: [PATCH] Corrections du template bootstrap

---
 testFlask/templates/base.html          | 116 +++++++++----------------
 testFlask/templates/commandes_2.html   |  38 +++++---
 testFlask/templates/commands_menu.html |  36 +++++---
 3 files changed, 89 insertions(+), 101 deletions(-)

diff --git a/testFlask/templates/base.html b/testFlask/templates/base.html
index 5abca9e2..8e116197 100644
--- a/testFlask/templates/base.html
+++ b/testFlask/templates/base.html
@@ -107,26 +107,52 @@
     <!-- html body div.container-fluid div.row nav.navbar.flex-column.flex-md-row.affix -->
     <!-- row.nav + row.nav div.row:nth-child(2) > nav:nth-child(1) -->
     <style>
-      .affix {
+      #row-main_menu {
       top: 0;
       width: 100%;
       z-index: 8000;
       }
+
+      #row-commands_menu {
+      top: 52px;
+      margin-top: 0px;
+      width: 100%;
+      z-index: 7999;
+      }
+      
+      #row-main_and_optional_tree {
+      margin-top: 104px;
+      margin-bottom: 42px;
+      }
+
+      #row-tree1-messages {
+      bottom: 0;
+      width: 100%;
+      z-index: 8000;
+      }
+      
+      #row-tree1-messages nav, #tree1-messages {
+      margin-bottom: 0px;
+      }
+
+      
     </style>
 
   <div class="container-fluid">
 
-    <div class="row">
-      <nav class="navbar navbar-inverse flex-column flex-md-row" data-spy="affix" >
-	<!-- <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="10"> -->
-	<!-- <nav class="navbar navbar-inverse" > -->
-	<!-- <div class="container-fluid"> -->
-	<!-- <div class="row"> -->
+    <div class="row" data-spy="affix" id="row-main_menu">
+      <nav class="navbar navbar-inverse flex-column flex-md-row">
 	
 	<div class="navbar-header">
+	  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>                        
+	  </button>
 	  <a class="navbar-brand" href="#">MDM/Eficas</a>
 	</div>
-	
+
+	<div class="collapse navbar-collapse" id="myNavbar">
 	<ul class="nav navbar-nav">  
 	  <!-- <\!-- Dropdown -\-> -->
     	  <!-- <li class="nav-item dropdown"> -->
@@ -182,84 +208,22 @@
 	  <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
 
 	</ul> <!-- nav navbar-nav -->
+
 	<form class="navbar-form navbar-right" action="">
 	  <div class="form-group">
-            <input type="text" class="form-control" placeholder="Search">
+            <input type="text" class="form-control" placeholder="Search"></input>
 	  </div>
 	  <button type="submit" class="btn btn-default">Submit</button>
 	</form>
-      </nav>
-    </div>
 
+	</div> <!-- collapse -->
+	
 
-    {% block commands_menu %} {% endblock %}
-
-    <div class="row" style="margin-top: 110px;">                        <!-- TODO : style -> CSS -->
-      <!-- le data-spy="affix" sur un deuxième nav n'ajoute pas la class .affix !! -->
-      <nav class="navbar flex-column flex-md-row" data-spy="affix" style="top: 52px;z-index: 7999;width:100%;">
-      <!-- <nav class="navbar flex-column flex-md-row" data-spy="affix" style="top: 52px;z-index: 7999;width:100%;background-color:white"> -->
-	  <ul class="nav navbar-nav">
-	  
-	    <!-- <div class="col-12 panel panel-default" style="padding-top: 10px;padding-bottom: 10px;">  <\!-- TODO : style -> CSS -\-> -->
-	    <!-- <li class="nav-item"><a class="nav-link" href="#" z-index="0">AAAAAAA</a></li> -->
-	    <!-- <li class="nav-item"><a class="nav-link" href="#" z-index="0">BBBBBBB</a></li> -->
-	    <!-- <li class="nav-item"><a class="nav-link" href="#">CCC</a></li> -->
-	    
-	    {% for commande in listeCommandes %}
-	    <li class="nav-item">
-	      <div class="btn-group nav-link" data-toggle="buttons" onclick="clickOnCommand( '#tree1','#tree1-messages', '{{ commande }}' , '' )">
-		<!-- <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label> -->
-		<button class="btn btn-primary navbar-btn" for={{ commande }}> {{ commande }}</button>
-	      </div>
-	    </li>
-	    {% endfor %}
-	  
-	  </ul>
       </nav>
-    </div> <!-- row -->
+    </div>
 
-    <!-- <div class="row"> -->
-    <!--   <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> -->
-    <!-- 	<\!-- Links -\-> -->
-    <!-- 	<ul class="navbar-nav"> -->
-	  
-    <!-- 	  <li class="nav-item"> -->
-    <!-- 	    <a class="nav-link" href="#">Link 1</a> -->
-    <!-- 	  </li> -->
-    <!-- 	  <li class="nav-item"> -->
-    <!-- 	    <a class="nav-link" href="#">Link 2</a> -->
-    <!-- 	  </li> -->
 
-    <!-- 	  <\!-- Dropdown -\-> -->
-    <!-- 	  <li class="nav-item dropdown"> -->
-    <!-- 	    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> -->
-    <!--           Dropdown link -->
-    <!-- 	    </a> -->
-    <!-- 	    <div class="dropdown-menu"> -->
-    <!--           <a class="dropdown-item" href="#">Link 1</a> -->
-    <!--           <a class="dropdown-item" href="#">Link 2</a> -->
-    <!--           <a class="dropdown-item" href="#">Link 3</a> -->
-    <!-- 	    </div> -->
-    <!-- 	  </li> -->
-    <!-- 	</ul> -->
-    <!--   </nav> -->
-    <!-- </div> -->
-    
-    <!-- <div class="row"                             style="margin-top: 100px;">                        <\!-- TODO : style -> CSS -\-> -->
-    <!-- <nav class="navbar navbar-inverse flex-column flex-md-row" data-spy="affix" style="top: 52px;"> -->
-    <!--   <\!-- <div class="affix" style="top: 52px;">                                                             <\\!-- TODO : style -> CSS -\\-> -\-> -->
-    <!-- 	<div class="col-12 panel panel-default" style="padding-top: 10px;padding-bottom: 10px;">  <\!-- TODO : style -> CSS -\-> -->
-	  
-    <!-- 	  {% for commande in listeCommandes %} -->
-    <!-- 	  <div class="btn-group" data-toggle="buttons" onclick="clickOnCommand( '#tree1','#tree1-messages', '{{ commande }}' , '' )"> -->
-    <!-- 	    <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label> -->
-    <!-- 	  </div> -->
-    <!-- 	  {% endfor %} -->
-	  
-    <!-- 	</div> -->
-    <!-- 	<\!-- </div> <\\!-- affix -\\-> -\-> -->
-    <!-- </nav> -->
-    <!-- </div> <\!-- row -\-> -->
+    {% block commands_menu %} {% endblock %}
 
     {% block content %} {% endblock %}
 
diff --git a/testFlask/templates/commandes_2.html b/testFlask/templates/commandes_2.html
index 16dae1a3..e6d216d8 100644
--- a/testFlask/templates/commandes_2.html
+++ b/testFlask/templates/commandes_2.html
@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'commands_menu.html' %}
 
 {% block content %}
 
@@ -62,11 +62,10 @@
 <!--     <\!-- <div id="treeview-searchable" class=""></div> -\-> -->
 <!-- </div> -->
     
-<div class="row">	   
-  <div class="col-sm-8 panel panel-default"> <!-- Panel Arbre Principal -->
+<div class="row" id="row-main_and_optional_tree">
+  <div class="col-sm-8 panel panel-default" id="col-main_tree"> <!-- Panel Arbre Principal -->
     <div class="panel-heading">DatasetName : {{titre}}</div>
     
-    <!-- <div id="tree1" class="table table-condensed table-hover table-striped fancytree-fade-expander"> -->
     <table id="tree1" class="table table-condensed table-hover table-striped fancytree-fade-expander">
       <!-- TODO : Manage the space between Title and Value while choosing a Value size adapted to the value -->
       <colgroup>
@@ -90,29 +89,42 @@
   </div>
   
   <!-- <div class="col-sm-4" ><table class="fancytree-ext-table"><tr>Optionals :</tr></table> -->
-  <div class="col-sm-4 panel panel-default" > <!-- Panel Arbre Options -->
+  <div class="col-sm-4 panel panel-default" id="col-optional_tree" data-spy="affix" data-offset-top="0"> <!-- Panel Arbre Options -->
+    <nav class="navbar" id="navbar-optionals" >
     <div class="panel-heading">Optionals</div>
     <div class="panel-body">
-      <div id="Optionals"></div>
-      <div id="Opt-testing"></div>
-    </div>
-  </div>
+      <!-- <nav class="navbar" id="navbar-optionals" data-spy="affix" data-offset-top="0"> -->
+	<div id="Optionals"></div>
+	<div id="Opt-testing"></div>
+      <!-- </nav> -->
+    </div> <!-- panel-body -->
+    </nav>
+  </div>  <!-- col -->
   
+</div> <!-- row -->
+<script>
+  //$("#navbar-optionals").affix({offset: {top: $("#row-commands_menu").outerHeight(true)} }); 
+  $("#col-optional_tree").affix({offset: {top: $("#row-commands_menu").outerHeight(true)} }).css('right',0); 
+</script>
+
+<div class="row" data-spy="affix" id="row-tree1-messages">
+
     <!-- <footer class="footer"> -->
-    <!-- <nav class="navbar navbar-inverse navbar-fixed-bottom"> -->
-    <!-- <nav class="navbar navbar-inverse"> -->
+    <nav class="navbar" >
     <!--   <div class="container-fluid"> -->
     <!-- <div class="navbar-header" > -->
     <!--   <a class="navbar-brand" href="#">Messages</a> -->
     <!-- </div> -->
     <!-- <h2>Messages</h2> -->
     <!-- <span id="tree1-messages" class="nav navbar-nav col-sm-12 navbar-right alert alert-success"  >....</span> -->
-    <footer id="tree1-messages" class="container-fluid footer col-sm-12 alert alert-success"  >No message.</footer>
+    <footer class="footer alert alert-success" id="tree1-messages">No message.</footer>
     <!-- alert alert-success alert-info alert-warning alert-danger -->
     <!--   </div> -->
-    <!-- </nav> -->
+    </nav>
     <!-- </footer> -->
 
+</div> <!-- row -->
+
     <script>
 
 //$.ui.fancytree.debugLevel=4; // Set the fancyTree debug level
diff --git a/testFlask/templates/commands_menu.html b/testFlask/templates/commands_menu.html
index 837d6020..eea5f8fa 100644
--- a/testFlask/templates/commands_menu.html
+++ b/testFlask/templates/commands_menu.html
@@ -1,18 +1,30 @@
 {% extends 'base.html' %}
 
 
-{% block command_menu %}
+{% block commands_menu %}
 
-<div class="row">
-  <div class="col-sm-12 panel panel-default">
-
-    {% for commande in listeCommandes %}
-    <div class="btn-group" data-toggle="buttons" onclick="clickOnCommand( '#tree1','#tree1-messages', '{{ commande }}' , '' )">
-      <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label>
-    </div>
-    {% endfor %}
-    
-  </div>
-</div>
+<div class="row" id="row-commands_menu" data-spy="affix" >                        <!-- TODO : style -> CSS -->
+  <nav class="navbar flex-column flex-md-row" >
+    <!-- <nav class="navbar flex-column flex-md-row" data-spy="affix" style="top: 52px;z-index: 7999;width:100%;background-color:black"> -->
+    <ul class="nav navbar-nav">
+      
+      <!-- <div class="col-12 panel panel-default" style="padding-top: 10px;padding-bottom: 10px;">  <\!-- TODO : style -> CSS -\-> -->
+      <!-- <li class="nav-item"><a class="nav-link" href="#" z-index="0">AAAAAAA</a></li> -->
+      <!-- <li class="nav-item"><a class="nav-link" href="#" z-index="0">BBBBBBB</a></li> -->
+      <!-- <li class="nav-item"><a class="nav-link" href="#">CCC</a></li> -->
+      
+      {% for commande in listeCommandes %}
+      <li class="nav-item">
+	<div class="btn-group nav-link" data-toggle="buttons" onclick="clickOnCommand( '#tree1','#tree1-messages', '{{ commande }}' , '' )">
+	  <!-- <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label> -->
+	  <button class="btn btn-primary navbar-btn" for={{ commande }}> {{ commande }}</button>
+	</div>
+      </li>
+      {% endfor %}
+	  
+    </ul>
+  </nav>
+</div> <!-- row -->
 
 {% endblock %}
+
-- 
2.39.2