Refactor heatmap UI: improve layout and styling for better clarity and responsiveness

Author: RIGAT-Pierre-andre-2326090par

_includes/heatmap.html

@@ -61,14 +61,14 @@
 
 <!-- ── Bottom bar: badge + finger context + legend + reset ── -->
 <div class="bottom-bar">
-    <div class="finger-context" id="finger-context">
-        {{ e.finger_context }}
+    <div class="heatmap-legend">
+        <span style="text-align: right">{{ e.unreachable }}</span>
+        <div class="heatmap-gradient"></div>
+        <span style="text-align: left">{{ e.reachable }}</span>
     </div>
 
-    <div class="heatmap-legend" style="flex-basis: 100%; display: flex; justify-content: center; align-items: center;">
-        <span>{{ e.unreachable }}</span>
-        <div class="heatmap-gradient"></div>
-        <span>{{ e.reachable }}</span>
+    <div class="finger-context" id="finger-context">
+        {{ e.finger_context }}
     </div>
 
     <span id="reset-view-btn">{{ e.reset_view }}</span>
@@ -96,6 +96,7 @@
     const heatmap = new Keycube(document.getElementById('model-container'), true, 'integer')
 
     // select element
+    const handSelect = document.getElementById('hand-select');
     const handLabel = document.getElementById('hand-selected');
     const fingerLabel = document.getElementById('finger-selected');
     const fingerSelect = document.getElementById('finger-select');
@@ -345,14 +346,14 @@
     }
 
     // close the hand select if the finger one is open
-    fingerCheckbox.addEventListener('change', () => {
+    /*fingerCheckbox.addEventListener('change', () => {
         handCheckbox.checked = false;
     })
 
     // close the finger select if the hand one is open
     handCheckbox.addEventListener('change', () => {
         fingerCheckbox.checked = false;
-    })
+    })*/
 
     // the first select options start the first select handler
     handOptions.forEach(elem => {
@@ -373,6 +374,15 @@
         heatmap.updateModel({resetView: true});
     })
 
+    // click outside the hand select options close the hand select
+    document.addEventListener('click', (event) => {
+        if (handCheckbox.checked) {
+            handCheckbox.checked = handSelect.contains(event.target);
+        } else if (fingerCheckbox.checked) {
+            fingerCheckbox.checked = fingerSelect.contains(event.target);
+        }
+    })
+
     // define the default view of the 3d render
     handleFirstSelect('start');
     // the 3d render is now visible

assets/css/heatmap.css

@@ -47,7 +47,7 @@
     justify-content: center;
     align-items: center;
     pointer-events: auto;
-    gap: 2em;
+    gap: 1em;
     user-select: none;
 }
 
@@ -126,8 +126,6 @@ label {
 .finger-context {
     display: flex;
     align-items: center;
-    font-size: 11px;
-    color: #555;
     text-align: center;
     line-height: 1.3;
     min-height: 16px;
@@ -138,35 +136,43 @@ label {
 }
 
 .bottom-bar {
-    left: 0;
-    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 1em;
+    flex-direction: column;
+    gap: .5em;
+
     padding: 14px 20px;
     pointer-events: none;
     flex-wrap: wrap;
+
+    font-size: 12px;
+    color: #828282;
 }
 
 .heatmap-legend {
-    display: flex;
+    display: grid;
+    grid-template-columns: 7em auto 7em;
     align-items: center;
-    gap: 6px;
-    font-size: 11px;
-    color: #555;
+
+    flex-basis: 100%;
+    user-select: none;
+}
+
+.heatmap-legend span {
+    padding: 0 .5em;
 }
 
 .heatmap-gradient {
-    width: 100px; height: 10px;
-    border-radius: 5px;
+    width: 100px; height: 15px;
+    border-radius: 8px;
     background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);
     border: 1px solid rgb(192, 192, 192);
+    justify-self: center;
+    grid-column: 2;
 }
 
 #reset-view-btn {
-    font-size: 12px;
-    font-weight: 600;
     cursor: pointer;
     pointer-events: auto;
     user-select: none;
@@ -184,11 +190,4 @@ label {
     .bottom-bar { gap: 6px; padding: 8px 10px; }
     .heatmap-legend { font-size: 10px; }
     .heatmap-gradient { width: 60px; height: 8px; }
-    #interface { gap: 1em; }
-    .select { width: 10em }
-}
-
-@media (max-width: 360px) {
-    #interface { gap: 0.5em; }
-    .select { width: 8em }
 }