Fixed the css of cursors

Author: ProgRT

_layouts/simulateur.html

@@ -2,7 +2,7 @@
 <style>
 @import 'css/nav.css';
 @import 'css/dialog.css';
-@import 'css/main.css';
+@import 'css/layout-sim.css';
 @import 'css/numDisplay.css';
 @import 'css/cursors.css';
 @import 'css/pannel.css';

css/cursors.sass

@@ -18,20 +18,17 @@
 
 .cursCont
   display: flex
-  justify-content: stretch
-  gap: 20px
+  align-items: space-between
+  gap: 10px
+  flex-wrap: wrap
+  padding: 5px
 
 .cursCtrl
+  margin: 0px
   display: flex
   align-items: center
   flex-grow: 2
   gap: 3px
+
   input
     flex-grow: 2
-
-@media(width < 900px)
-  .cursCont
-    display: flex
-    flex-direction: column
-    justify-content: stretch
-    gap: 5px

css/main.sass css/layout-sim.sasscss/main.sass renamed to css/layout-sim.sass

@@ -10,11 +10,11 @@ body
   padding: 0px
 
 main
-  overflow: hidden
   box-sizing: border-box
   display: flex
   justify-content: space-between
   flex-direction: row-reverse
+  flex-wrap: none
   margin: 0px
 
   .waveformsContainer
@@ -23,6 +23,7 @@ main
     width: 100%
     max-width: 8in
     display: flex
+    flex-shrink: 5
     flex-direction: column
 
     svg

css/nav.sass

@@ -1,15 +1,8 @@
 ---
 ---
 @keyframes flash
-  0%
-    border: 1px solid white
-    box-shadow: 1px 1px 2px white
-  50%
-    border: 1px solid gainsboro
-    box-shadow: 1px 1px 2px silver
   100%
-    border: 1px solid white
-    box-shadow: 1px 1px 2px white
+    fill: blue
 
 nav
   position: sticky
@@ -32,12 +25,18 @@ nav
     border-radius: 5px
     padding: 5px
     transition: 0.9s
+    text-align: center
+    svg
+      vertical-align: middle
+      fill: black
+      height: 30px
   a
-    animation: flash 1.5s ease-in-out
+    svg
+      animation: flash .75s linear alternate 4
 
   button:hover, a:hover
-    border: 1px solid gainsboro
-    box-shadow: 1px 1px 2px silver
+    svg
+      fill: navy
 
   button:disabled, a.disabled
     display: none
@@ -46,7 +45,6 @@ nav
     vertical-align: middle
     fill: black
     height: 1.8em
-    width: 1.8em
 
   div
     flex-basis: 500px

css/numDisplay.sass

@@ -2,6 +2,9 @@
 ---
 .numDisplayContainer
   width: max-content
+  display: flex
+  flex-direction: column
+  gap: 8px
   flex-shrink: 0
   padding: 10px
   height: max-content
@@ -12,7 +15,6 @@
     background: hsla(0, 0%, 100%, 0.9)
     padding: 8px
     border-radius: 8px
-    margin-bottom: 5px
     height: 3.5em
 
     .value
@@ -21,9 +23,7 @@
 
 @media(width < 500px)
   .numDisplayContainer
-    width: max-content
-    display: flex
-    gap: 5px
+    flex-direction: row
     flex-shrink: 0
     padding: 10px
     height: max-content

src/animatedDisplay.js

@@ -339,7 +339,7 @@ export class display {
 
             this.dwlLnk.classList.remove('disabled');
             this.dwlLnk.href = this.dataUrl;
-
+10
             this.cursTbl = new cursTable(this.datasets);
             this.addCursor(0);
             this.addCursor(1);
@@ -348,6 +348,8 @@ export class display {
             this.fillCursTbl(0);
             this.fillCursTbl(1);
             pannel.append(this.cursTbl.container);
+            console.log("Redrawing");
+            this.redraw();
         }
 	}
 
@@ -451,6 +453,7 @@ function dwlLnk () {
     let lnk = document.createElement('a');
     lnk.append(icon('Télécharger'));
     lnk.download = 'simvent_data.csv';
+    lnk.title = translate('Download data');
 
     return lnk;
 }

src/translate.js

@@ -11,6 +11,7 @@ const uiFr = {
     'Control pannel': 'Paneau de contrôle',
     'Completed tasks': 'Tâches complétées',
     Cursors: 'Curseurs',
+    'Download data': 'Télécharger les données',
     ESC: 'Échap',
     Lung: 'Poumons',
     'Ongoing tasks': 'Tâches en cours',