20256426/Map-Jurnal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: proper 2-column layout with scroll, header above columns, side padding

Browse Source
This commit is contained in:
haerikimmm
2026-06-16 19:33:50 +09:00
parent d157055ab7
commit 6f41f6e53e
1 changed files with 64 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/lib/timeline/TimelineView.svelte
View File

@@ -65,54 +65,56 @@
/>
</div>
{:else}
<div class="two-col">
<div class="left-col">
<div class="page-header">
<h1 class="page-title">My Journey</h1>
<button class="new-btn" onclick={() => { view = 'new'; }}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
<path d="M12 5v14M5 12h14"/>
</svg>
Add trip
</button>
</div>
<TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
{#if sortedEntries.length === 0}
<p class="empty">No journal entries yet.</p>
{:else}
<div class="sort-row">
<span class="sort-label">Sort by</span>
<select class="sort-select" onchange={(e) => (sortKey = e.currentTarget.value)}>
<option value="date-desc" selected={sortKey === 'date-desc'}>Newest first</option>
<option value="date-asc" selected={sortKey === 'date-asc'}>Oldest first</option>
<option value="country-asc" selected={sortKey === 'country-asc'}>Country A → Z</option>
<option value="country-desc" selected={sortKey === 'country-desc'}>Country Z → A</option>
</select>
</div>
<ol class="v-list">
{#each sortedEntries as entry, i (entry.id)}
{#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
<li class="year-marker" aria-hidden="true">
<span class="year-label">{getYear(entry.date)}</span>
</li>
{/if}
<TimelineCard {entry} onClick={() => { selectedId = entry.id; view = 'detail'; onDetailChange(true); }} />
{/each}
</ol>
{/if}
<footer class="page-footer">
{sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
</footer>
<div class="list-view">
<div class="page-header">
<h1 class="page-title">My Journey</h1>
<button class="new-btn" onclick={() => { view = 'new'; }}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
<path d="M12 5v14M5 12h14"/>
</svg>
Add trip
</button>
</div>
{#if sortedEntries.length > 0}
<div class="right-col">
<SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
<div class="two-col">
<div class="left-col">
<TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
{#if sortedEntries.length === 0}
<p class="empty">No journal entries yet.</p>
{:else}
<div class="sort-row">
<span class="sort-label">Sort by</span>
<select class="sort-select" onchange={(e) => (sortKey = e.currentTarget.value)}>
<option value="date-desc" selected={sortKey === 'date-desc'}>Newest first</option>
<option value="date-asc" selected={sortKey === 'date-asc'}>Oldest first</option>
<option value="country-asc" selected={sortKey === 'country-asc'}>Country A → Z</option>
<option value="country-desc" selected={sortKey === 'country-desc'}>Country Z → A</option>
</select>
</div>
<ol class="v-list">
{#each sortedEntries as entry, i (entry.id)}
{#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
<li class="year-marker" aria-hidden="true">
<span class="year-label">{getYear(entry.date)}</span>
</li>
{/if}
<TimelineCard {entry} onClick={() => { selectedId = entry.id; view = 'detail'; onDetailChange(true); }} />
{/each}
</ol>
{/if}
<footer class="page-footer">
{sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
</footer>
</div>
{/if}
{#if sortedEntries.length > 0}
<div class="right-col">
<SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
</div>
{/if}
</div>
</div>
{/if}
@@ -132,41 +134,42 @@
overflow: hidden;
}
/* ── Two-column layout ── */
.two-col {
/* ── List view wrapper (scrollable) ── */
.list-view {
flex: 1;
overflow-y: auto;
padding: 48px 48px 80px;
box-sizing: border-box;
min-width: 0;
}
/* ── Two-column below header ── */
.two-col {
display: flex;
flex-direction: row;
min-width: 0;
height: 100%;
overflow: hidden;
gap: 32px;
align-items: flex-start;
margin-top: 24px;
}
.left-col {
flex: 1;
min-width: 0;
overflow-y: auto;
padding: 48px 48px 80px;
box-sizing: border-box;
max-width: 680px;
}
.right-col {
width: 280px;
width: 260px;
flex-shrink: 0;
overflow-y: auto;
padding: 48px 24px 80px;
border-left: 1px solid var(--border);
box-sizing: border-box;
position: sticky;
top: 0;
}
@media (max-width: 900px) {
.right-col { display: none; }
.left-col { max-width: 100%; }
}
@media (max-width: 760px) {
.left-col { padding: 32px 24px 60px; }
.list-view { padding: 32px 24px 60px; }
}
/* ── Detail view ── */