Dashboard: show workout list when no scheduled workout
- 'Välj pass' section with all available workouts - Compact workout cards with exercise tags - Click any workout → WorkoutPage - No more 'Vilodag' - user can always pick a workout
This commit is contained in:
@@ -1452,3 +1452,53 @@
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
WORKOUT LIST (when no today's workout)
|
||||
============================================ */
|
||||
|
||||
.workout-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.workout-card.compact {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.workout-card.compact .workout-card-header {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.workout-card.compact .workout-card-header h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.workout-day {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.workout-exercises.compact {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.exercise-tag {
|
||||
background: var(--bg);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.exercise-tag.more {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -141,7 +141,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
|
||||
|
||||
{/* Today's Workout */}
|
||||
<section className="todays-workout">
|
||||
<h2>Dagens pass</h2>
|
||||
<h2>{todayWorkout ? 'Dagens pass' : 'Välj pass'}</h2>
|
||||
{todayWorkout ? (
|
||||
<div className="workout-card" onClick={() => onStartWorkout(todayWorkout)}>
|
||||
<div className="workout-card-header">
|
||||
@@ -161,15 +161,27 @@ function Dashboard({ onStartWorkout, onNavigate }) {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rest-day-card">
|
||||
<div className="rest-icon">🧘</div>
|
||||
<h3>Vilodag</h3>
|
||||
<p>Inga pass schemalagda. Fokusera på återhämtning!</p>
|
||||
<div className="rest-tips">
|
||||
<span>💤 Sömn</span>
|
||||
<span>🥗 Näring</span>
|
||||
<span>🚶 Lätt rörelse</span>
|
||||
<div className="workout-list">
|
||||
{program?.days?.map((workout) => (
|
||||
<div
|
||||
key={workout.id}
|
||||
className="workout-card compact"
|
||||
onClick={() => onStartWorkout(workout)}
|
||||
>
|
||||
<div className="workout-card-header">
|
||||
<h3>{workout.name}</h3>
|
||||
<span className="workout-day">Dag {workout.day_number}</span>
|
||||
</div>
|
||||
<div className="workout-exercises compact">
|
||||
{workout.exercises?.filter(e => e.name).slice(0, 3).map((ex, i) => (
|
||||
<span key={i} className="exercise-tag">{ex.name}</span>
|
||||
))}
|
||||
{workout.exercises?.filter(e => e.name).length > 3 && (
|
||||
<span className="exercise-tag more">+{workout.exercises.filter(e => e.name).length - 3}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user