Sfoglia il codice sorgente

Cell popover: vertical slider

- writing-mode: vertical-lr + direction: rtl orient the slider with
  low at the bottom, high at the top (modern engines).
- -webkit-appearance: slider-vertical covers older WebKit / Safari.
- orient="vertical" attribute set in JS for Firefox's legacy path.
- Slider sized 1.5rem × 8rem; popover grid columns flipped to
  `auto 1fr` so the now-narrow slider column stays on the left.
- Popover min-width tightened from 18rem to 14rem since the slider
  no longer eats horizontal space.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
chiappa 3 giorni fa
parent
commit
c0294d8698
2 ha cambiato i file con 18 aggiunte e 4 eliminazioni
  1. 14 4
      assets/css/input.css
  2. 4 0
      public/assets/js/sprint-planner.js

+ 14 - 4
assets/css/input.css

@@ -86,7 +86,7 @@
     .cell-popover {
         position: absolute;
         z-index: 50;
-        min-width: 18rem;
+        min-width: 14rem;
         padding: 0.75rem;
         border-radius: 0.5rem;
         border: 1px solid theme('colors.slate.200');
@@ -99,18 +99,28 @@
     }
     .cell-popover-grid {
         display: grid;
-        grid-template-columns: 1fr auto;
+        grid-template-columns: auto 1fr;
         gap: 1rem;
         align-items: center;
     }
     .cell-popover-slider {
         display: flex;
         flex-direction: column;
+        align-items: center;
         gap: 0.4rem;
-        min-width: 8rem;
+        min-width: 2.5rem;
     }
+    /* Vertical slider — `writing-mode + direction: rtl` covers modern
+       browsers (low at the bottom, high at the top); the WebKit
+       `slider-vertical` appearance and the Firefox `orient="vertical"`
+       attribute (set in JS) are belt-and-braces for older engines. */
     .cell-popover-slider input[type="range"] {
-        width: 100%;
+        writing-mode: vertical-lr;
+        direction: rtl;
+        -webkit-appearance: slider-vertical;
+        appearance: slider-vertical;
+        width: 1.5rem;
+        height: 8rem;
         accent-color: theme('colors.slate.600');
         cursor: pointer;
     }

+ 4 - 0
public/assets/js/sprint-planner.js

@@ -691,6 +691,10 @@
         slider.step = '0.5';
         slider.value = '0';
         slider.setAttribute('aria-label', 'Days');
+        // Firefox honours the legacy `orient` attribute; modern engines use
+        // the writing-mode/direction CSS in input.css. Both pull the same
+        // direction (low at the bottom, high at the top).
+        slider.setAttribute('orient', 'vertical');
         sliderWrap.appendChild(valEl);
         sliderWrap.appendChild(slider);
         grid.appendChild(sliderWrap);