summaryrefslogtreecommitdiff
path: root/Omni/Jr/Web
diff options
context:
space:
mode:
authorBen Sima <ben@bensima.com>2025-11-27 17:14:33 -0500
committerBen Sima <ben@bensima.com>2025-11-27 17:14:33 -0500
commit0356aac5ad591172967f688e71d1e4351c99c7fe (patch)
tree1e8aa4698dd96c7b95039ded3a6a9e356a8316f6 /Omni/Jr/Web
parent39d9072fc857d944c545ed4ae8df2a5a046946b6 (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.hs35
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"