Refactor heatmap UI: adjust select element widths and improve layout for hand and finger selections

Author: RIGAT-Pierre-andre-2326090par

_includes/heatmap.html

@@ -1,7 +1,7 @@
 {% assign e = site.data[page.lang]['heatmap-ui'] %}
 
 <div id="interface">
-    <div class="select active" role="select" style="width: 13em">
+    <div id="hand-select" class="select active" role="select">
         <input class="select-checkbox" id="hand-select-checkbox" type="checkbox">
         <label for="hand-select-checkbox" style="display: flex; justify-content:  space-between">
             <span id="hand-selected">{{ e.total }}</span>
@@ -14,7 +14,7 @@
             <span class="select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
         </div>
     </div>
-    <div class="select" id="finger-select" role="select" style="width: 7em">
+    <div class="select" id="finger-select" role="select">
         <input class="select-checkbox" id="finger-select-checkbox" type="checkbox">
         <label for="finger-select-checkbox" style="display: flex; justify-content: space-between">
             <span id="finger-selected">{{ e.all_button }}</span>
@@ -208,7 +208,6 @@
                 updateSelection("total");
             } else {
                 let selectValue = handleCustomSelect(e.textContent);
-                debugger;
                 if (selectValue === "total") {
                     if (fingerSelect.classList.contains('active')) {
                         fingerSelect.classList.remove('active');

assets/css/heatmap.css

@@ -54,6 +54,14 @@
     user-select: none;
 }
 
+#hand-select {
+    width: 13em
+}
+
+#finger-select {
+    width: 7em
+}
+
 .select-checkbox {
     display: none;
 }
@@ -99,19 +107,11 @@
     padding-top: 0.2em;
 }
 
-.select-checkbox:checked ~ label[for="hand-select-checkbox"] img {
-    transform: rotate(0deg);
-}
-
-.select-checkbox ~ label[for="hand-select-checkbox"] img {
-    transform: rotate(-90deg);
-}
-
-.select-checkbox:checked ~ label[for="finger-select-checkbox"] img {
+.select-checkbox:checked ~ label img {
     transform: rotate(0deg);
 }
 
-.select-checkbox ~ label[for="finger-select-checkbox"] img {
+.select-checkbox ~ label img {
     transform: rotate(-90deg);
 }
 
@@ -173,7 +173,7 @@
     pointer-events: auto;
 }
 
-.reset-view-btn:hover {
+.reset-view-btn:active {
     background: rgba(74, 158, 255, 0.9);
     color: white;
     transform: translateY(-2px);
@@ -195,4 +195,6 @@
     .heatmap-legend { font-size: 10px; }
     .heatmap-gradient { width: 60px; height: 8px; }
     #interface { gap: 1em; }
+    #hand-select { width: 11em }
+    #finger-select { width: 5em }
 }