changed the location of the travel summary to left
This commit is contained in:
haerikimmm
@@ -8,7 +8,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
let mainPhoto = $derived(entry.photos[0] ?? null);
|
||||
let mainPhoto = $derived(entry.photos[0] ?? null);
|
||||
let thumbPhotos = $derived(entry.photos.slice(1, 4));
|
||||
let extraCount = $derived(entry.photos.length > 4 ? entry.photos.length - 4 : 0);
|
||||
</script>
|
||||
@@ -20,20 +20,18 @@
|
||||
onclick={onClick}
|
||||
onkeydown={(e) => e.key === 'Enter' && onClick()}>
|
||||
|
||||
<!-- Photo grid -->
|
||||
<div class="photo-grid" class:has-thumbs={thumbPhotos.length > 0}>
|
||||
<div class="photo-main">
|
||||
{#if mainPhoto}
|
||||
<img src={mainPhoto} alt="photo 1" loading="lazy" />
|
||||
<img src={mainPhoto} alt="" loading="lazy" />
|
||||
{:else}
|
||||
<div class="photo-placeholder"></div>
|
||||
{/if}
|
||||
|
||||
<!-- Overlay -->
|
||||
<div class="overlay">
|
||||
<div class="overlay-top">
|
||||
<span class="trip-badge trip-badge--{entry.tripType}">
|
||||
{entry.tripType === 'solo' ? 'Solo' : 'With Friends'}
|
||||
{entry.tripType === 'solo' ? 'Solo' : 'Friends'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="overlay-bottom">
|
||||
@@ -48,7 +46,7 @@
|
||||
<div class="photo-thumbs">
|
||||
{#each thumbPhotos as photo, i}
|
||||
<div class="photo-thumb">
|
||||
<img src={photo} alt="photo {i + 2}" loading="lazy" />
|
||||
<img src={photo} alt="" loading="lazy" />
|
||||
{#if i === 2 && extraCount > 0}
|
||||
<div class="extra-overlay">+{extraCount}</div>
|
||||
{/if}
|
||||
@@ -64,50 +62,76 @@
|
||||
<style>
|
||||
.v-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.v-item:last-child { padding-bottom: 0; }
|
||||
.v-item:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 30px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.v-dot {
|
||||
flex-shrink: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-top: 22px;
|
||||
background: var(--bg);
|
||||
border: 1.5px solid var(--accent);
|
||||
margin-top: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
/* ── Card ── */
|
||||
.entry-card {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border-radius: 16px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
background: var(--bg-raised);
|
||||
transition: box-shadow 0.2s, transform 0.15s;
|
||||
box-shadow: 0 2px 12px rgba(99,102,241,0.08);
|
||||
}
|
||||
.entry-card:hover {
|
||||
box-shadow: var(--shadow);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Photo grid */
|
||||
/* ── Photo grid — fluid, breakpoint via container width ── */
|
||||
.photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
height: 220px;
|
||||
background: #111;
|
||||
/* height adapts: taller when single photo */
|
||||
height: 200px;
|
||||
background: var(--bg-subtle);
|
||||
}
|
||||
.photo-grid.has-thumbs {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 2px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* Main photo + overlay */
|
||||
/* Collapse to single column on narrow cards (< 340px) */
|
||||
@container card (max-width: 340px) {
|
||||
.photo-grid.has-thumbs {
|
||||
grid-template-columns: 1fr;
|
||||
height: 180px;
|
||||
}
|
||||
.photo-thumbs { display: none; }
|
||||
}
|
||||
|
||||
.entry-card { container-type: inline-size; container-name: card; }
|
||||
|
||||
/* ── Main photo ── */
|
||||
.photo-main {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -122,68 +146,61 @@
|
||||
}
|
||||
.photo-placeholder { background: var(--accent-bg); }
|
||||
|
||||
/* ── Overlay gradient ── */
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 14px;
|
||||
padding: 12px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0,0,0,0.28) 0%,
|
||||
rgba(0,0,0,0.22) 0%,
|
||||
transparent 35%,
|
||||
transparent 50%,
|
||||
rgba(0,0,0,0.65) 100%
|
||||
rgba(0,0,0,0.6) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.overlay-top {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.overlay-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.overlay-top { display: flex; justify-content: flex-end; }
|
||||
.overlay-bottom { display: flex; flex-direction: column; gap: 2px; }
|
||||
|
||||
.city {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: rgba(255,255,255,0.75);
|
||||
color: rgba(255,255,255,0.8);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.country {
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
letter-spacing: -0.5px;
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.1;
|
||||
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
|
||||
text-shadow: 0 1px 6px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: rgba(255,255,255,0.7);
|
||||
margin-top: 4px;
|
||||
margin-top: 3px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
/* ── Trip badge ── */
|
||||
.trip-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
padding: 3px 10px;
|
||||
font-weight: 300;
|
||||
padding: 2px 9px;
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(8px);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.trip-badge--solo { background: rgba(245,158,11,0.75); color: #fff; }
|
||||
.trip-badge--friends { background: rgba(99,102,241,0.75); color: #fff; }
|
||||
.trip-badge--solo { background: rgba(245,158,11,0.7); color: #fff; }
|
||||
.trip-badge--friends { background: rgba(124,58,237,0.7); color: #fff; }
|
||||
|
||||
/* Thumbs */
|
||||
/* ── Thumbs ── */
|
||||
.photo-thumbs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -205,11 +222,11 @@
|
||||
.extra-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
background: rgba(0,0,0,0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user