feat(story-2.4): home screen device list with FrameCard component
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
- FrameCard: large (single device, 5:3 preview + Add Photo CTA) and compact (52px thumb + name + count + icon pill) variants; WCAG- compliant offline/sync-fail status (color + text, never color alone) - devices Pinia store: fetchDevices() → GET /api/devices - HomeView: 0 devices → dashed empty-state card; 1 device → large FrameCard; 2+ → compact stack; add-photo wired (Epic 3 stub) - Fix Device type: rotationInterval → rotationIntervalHours to match API Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'frame-card',
|
||||
`frame-card--${size}`,
|
||||
status !== 'ok' && `frame-card--${status}`,
|
||||
]"
|
||||
>
|
||||
<!-- Status badge (color + text — never color alone) -->
|
||||
<div v-if="status !== 'ok'" class="frame-card__status-badge" aria-live="polite">
|
||||
<span class="frame-card__status-dot" aria-hidden="true" />
|
||||
{{ status === 'offline' ? 'Offline' : 'Sync issue' }}
|
||||
</div>
|
||||
|
||||
<!-- Preview area -->
|
||||
<div class="frame-card__preview">
|
||||
<img
|
||||
v-if="thumbnailUrl"
|
||||
:src="thumbnailUrl"
|
||||
:alt="`Current photo on ${name}`"
|
||||
class="frame-card__img"
|
||||
/>
|
||||
<div v-else class="frame-card__empty-preview" aria-hidden="true">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<polyline points="21,15 16,10 5,21"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frame-card__body">
|
||||
<p class="frame-card__name">{{ name }}</p>
|
||||
<p v-if="size === 'compact'" class="frame-card__count">
|
||||
{{ photoCount }} {{ photoCount === 1 ? 'photo' : 'photos' }}
|
||||
</p>
|
||||
|
||||
<BaseButton
|
||||
:variant="size === 'large' ? 'primary' : 'icon-pill'"
|
||||
:aria-label="size === 'large' ? `Add photo to ${name}` : `Add photo to ${name}`"
|
||||
class="frame-card__add-btn"
|
||||
@click="$emit('add-photo', deviceId)"
|
||||
>
|
||||
<span v-if="size === 'large'">+ Add Photo</span>
|
||||
<span v-else aria-hidden="true">+</span>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
|
||||
defineProps<{
|
||||
deviceId: number
|
||||
name: string
|
||||
size: 'large' | 'compact'
|
||||
status: 'ok' | 'offline' | 'sync-fail'
|
||||
thumbnailUrl?: string
|
||||
photoCount?: number
|
||||
}>()
|
||||
|
||||
defineEmits<{ 'add-photo': [deviceId: number] }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.frame-card {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
transition: border-color var(--duration-fast);
|
||||
|
||||
&--offline { border-color: #c0392b; }
|
||||
&--sync-fail { border-color: #c49a20; }
|
||||
|
||||
&__status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
background: var(--color-surface-2);
|
||||
|
||||
.frame-card--offline & { color: #c0392b; }
|
||||
.frame-card--sync-fail & { color: #8a6a00; }
|
||||
}
|
||||
|
||||
&__status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
.frame-card--offline & { background: #c0392b; }
|
||||
.frame-card--sync-fail & { background: #c49a20; }
|
||||
}
|
||||
|
||||
// ── Large (single device) ────────────────────────────────────────────────
|
||||
&--large &__preview {
|
||||
aspect-ratio: 5/3;
|
||||
background: var(--color-surface-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--large &__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&--large &__empty-preview {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&--large &__body {
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
&--large &__name {
|
||||
font-size: var(--text-md);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// ── Compact (multi device) ───────────────────────────────────────────────
|
||||
&--compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
&--compact &__preview {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-2);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&--compact &__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&--compact &__empty-preview {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&--compact &__body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
&--compact &__name {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--compact &__count {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
&__add-btn { flex-shrink: 0; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user