fix: journal tab name, 2-column layout with SharePreview on right
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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 ── */
|
||||||
|
|||||||
Reference in New Issue
Block a user