diff --git a/ccw/src/templates/dashboard-css/01-base.css b/ccw/src/templates/dashboard-css/01-base.css index 04c2ac60..08d8925a 100644 --- a/ccw/src/templates/dashboard-css/01-base.css +++ b/ccw/src/templates/dashboard-css/01-base.css @@ -300,3 +300,112 @@ body { padding-right: 2.5rem; } } + +/* =================================== + Development Index Timeline Styles + =================================== */ + +/* View toggle buttons */ +.dev-view-btn { + transition: all 0.2s ease; +} + +.dev-view-btn.active { + background: hsl(var(--primary)); + color: hsl(var(--primary-foreground)); + border-color: hsl(var(--primary)); +} + +.dev-view-btn:hover:not(.active) { + background: hsl(var(--muted)); +} + +/* Development Timeline */ +.dev-timeline { + display: flex; + flex-direction: column; + gap: 0; +} + +.dev-timeline-item { + display: flex; + gap: 1rem; + position: relative; +} + +.dev-timeline-marker { + display: flex; + flex-direction: column; + align-items: center; + flex-shrink: 0; + width: 2rem; +} + +.dev-timeline-dot { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + flex-shrink: 0; +} + +.dev-timeline-dot.bg-primary { + background: hsl(var(--primary)); + color: white; +} + +.dev-timeline-dot.bg-success { + background: hsl(var(--success)); + color: white; +} + +.dev-timeline-dot.bg-destructive { + background: hsl(var(--destructive)); + color: white; +} + +.dev-timeline-dot.bg-warning { + background: hsl(var(--warning)); + color: hsl(var(--foreground)); +} + +.dev-timeline-dot.bg-muted { + background: hsl(var(--muted-foreground)); + color: white; +} + +.dev-timeline-dot i { + width: 0.875rem; + height: 0.875rem; +} + +.dev-timeline-line { + width: 2px; + flex: 1; + min-height: 1rem; + background: hsl(var(--border)); + margin: 0.25rem 0; +} + +.dev-timeline-content { + flex: 1; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 8px; + padding: 1rem; + margin-bottom: 0.75rem; + transition: all 0.2s ease; +} + +.dev-timeline-content:hover { + border-color: hsl(var(--primary) / 0.3); + box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05); +} + +/* Hidden utility class */ +.hidden { + display: none !important; +} diff --git a/ccw/src/templates/dashboard-js/views/project-overview.js b/ccw/src/templates/dashboard-js/views/project-overview.js index ec7057f9..70b63499 100644 --- a/ccw/src/templates/dashboard-js/views/project-overview.js +++ b/ccw/src/templates/dashboard-js/views/project-overview.js @@ -180,16 +180,16 @@ function renderProjectOverview() {
No development history available
'; const categories = [ - { key: 'feature', label: 'Features', icon: '', badgeClass: 'bg-primary-light text-primary' }, - { key: 'enhancement', label: 'Enhancements', icon: '', badgeClass: 'bg-success-light text-success' }, - { key: 'bugfix', label: 'Bug Fixes', icon: '', badgeClass: 'bg-destructive/10 text-destructive' }, - { key: 'refactor', label: 'Refactorings', icon: '', badgeClass: 'bg-warning-light text-warning' }, - { key: 'docs', label: 'Documentation', icon: '', badgeClass: 'bg-muted text-muted-foreground' } + { key: 'feature', label: 'Features', icon: '', badgeClass: 'bg-primary-light text-primary', color: 'primary' }, + { key: 'enhancement', label: 'Enhancements', icon: '', badgeClass: 'bg-success-light text-success', color: 'success' }, + { key: 'bugfix', label: 'Bug Fixes', icon: '', badgeClass: 'bg-destructive/10 text-destructive', color: 'destructive' }, + { key: 'refactor', label: 'Refactorings', icon: '', badgeClass: 'bg-warning-light text-warning', color: 'warning' }, + { key: 'docs', label: 'Documentation', icon: '', badgeClass: 'bg-muted text-muted-foreground', color: 'muted' } ]; - const totalEntries = categories.reduce((sum, cat) => sum + (devIndex[cat.key]?.length || 0), 0); + // Calculate totals from developmentIndex (dynamic calculation) + const totals = categories.reduce((acc, cat) => { + acc[cat.key] = (devIndex[cat.key] || []).length; + return acc; + }, {}); + const totalEntries = Object.values(totals).reduce((sum, count) => sum + count, 0); if (totalEntries === 0) { return 'No development history entries
'; } - return ` -${escapeHtml(entry.description)}
` : ''} -${escapeHtml(entry.description)}
` : ''} +