diff --git a/internal/web/public/css/index.css b/internal/web/public/css/index.css index c818ed2..eeb82b9 100644 --- a/internal/web/public/css/index.css +++ b/internal/web/public/css/index.css @@ -126,6 +126,20 @@ box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle); } +/* Days are clickable to jump the workout view; show hover + selected state. */ +.week-dot-item:hover .week-dot { + transform: scale(1.12); +} + +.week-dot-item.is-selected .week-dot { + box-shadow: 0 0 0 3px var(--bs-primary); +} + +.week-dot-item.is-selected .week-dot-label { + color: var(--bs-primary); + font-weight: 700; +} + .week-dot-label { font-size: 0.62rem; color: var(--bs-secondary-color); diff --git a/internal/web/public/js/index.js b/internal/web/public/js/index.js index 2afbf34..402a4cf 100644 --- a/internal/web/public/js/index.js +++ b/internal/web/public/js/index.js @@ -523,6 +523,11 @@ function setFormContent(sets, date) { var btn = document.getElementById('dateDisplayBtn'); if (btn) btn.textContent = formatFriendlyDate(date); + // Mark the matching "Last 7 days" dot as selected (if the date is in range). + document.querySelectorAll('.week-dot-item').forEach(function(it) { + it.classList.toggle('is-selected', it.getAttribute('data-date') === date); + }); + if (sets) { for (var i = 0; i < sets.length; i++) { if (sets[i].Date == date) { @@ -700,12 +705,17 @@ function renderWeekStreak(sets) { var isToday = i === 0; var hasWorkout = sets && sets.some(function(s) { return s.Date === dateStr; }); if (hasWorkout) activeCount++; - items.push({ label: dayLetters[d.getDay()], active: hasWorkout, today: isToday }); + items.push({ label: dayLetters[d.getDay()], active: hasWorkout, today: isToday, date: dateStr }); } var dotsHtml = items.map(function(item) { var dotCls = 'week-dot' + (item.active ? ' has-workout' : '') + (item.today ? ' is-today' : ''); var lblCls = 'week-dot-label' + (item.today ? ' is-today' : ''); - return '