jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: update album page layout to match project case study design

Browse source 
- Wrap album and photo content in Page component
- Use consistent white rounded rectangle container
- Update styles to work with Page component structure
- Improve visual hierarchy and spacing
- Match the design pattern used in project pages

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-06-24 02:05:36 +01:00
parent a9cbdbf280
commit 3654a18cbe
1 changed files with 106 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

233
src/routes/photos/[slug]/+page.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import Page from '$components/Page.svelte'
import MasonryPhotoGrid from '$components/MasonryPhotoGrid.svelte' import MasonryPhotoGrid from '$components/MasonryPhotoGrid.svelte'
import BackButton from '$components/BackButton.svelte' import BackButton from '$components/BackButton.svelte'
import { generateMetaTags, generateImageGalleryJsonLd } from '$lib/utils/metadata' import { generateMetaTags, generateImageGalleryJsonLd } from '$lib/utils/metadata'
@ -165,160 +166,147 @@
{#if error} {#if error}
<div class="error-container"> <div class="error-container">
<div class="error-message"> <Page>
<h1>Not Found</h1> <div class="error-message">
<p>{error}</p> <h1>Not Found</h1>
<BackButton href="/photos" label="Back to Photos" /> <p>{error}</p>
</div> <BackButton href="/photos" label="Back to Photos" />
</div>
</Page>
</div> </div>
{:else if type === 'album' && album} {:else if type === 'album' && album}
<div class="album-page"> <div class="album-wrapper">
<!-- Album Card --> <Page>
<div class="album-card"> {#snippet header()}
<h1 class="album-title">{album.title}</h1> <div class="album-header">
<h1 class="album-title">{album.title}</h1>
{#if album.description} {#if album.description}
<p class="album-description">{album.description}</p> <p class="album-description">{album.description}</p>
{/if} {/if}
<div class="album-meta"> <div class="album-meta">
{#if album.date} {#if album.date}
<span class="meta-item">📅 {formatDate(album.date)}</span> <span class="meta-item">📅 {formatDate(album.date)}</span>
{/if} {/if}
{#if album.location} {#if album.location}
<span class="meta-item">📍 {album.location}</span> <span class="meta-item">📍 {album.location}</span>
{/if} {/if}
<span class="meta-item" <span class="meta-item"
>📷 {album.photos?.length || 0} photo{(album.photos?.length || 0) !== 1 ? 's' : ''}</span >📷 {album.photos?.length || 0} photo{(album.photos?.length || 0) !== 1 ? 's' : ''}</span
> >
</div> </div>
</div> </div>
{/snippet}
<!-- Album Content -->
{#if album.content} <!-- Album Content -->
<div class="album-content-wrapper"> {#if album.content}
<div class="edra-rendered-content"> <div class="album-content">
{@html renderEdraContent(album.content)} <div class="edra-rendered-content">
{@html renderEdraContent(album.content)}
</div>
</div> </div>
</div>
{:else}
<!-- Legacy Photo Grid (for albums without composed content) -->
{#if photoItems.length > 0}
<MasonryPhotoGrid {photoItems} albumSlug={album.slug} />
{:else} {:else}
<div class="empty-album"> <!-- Legacy Photo Grid (for albums without composed content) -->
<p>This album doesn't contain any photos yet.</p> {#if photoItems.length > 0}
</div> <div class="legacy-photos">
<MasonryPhotoGrid {photoItems} albumSlug={album.slug} />
</div>
{:else}
<div class="empty-album">
<p>This album doesn't contain any photos yet.</p>
</div>
{/if}
{/if} {/if}
{/if} </Page>
</div> </div>
{:else if type === 'photo' && photo} {:else if type === 'photo' && photo}
<div class="photo-page"> <div class="photo-wrapper">
<div class="photo-header"> <Page>
<BackButton href="/photos" label="Back to Photos" /> <div class="photo-header">
</div> <BackButton href="/photos" label="Back to Photos" />
</div>
<div class="photo-container"> <div class="photo-container">
<img src={photo.url} alt={photo.title || photo.caption || 'Photo'} class="photo-image" /> <img src={photo.url} alt={photo.title || photo.caption || 'Photo'} class="photo-image" />
</div> </div>
<div class="photo-info"> <div class="photo-info">
{#if photo.title} {#if photo.title}
<h1 class="photo-title">{photo.title}</h1> <h1 class="photo-title">{photo.title}</h1>
{/if} {/if}
{#if photo.caption || photo.description} {#if photo.caption || photo.description}
<p class="photo-description">{photo.caption || photo.description}</p> <p class="photo-description">{photo.caption || photo.description}</p>
{/if} {/if}
{#if photo.exifData} {#if photo.exifData}
<div class="photo-exif"> <div class="photo-exif">
<!-- EXIF data could be displayed here --> <!-- EXIF data could be displayed here -->
</div> </div>
{/if} {/if}
</div> </div>
</Page>
</div> </div>
{/if} {/if}
<style lang="scss"> <style lang="scss">
.error-container { /* Container Styles */
display: flex; .error-container,
justify-content: center; .album-wrapper,
align-items: center; .photo-wrapper {
min-height: 60vh; width: 100%;
padding: $unit-6x $unit-3x; max-width: 900px;
margin: 0 auto;
padding: 0 $unit-2x;
box-sizing: border-box;
} }
.error-message { .error-message {
text-align: center; text-align: center;
max-width: 500px; padding: $unit-6x 0;
h1 { h1 {
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 600; font-weight: 600;
margin: 0 0 $unit-2x;
color: $red-60; color: $red-60;
margin: 0 0 $unit-2x;
} }
p { p {
margin: 0 0 $unit-3x;
color: $grey-40; color: $grey-40;
margin: 0 0 $unit-4x;
line-height: 1.5; line-height: 1.5;
} }
} }
.album-page { /* Album Styles */
width: 100%; .album-header {
max-width: 900px;
margin: 0 auto;
padding: 0 $unit-3x;
@include breakpoint('phone') {
padding: $unit-3x $unit-2x;
}
}
.album-card {
background: $grey-100;
border: 1px solid $grey-90;
border-radius: $card-corner-radius;
padding: $unit-6x;
margin-bottom: $unit-3x;
text-align: center; text-align: center;
padding-bottom: $unit-3x;
@include breakpoint('tablet') { border-bottom: 1px solid $grey-90;
margin-bottom: $unit-2x; margin-bottom: $unit-4x;
}
@include breakpoint('phone') {
padding: $unit-4x $unit-3x;
}
} }
.album-title { .album-title {
font-size: 2.25rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
margin: 0 0 $unit-2x; margin: 0 0 $unit-2x;
color: $grey-10; color: $grey-10;
@include breakpoint('phone') { @include breakpoint('phone') {
font-size: 1.875rem; font-size: 1.75rem;
} }
} }
.album-description { .album-description {
font-size: 1rem; font-size: 1rem;
color: $grey-30; color: $grey-30;
margin: 0 0 $unit-4x; margin: 0 0 $unit-3x;
line-height: 1.5; line-height: 1.5;
max-width: 600px; max-width: 600px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@include breakpoint('phone') {
font-size: 1rem;
margin-bottom: $unit-3x;
}
} }
.album-meta { .album-meta {
@ -340,18 +328,18 @@
} }
} }
.empty-album { .album-content {
text-align: center; padding: $unit-2x 0;
padding: $unit-6x $unit-3x;
color: $grey-40;
} }
.album-content-wrapper { .legacy-photos {
margin-top: $unit-4x; padding: $unit-2x 0;
}
@include breakpoint('phone') { .empty-album {
margin-top: $unit-3x; text-align: center;
} padding: $unit-6x 0;
color: $grey-40;
} }
.edra-rendered-content { .edra-rendered-content {
@ -475,17 +463,7 @@
} }
} }
.photo-page { /* Photo Page Styles */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: $unit-4x $unit-3x;
@include breakpoint('phone') {
padding: $unit-3x $unit-2x;
}
}
.photo-header { .photo-header {
margin-bottom: $unit-3x; margin-bottom: $unit-3x;
} }
@ -497,18 +475,16 @@
.photo-image { .photo-image {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: $card-corner-radius; border-radius: $unit;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
} }
} }
.photo-info { .photo-info {
max-width: 700px;
margin: 0 auto;
text-align: center; text-align: center;
.photo-title { .photo-title {
font-size: 2rem; font-size: 1.75rem;
font-weight: 700; font-weight: 700;
margin: 0 0 $unit-2x; margin: 0 0 $unit-2x;
color: $grey-10; color: $grey-10;
@ -522,7 +498,10 @@
font-size: 1rem; font-size: 1rem;
color: $grey-30; color: $grey-30;
line-height: 1.6; line-height: 1.6;
margin: 0 0 $unit-3x; margin: 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
} }
} }
</style> </style>