fix: journal tab name, 2-column layout with SharePreview on right

This commit is contained in:
haerikimmm
2026-06-16 19:32:34 +09:00
parent 76d7e815c3
commit d157055ab7
2 changed files with 33 additions and 23 deletions

View File

@@ -31,7 +31,7 @@
style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);" style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);"
></div> ></div>
<button class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Worldmap</button> <button class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Worldmap</button>
<button class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Timeline</button> <button class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Journal</button>
</div> </div>
</div> </div>

View File

@@ -65,8 +65,8 @@
/> />
</div> </div>
{:else} {:else}
<div class="right-panel"> <div class="two-col">
<div class="center-col"> <div class="left-col">
<div class="page-header"> <div class="page-header">
<h1 class="page-title">My Journey</h1> <h1 class="page-title">My Journey</h1>
<button class="new-btn" onclick={() => { view = 'new'; }}> <button class="new-btn" onclick={() => { view = 'new'; }}>
@@ -77,12 +77,6 @@
</button> </button>
</div> </div>
{#if sortedEntries.length > 0}
<div class="share-row">
<SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
</div>
{/if}
<TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} /> <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
{#if sortedEntries.length === 0} {#if sortedEntries.length === 0}
@@ -113,6 +107,12 @@
{sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'} {sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
</footer> </footer>
</div> </div>
{#if sortedEntries.length > 0}
<div class="right-col">
<SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
</div>
{/if}
</div> </div>
{/if} {/if}
@@ -132,31 +132,41 @@
overflow: hidden; overflow: hidden;
} }
/* ── Right panel ── */ /* ── Two-column layout ── */
.right-panel { .two-col {
flex: 1;
display: flex;
flex-direction: row;
min-width: 0;
height: 100%;
overflow: hidden;
}
.left-col {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow-y: auto; overflow-y: auto;
background: var(--bg); padding: 48px 48px 80px;
box-sizing: border-box;
max-width: 680px;
} }
/* ── Centered single column ── */ .right-col {
.center-col { width: 280px;
max-width: 680px; flex-shrink: 0;
width: 100%; overflow-y: auto;
margin: 0 auto; padding: 48px 24px 80px;
padding: 48px 48px 80px; border-left: 1px solid var(--border);
box-sizing: border-box; box-sizing: border-box;
} }
.share-row { @media (max-width: 900px) {
margin-bottom: 24px; .right-col { display: none; }
.left-col { max-width: 100%; }
} }
@media (max-width: 760px) { @media (max-width: 760px) {
.center-col { .left-col { padding: 32px 24px 60px; }
padding: 32px 24px 60px;
}
} }
/* ── Detail view ── */ /* ── Detail view ── */