Improvements to fitness page
- Data now comes from a calendar - Hovering in charts shows day info - Optical enhancements to chart rendering - Allow setting/showing goal weight - Allow toggeling between absolute and zoomed in weight axis
This commit is contained in:
+21
-3
@@ -837,8 +837,10 @@ aside.sidebar:empty { display: none; }
|
||||
Server-rendered inline SVG charts. Geometry comes precomputed from Go;
|
||||
colors and strokes are applied here via classes so the inline SVG follows
|
||||
the theme palette. */
|
||||
.fitness-chart { padding: var(--space-3); }
|
||||
.fitness-chart { position: relative; padding: var(--space-3); }
|
||||
.fitness-chart-header { margin-bottom: var(--space-2); }
|
||||
.fitness-controls { gap: var(--space-3); }
|
||||
.fitness-absolute { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-sm); color: var(--text-muted); }
|
||||
.fitness-range { width: auto; font-size: var(--font-sm); }
|
||||
.fitness-empty {
|
||||
border: var(--border-dashed);
|
||||
@@ -852,8 +854,24 @@ aside.sidebar:empty { display: none; }
|
||||
.fitness-svg .chart-label { fill: var(--text-muted); font-size: var(--font-xs); }
|
||||
.fitness-svg .chart-line { fill: none; stroke: var(--link); stroke-width: 1.5; }
|
||||
.fitness-svg .chart-dot { fill: var(--link); }
|
||||
.fitness-svg .chart-goal { stroke: var(--primary-hover); stroke-dasharray: 4 3; }
|
||||
.fitness-svg .chart-goal-label { fill: var(--primary-hover); font-size: var(--font-xs); }
|
||||
.fitness-svg.is-dense .chart-dot { display: none; }
|
||||
.fitness-svg:not(.is-hover) :is(.chart-cursor, .chart-focus) { display: none; }
|
||||
.fitness-svg .chart-cursor { stroke: var(--text-muted); stroke-dasharray: 2 2; }
|
||||
.fitness-svg .chart-focus { fill: var(--link-hover); stroke: var(--bg); stroke-width: 1.5; }
|
||||
.fitness-svg .chart-goal { stroke: var(--danger); stroke-dasharray: 4 3; }
|
||||
.fitness-svg .chart-goal-label { fill: var(--danger-hover); font-size: var(--font-xs); }
|
||||
.fitness-tip {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background: var(--bg);
|
||||
border: var(--border);
|
||||
font-size: var(--font-sm);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
.fitness-tip[hidden] { display: none; }
|
||||
|
||||
/* === Responsive === */
|
||||
@media (max-width: 1100px) {
|
||||
|
||||
Reference in New Issue
Block a user