149 lines
4.4 KiB
Svelte
149 lines
4.4 KiB
Svelte
<script>
|
|
import PhotoGallery from '../shared/PhotoGallery.svelte';
|
|
|
|
/** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onClick: () => void }} */
|
|
let { entry, onClick } = $props();
|
|
|
|
function formatDate(/** @type {string} */ iso) {
|
|
return new Date(iso).toLocaleDateString('en-US', {
|
|
year: 'numeric', month: 'short', day: 'numeric',
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<li class="v-item">
|
|
<div class="v-dot" aria-hidden="true"></div>
|
|
<div class="v-entry-wrap">
|
|
<div class="above-card">
|
|
<time class="above-date" datetime={entry.date}>{formatDate(entry.date)}</time>
|
|
<span class="above-sep">·</span>
|
|
<span class="above-loc">{entry.location.city}, {entry.location.country}</span>
|
|
<span class="above-sep">·</span>
|
|
<span class="above-days">{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
|
|
</div>
|
|
|
|
<div class="entry-card" role="button" tabindex="0"
|
|
onclick={onClick}
|
|
onkeydown={(e) => e.key === 'Enter' && onClick()}>
|
|
|
|
<PhotoGallery photos={entry.photos} height="220px" />
|
|
|
|
<div class="entry-body">
|
|
<h2 class="entry-title">{entry.title}</h2>
|
|
{#if entry.memo}
|
|
<p class="entry-memo">{entry.memo}</p>
|
|
{/if}
|
|
<div class="entry-song">
|
|
<svg class="song-icon" width="13" height="13" viewBox="0 0 24 24" fill="none">
|
|
<path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
<span class="song-title">{entry.song.title}</span>
|
|
<span class="song-sep">·</span>
|
|
<span class="song-artist">{entry.song.artist}</span>
|
|
<span class="trip-badge trip-badge--{entry.tripType}">
|
|
{entry.tripType === 'solo' ? 'Solo' : 'With Friends'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<style>
|
|
/* Above-card meta */
|
|
.above-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 8px;
|
|
}
|
|
.above-date { font-size: 12px; font-weight: 500; color: var(--text-h, #08060d); }
|
|
.above-loc, .above-days { font-size: 12px; color: var(--text, #6b6375); }
|
|
.above-sep { font-size: 11px; color: var(--border, #c8c6cc); user-select: none; }
|
|
|
|
/* Card */
|
|
.entry-card {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--border, #e5e4e7);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
background: var(--bg, #fff);
|
|
cursor: pointer;
|
|
transition: box-shadow 0.2s, transform 0.15s;
|
|
text-align: left;
|
|
}
|
|
.entry-card:hover {
|
|
box-shadow: 0 6px 24px rgba(0,0,0,0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.entry-body { padding: 14px 18px 18px; }
|
|
|
|
.entry-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-h, #08060d);
|
|
margin: 0 0 6px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.entry-memo {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--text, #6b6375);
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.entry-song {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 12px;
|
|
color: var(--text, #6b6375);
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--border, #e5e4e7);
|
|
}
|
|
.song-icon { flex-shrink: 0; color: var(--accent, #aa3bff); }
|
|
.song-title { font-weight: 500; color: var(--text-h, #08060d); }
|
|
.song-sep { opacity: 0.35; }
|
|
|
|
.entry-song .trip-badge { margin-left: auto; flex-shrink: 0; }
|
|
.trip-badge {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
padding: 2px 8px;
|
|
border-radius: 20px;
|
|
}
|
|
.trip-badge--solo { background: rgba(245,158,11,0.12); color: #b45309; }
|
|
.trip-badge--friends { background: rgba(59,130,246,0.12); color: #1d4ed8; }
|
|
|
|
/* Timeline line & dot */
|
|
.v-item { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 36px; }
|
|
.v-item:last-child { padding-bottom: 0; }
|
|
|
|
.v-dot {
|
|
flex-shrink: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: var(--accent, #aa3bff);
|
|
border: 3px solid var(--bg, #fff);
|
|
box-shadow: 0 0 0 2px var(--accent, #aa3bff);
|
|
margin-top: 28px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.v-entry-wrap { flex: 1; display: flex; flex-direction: column; }
|
|
|
|
@media (max-width: 600px) {
|
|
.v-dot { width: 18px; height: 18px; }
|
|
.v-item { gap: 16px; }
|
|
}
|
|
</style>
|