style(fitness/workout-fab): floating glass pill matching header
Redesign the active-workout footer as a floating glass pill that mirrors the site header — same backdrop-blur recipe, same token set, anchored to the bottom instead of the top. Inner controls recomposed: icon-only pause button, dominant elapsed time, subtle divider, label + chevron or rest-timer pill. Mount animation, hover-lift, reduced- motion fallback.
This commit is contained in:
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "homepage",
|
||||
"version": "1.47.3",
|
||||
"version": "1.47.4",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import Play from '@lucide/svelte/icons/play';
|
||||
import Pause from '@lucide/svelte/icons/pause';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import SyncIndicator from '$lib/components/fitness/SyncIndicator.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
|
||||
@@ -18,131 +19,324 @@ function formatRest(secs) {
|
||||
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
const restActive = $derived(restTotal > 0 && restSeconds > 0);
|
||||
const restProgress = $derived(restTotal > 0 ? restSeconds / restTotal : 0);
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="workout-bar" onclick={() => goto(href)} onkeydown={(e) => { if (e.key === 'Enter') goto(href); }}>
|
||||
<div class="bar-left">
|
||||
<button class="pause-btn" onclick={(e) => { e.stopPropagation(); onPauseToggle?.(); }} aria-label={paused ? 'Resume' : 'Pause'}>
|
||||
{#if paused}<Play size={16} />{:else}<Pause size={16} />{/if}
|
||||
</button>
|
||||
<span class="elapsed" class:paused>{elapsed}</span>
|
||||
<SyncIndicator status={syncStatus} />
|
||||
</div>
|
||||
{#if restTotal > 0 && restSeconds > 0}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
|
||||
<div class="rest-pill" onclick={(e) => e.stopPropagation()}>
|
||||
<div class="rest-fill" style:width="{restProgress * 100}%"></div>
|
||||
<div class="rest-controls">
|
||||
<button class="rest-adj" onclick={() => onRestAdjust?.(-30)}>-30s</button>
|
||||
<button class="rest-time" onclick={() => onRestSkip?.()}>{formatRest(restSeconds)}</button>
|
||||
<button class="rest-adj" onclick={() => onRestAdjust?.(30)}>+30s</button>
|
||||
</div>
|
||||
<div
|
||||
class="workout-fab"
|
||||
class:rest-active={restActive}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label={t('active_workout', lang)}
|
||||
onclick={() => goto(href)}
|
||||
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goto(href); } }}
|
||||
>
|
||||
<button
|
||||
class="pause-btn"
|
||||
onclick={(e) => { e.stopPropagation(); onPauseToggle?.(); }}
|
||||
aria-label={paused ? 'Resume' : 'Pause'}
|
||||
>
|
||||
{#if paused}<Play size={14} strokeWidth={2.4} />{:else}<Pause size={14} strokeWidth={2.4} />{/if}
|
||||
</button>
|
||||
|
||||
<span class="elapsed" class:paused>{elapsed}</span>
|
||||
|
||||
<span class="fab-sync"><SyncIndicator status={syncStatus} /></span>
|
||||
|
||||
<span class="fab-divider" aria-hidden="true"></span>
|
||||
|
||||
{#if restActive}
|
||||
<div class="rest-pill">
|
||||
<div class="rest-fill" style:width="{restProgress * 100}%" aria-hidden="true"></div>
|
||||
<button class="rest-adj" onclick={(e) => { e.stopPropagation(); onRestAdjust?.(-30); }} aria-label="Remove 30 seconds">−30s</button>
|
||||
<button class="rest-time" onclick={(e) => { e.stopPropagation(); onRestSkip?.(); }} aria-label="Skip rest">{formatRest(restSeconds)}</button>
|
||||
<button class="rest-adj" onclick={(e) => { e.stopPropagation(); onRestAdjust?.(30); }} aria-label="Add 30 seconds">+30s</button>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="bar-label">{t('active_workout', lang)}</span>
|
||||
<span class="fab-label">{t('active_workout', lang)}</span>
|
||||
<ChevronRight size={14} strokeWidth={2.4} class="fab-chevron" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.workout-bar {
|
||||
/* ═══════════════════════════════════════════
|
||||
FLOATING GLASS PILL — mirrors Header.svelte nav
|
||||
═══════════════════════════════════════════ */
|
||||
.workout-fab {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0.75rem var(--space-md, 1rem);
|
||||
background: var(--color-bg-primary);
|
||||
border-top: 1px solid var(--color-border);
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bar-left {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.pause-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
color: var(--color-text-secondary);
|
||||
height: 3rem;
|
||||
padding: 0 0.45rem 0 0.45rem;
|
||||
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
max-width: calc(100% - 1.5rem);
|
||||
margin-inline: auto;
|
||||
|
||||
border-radius: 100px;
|
||||
background: var(--fab-bg, rgba(46, 52, 64, 0.82));
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--fab-border, rgba(255, 255, 255, 0.08));
|
||||
box-shadow: 0 4px 24px var(--fab-shadow, rgba(0, 0, 0, 0.25));
|
||||
|
||||
cursor: pointer;
|
||||
padding: 0.3rem;
|
||||
display: flex;
|
||||
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
||||
box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
animation: fab-rise 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||||
|
||||
/* token defaults (dark bar) */
|
||||
--fab-text: #c9c9c9;
|
||||
--fab-text-strong: #fff;
|
||||
--fab-text-muted: rgba(255, 255, 255, 0.55);
|
||||
--fab-btn-bg: rgba(255, 255, 255, 0.08);
|
||||
--fab-btn-bg-hover: rgba(255, 255, 255, 0.16);
|
||||
--fab-btn-border: rgba(255, 255, 255, 0.14);
|
||||
--fab-divider: rgba(255, 255, 255, 0.12);
|
||||
--fab-accent: var(--blue, #5e81ac);
|
||||
--fab-paused: var(--nord13, #ebcb8b);
|
||||
}
|
||||
|
||||
.workout-fab:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 28px var(--fab-shadow, rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
.workout-fab:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.workout-fab {
|
||||
--fab-bg: rgba(20, 20, 20, 0.78);
|
||||
--fab-border: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
}
|
||||
:global(:root[data-theme="dark"]) .workout-fab {
|
||||
--fab-bg: rgba(20, 20, 20, 0.78);
|
||||
--fab-border: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
:global(:root[data-theme="light"]) .workout-fab {
|
||||
--fab-bg: rgba(255, 255, 255, 0.82);
|
||||
--fab-border: rgba(0, 0, 0, 0.08);
|
||||
--fab-shadow: rgba(0, 0, 0, 0.1);
|
||||
--fab-text: #555;
|
||||
--fab-text-strong: var(--nord0, #2e3440);
|
||||
--fab-text-muted: rgba(0, 0, 0, 0.5);
|
||||
--fab-btn-bg: rgba(0, 0, 0, 0.05);
|
||||
--fab-btn-bg-hover: rgba(0, 0, 0, 0.1);
|
||||
--fab-btn-border: rgba(0, 0, 0, 0.12);
|
||||
--fab-divider: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:global(:root:not([data-theme])) .workout-fab {
|
||||
--fab-bg: rgba(255, 255, 255, 0.82);
|
||||
--fab-border: rgba(0, 0, 0, 0.08);
|
||||
--fab-shadow: rgba(0, 0, 0, 0.1);
|
||||
--fab-text: #555;
|
||||
--fab-text-strong: var(--nord0, #2e3440);
|
||||
--fab-text-muted: rgba(0, 0, 0, 0.5);
|
||||
--fab-btn-bg: rgba(0, 0, 0, 0.05);
|
||||
--fab-btn-bg-hover: rgba(0, 0, 0, 0.1);
|
||||
--fab-btn-border: rgba(0, 0, 0, 0.12);
|
||||
--fab-divider: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
PAUSE BUTTON — small pill icon button (matches nav hover tile)
|
||||
═══════════════════════════════════════════ */
|
||||
.pause-btn {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 100px;
|
||||
background: var(--fab-btn-bg);
|
||||
border: 1px solid var(--fab-btn-border);
|
||||
color: var(--fab-text-strong);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: background 140ms, color 140ms, transform 120ms;
|
||||
}
|
||||
.pause-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
background: var(--fab-btn-bg-hover);
|
||||
color: var(--fab-accent);
|
||||
}
|
||||
.pause-btn:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
ELAPSED TIME — dominant numeric
|
||||
═══════════════════════════════════════════ */
|
||||
.elapsed {
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--fab-text-strong);
|
||||
padding-inline: 0.15rem;
|
||||
}
|
||||
.elapsed.paused {
|
||||
color: var(--nord13);
|
||||
color: var(--fab-paused);
|
||||
}
|
||||
.bar-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
.fab-sync {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--fab-text-muted);
|
||||
}
|
||||
|
||||
.fab-divider {
|
||||
width: 1px;
|
||||
height: 1.2rem;
|
||||
background: var(--fab-divider);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
RIGHT-SIDE LABEL / CHEVRON — idle state
|
||||
═══════════════════════════════════════════ */
|
||||
.fab-label {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--fab-text);
|
||||
padding-right: 0.15rem;
|
||||
}
|
||||
|
||||
.workout-fab :global(.fab-chevron) {
|
||||
color: var(--fab-text-muted);
|
||||
margin-right: 0.35rem;
|
||||
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 140ms;
|
||||
}
|
||||
.workout-fab:hover :global(.fab-chevron) {
|
||||
color: var(--fab-text-strong);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
REST PILL — inner pill with animated progress fill
|
||||
═══════════════════════════════════════════ */
|
||||
.rest-pill {
|
||||
position: relative;
|
||||
height: 2.2rem;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
height: 2.1rem;
|
||||
padding: 0 0.25rem;
|
||||
border-radius: 100px;
|
||||
background: var(--fab-btn-bg);
|
||||
overflow: hidden;
|
||||
background: var(--nord0);
|
||||
min-width: 10rem;
|
||||
isolation: isolate;
|
||||
}
|
||||
.rest-fill {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--blue);
|
||||
border-radius: 8px;
|
||||
right: auto;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
color-mix(in srgb, var(--fab-accent), transparent 55%) 0%,
|
||||
var(--fab-accent) 100%
|
||||
);
|
||||
transition: width 1s linear;
|
||||
z-index: -1;
|
||||
}
|
||||
.rest-controls {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.rest-time {
|
||||
.rest-time,
|
||||
.rest-adj {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--fab-text-strong);
|
||||
font-family: inherit;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 100px;
|
||||
transition: background 120ms;
|
||||
}
|
||||
.rest-time {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0.5rem;
|
||||
letter-spacing: 0.01em;
|
||||
min-width: 3.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.rest-adj {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
opacity: 0.7;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.rest-time:hover,
|
||||
.rest-adj:hover {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
opacity: 1;
|
||||
}
|
||||
:global(:root[data-theme="light"]) .rest-time:hover,
|
||||
:global(:root[data-theme="light"]) .rest-adj:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
MOUNT ANIMATION
|
||||
═══════════════════════════════════════════ */
|
||||
@keyframes fab-rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(24px) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
NARROW SCREENS — tighten spacing
|
||||
═══════════════════════════════════════════ */
|
||||
@media (max-width: 420px) {
|
||||
.workout-fab {
|
||||
gap: 0.4rem;
|
||||
padding: 0 0.35rem;
|
||||
}
|
||||
.fab-label {
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.elapsed {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.rest-pill {
|
||||
gap: 0.1rem;
|
||||
}
|
||||
.rest-adj {
|
||||
padding: 0.25rem 0.35rem;
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.workout-fab {
|
||||
animation: none;
|
||||
}
|
||||
.workout-fab:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user