Corrections du template bootstrap

diff --git a/testFlask/templates/base.html b/testFlask/templates/base.html
index 5abca9e2aec2fe531cd2fc53de5019ea7919fb4d..8e116197d9c5cbfeab67e7503afdc6734ec34e67 100644 (file)
--- 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 16dae1a385599d4712ae865922fc2daab0f7f1b3..e6d216d8fe595eb73bcbeaed1050870f255d6166 100644 (file)
--- 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 837d60203faa591967604f44f1de2ffc61cfa89d..eea5f8fa22399b5b777565fe492fc11ea0d39767 100644 (file)
--- 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 %}
+