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;
|
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 */}
|
{/* Today's Workout */}
|
||||||
<section className="todays-workout">
|
<section className="todays-workout">
|
||||||
<h2>Dagens pass</h2>
|
<h2>{todayWorkout ? 'Dagens pass' : 'Välj pass'}</h2>
|
||||||
{todayWorkout ? (
|
{todayWorkout ? (
|
||||||
<div className="workout-card" onClick={() => onStartWorkout(todayWorkout)}>
|
<div className="workout-card" onClick={() => onStartWorkout(todayWorkout)}>
|
||||||
<div className="workout-card-header">
|
<div className="workout-card-header">
|
||||||
@@ -161,15 +161,27 @@ function Dashboard({ onStartWorkout, onNavigate }) {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="rest-day-card">
|
<div className="workout-list">
|
||||||
<div className="rest-icon">🧘</div>
|
{program?.days?.map((workout) => (
|
||||||
<h3>Vilodag</h3>
|
<div
|
||||||
<p>Inga pass schemalagda. Fokusera på återhämtning!</p>
|
key={workout.id}
|
||||||
<div className="rest-tips">
|
className="workout-card compact"
|
||||||
<span>💤 Sömn</span>
|
onClick={() => onStartWorkout(workout)}
|
||||||
<span>🥗 Näring</span>
|
>
|
||||||
<span>🚶 Lätt rörelse</span>
|
<div className="workout-card-header">
|
||||||
|
<h3>{workout.name}</h3>
|
||||||
|
<span className="workout-day">Dag {workout.day_number}</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user