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

Update empty states

Browse source
This commit is contained in:
Justin Edmund 2025-06-10 09:15:09 -07:00
parent 03eba54fe5
commit 78ae1d0756
3 changed files with 47 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/lib/components/UniverseFeed.svelte
View file

@ -16,8 +16,11 @@
{/if}
{/each}
{:else}
<div class="empty-state">
<p>No content found in the universe yet.</p>
<div class="empty-container">
<div class="empty-message">
<h2>No posts yet</h2>
<p>Posts will be added to Universe soon</p>
</div>
</div>
{/if}
</div>
@ -29,14 +32,28 @@
gap: $unit-3x;
}
.empty-state {
.empty-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
}
.empty-message {
text-align: center;
padding: $unit-6x $unit-3x;
color: $grey-40;
max-width: 500px;
h2 {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 $unit-2x;
color: $grey-10;
}
p {
margin: 0;
font-size: 1.125rem;
color: $grey-40;
line-height: 1.5;
}
}
</style>

32
src/routes/labs/+page.svelte
View file

@ -10,14 +10,18 @@
<div class="labs-container">
{#if error}
<div class="error-message">
<h2>Unable to load projects</h2>
<p>{error}</p>
<div class="error-container">
<div class="error-message">
<h2>Unable to load projects</h2>
<p>{error}</p>
</div>
</div>
{:else if projects.length === 0}
<div class="empty-message">
<h2>No projects yet</h2>
<p>Labs projects will appear here once published.</p>
<div class="empty-container">
<div class="empty-message">
<h2>No projects yet</h2>
<p>Projects will be added to Labs soon</p>
</div>
</div>
{:else}
<div class="projects-grid">
@ -49,10 +53,18 @@
}
}
.error-container,
.empty-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
}
.error-message,
.empty-message {
text-align: center;
padding: $unit-6x $unit-3x;
max-width: 500px;
h2 {
font-size: 1.5rem;
@ -68,7 +80,9 @@
}
}
.error-message h2 {
color: $red-60;
.error-message {
h2 {
color: $red-60;
}
}
</style>

2
src/routes/photos/+page.svelte
View file

@ -20,7 +20,7 @@
<div class="empty-container">
<div class="empty-message">
<h2>No photos yet</h2>
<p>Photography albums will appear here once published.</p>
<p>Photos and albums will be added soon</p>
</div>
</div>
{:else}