20250602

frontend/src/html/index.html

@@ -48,7 +48,6 @@
   <section id="synthesis">
     <div id="synthesis_top">&nbsp;</div>
     <div id="synthesis_body"></div>
-    <div id="synthesis_bottom">&nbsp;</div>
   </section>
 
   <section id="datagrid"></section>

frontend/src/scripts/UI/IntersectionObserver/synthesis.js

@@ -4,10 +4,10 @@ const handleSynthesisIntersection = function (entries) {
     // Check if the element is intersecting the viewport
     if (entry.isIntersecting) {
       msgConsole('IntersectionObserver',"The synthesis is visible in the viewport");
-      if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
+      if (typeof synthesisIsNowVisible === 'function') synthesisIsNowVisible(entry);
     } else {
       msgConsole('IntersectionObserver',"The synthesis is invisible in the viewport");
-      if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
+      if (typeof synthesisIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
     }
   });
 }

frontend/src/scripts/default.js

@@ -1,7 +1,7 @@
   window.addEventListener('load', function() { window.scrollTo(0,0); }, false);
 
   /*
-   * Personnalisation
+   * Personnalisation HEADER visibility
    * Que se passe-t-il lorsque la bannière est invisible ?
    */
   function setLogoVisiblity(visibilityFlag) {
@@ -11,31 +11,24 @@
     element.style.visibility = value;
   }
 
-  function setNavbarStickOnTop(topFlag) {
-    let element = document.querySelector("#nav");
-    if (topFlag) element.style.setProperty('top', '0px');
-    else element.style.removeProperty('top');
+  function setSynthesisTopHeight(hauteur) {
+    let element = document.querySelector("#synthesis_top");
+    element.style.height = hauteur+'px';
   }
 
-  function setDataGridFootSticky(stickyFlag) {
-    let element = null;
-    if (stickyFlag) {
-      //
-      // Mettre le tfoot sticky au bottom
-      //
-      element = document.querySelector("#datagrid>table>tfoot");
-      element.style.setProperty('position', 'sticky');
-      element.style.setProperty('bottom', '0px');
-      element.style.setProperty('z-index', '30');
-    } else {
-      element = document.querySelector("#datagrid>table>tfoot");
-      element.style.setProperty('position', 'relative');
-      element.style.setProperty('z-index', '10');
-    }
+  function headerIsNowVisible(header) {
+    setLogoVisiblity(false);
+    setSynthesisTopHeight(6);
+  }
+
+  function headerIsNowInvisible(header) {
+    setLogoVisiblity(true);
+    setSynthesisTopHeight(80);
+    scrollToElement('#synthesis_top');
   }
 
   /*
-   * Personnalisation
+   * Personnalisation SYNTHESIS visibility
    * Que se passe-t-il lorsque la synthèse est invisible ?
    */
   function setDatagridFirstColSticky(stickyFlag) {
@@ -92,6 +85,46 @@
     }
   }
 
+  function setDataGridFootSticky(stickyFlag) {
+    let element = document.querySelector("#datagrid>table>tfoot");;
+    if (stickyFlag) {
+      //
+      // Mettre le tfoot sticky au bottom
+      //
+      element.style.setProperty('position', 'sticky');
+      element.style.setProperty('bottom', '0px');
+      element.style.setProperty('z-index', '30');
+
+      setDataGridHeadSticky(stickyFlag);
+
+    } else {
+      element.style.setProperty('position', 'relative');
+      element.style.setProperty('z-index', '10');
+    }
+  }
+  function synthesisIsNowVisible(entry) {
+
+    setDatagridHeadSticky(false);
+    setDataGridFootSticky(false);
+    /*
+    setDatagridFirstColSticky(true);
+    */
+
+    myLog('Trigger synthesis is visible');
+  }
+
+  function synthesisIsNowInvisible(entry) {
+
+    setDatagridHeadSticky(true);
+    setDataGridFootSticky(true);
+    /*
+    setDatagridFirstColSticky(true);
+    */
+
+    myLog('Trigger synthesis is invisible');
+  }
+
+
   function smoothJump(hash) {
     location.replace("#" + hash);
   }
@@ -128,36 +161,6 @@
     window.scrollTo(0, element.offsetHeight + 1);
   }
 
-  function headerIsNowVisible(header) {
-    setLogoVisiblity(false);
-  }
-
-  function headerIsNowInvisible(header) {
-    setLogoVisiblity(true);
-  }
-
-  function synthesisIsNowVisible(entry) {
-
-    setDatagridHeadSticky(false);
-    setDataGridFootSticky(false);
-    /*
-    setDatagridFirstColSticky(true);
-    */
-
-    myLog('Trigger synthesis is visible');
-  }
-
-  function synthesisTopIsNowInvisible(entry) {
-
-    setDatagridHeadSticky(true);
-    setDataGridFootSticky(true);
-    /*
-    setDatagridFirstColSticky(true);
-    */
-
-    myLog('Trigger synthesis is invisible');
-  }
-
   function initDatagrid()
   {
     let fonctionAffichageDataGrid = datagrid_hooks['random'];
@@ -191,6 +194,7 @@
   }
 
   function activeMenu(element) {
+      scrollToElement('#synthesis_top');
       activeMode(element.innerText);
   }
   

frontend/src/styles/datagrid.css

@@ -9,6 +9,10 @@
   color: var(--couleur-texte);
 }
 
+#atagrid>table>thead {
+  z-index: 30;
+}
+
 #datagrid>table>*>tr>th {
   background: var(--couleur-texte);
   color: var(--nuance-sombre-02);

frontend/src/styles/synthesis.css

@@ -1,6 +1,5 @@
 #synthesis {
   position: sticky;
-  left: 0px;
   color: var(--couleur-texte);
   background-color: var(--couleur-clair);
 }
@@ -8,7 +7,6 @@
 #synthesis_body {
   min-height: 100px;
   position: sticky;
-  left: 0px;
   z-index: 10;
   overflow: auto;
 }
@@ -24,7 +22,8 @@
 .statrow {
   display:flex; 
   width: 100%;
-  margin-bottom: 4px;
+  margin-top: 2px;
+  margin-bottom: 2px;
 }
 
 .statrow>div:hover {