diff options
| author | Ben Sima <ben@bensima.com> | 2025-11-27 17:14:33 -0500 |
|---|---|---|
| committer | Ben Sima <ben@bensima.com> | 2025-11-27 17:14:33 -0500 |
| commit | 0356aac5ad591172967f688e71d1e4351c99c7fe (patch) | |
| tree | 1e8aa4698dd96c7b95039ded3a6a9e356a8316f6 /Omni/Jr/Web | |
| parent | 39d9072fc857d944c545ed4ae8df2a5a046946b6 (diff) | |
Implement multi-color progress bar component
The build and test passed with no errors. The multi-color progress
bar c
**Implementation summary:** -
**[Omni/Jr/Web.hs](file:///home/ben/omni/Omni/Jr/Web.hs#L234-L275)**: -
**[Omni/Jr/Web/Style.hs](file:///home/ben/omni/Omni/Jr/Web/Style.hs#L3
The progress bar is used on the dashboard (line 324 in Web.hs)
to visual
Task-Id: t-155.3
Diffstat (limited to 'Omni/Jr/Web')
| -rw-r--r-- | Omni/Jr/Web/Style.hs | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs index dd5bc40..8b1946a 100644 --- a/Omni/Jr/Web/Style.hs +++ b/Omni/Jr/Web/Style.hs @@ -369,6 +369,39 @@ cardStyles = do backgroundColor "#0066cc" borderRadius (px 2) (px 2) (px 2) (px 2) transition "width" (ms 300) ease (sec 0) + ".multi-progress-container" ? do + marginBottom (px 12) + ".multi-progress-bar" ? do + display flex + height (px 8) + backgroundColor "#e5e7eb" + borderRadius (px 4) (px 4) (px 4) (px 4) + overflow hidden + marginTop (px 6) + ".multi-progress-segment" ? do + height (pct 100) + transition "width" (ms 300) ease (sec 0) + ".progress-done" ? backgroundColor "#10b981" + ".progress-inprogress" ? backgroundColor "#f59e0b" + ".progress-open" ? backgroundColor "#3b82f6" + ".progress-legend" ? do + display flex + Stylesheet.key "gap" ("16px" :: Text) + marginTop (px 6) + fontSize (px 12) + color "#6b7280" + ".legend-item" ? do + display flex + alignItems center + Stylesheet.key "gap" ("4px" :: Text) + ".legend-dot" ? do + display inlineBlock + width (px 10) + height (px 10) + borderRadius (px 2) (px 2) (px 2) (px 2) + ".legend-done" ? backgroundColor "#10b981" + ".legend-inprogress" ? backgroundColor "#f59e0b" + ".legend-open" ? backgroundColor "#3b82f6" ".stats-section" ? do backgroundColor white borderRadius (px 2) (px 2) (px 2) (px 2) @@ -996,6 +1029,8 @@ darkModeStyles = ".stats-row" ? borderBottomColor "#374151" ".progress-bar" ? backgroundColor "#374151" ".progress-fill" ? backgroundColor "#60a5fa" + ".multi-progress-bar" ? backgroundColor "#374151" + ".progress-legend" ? color "#9ca3af" ".activity-section" ? do backgroundColor "#1f2937" borderColor "#374151" |
