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

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

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

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

@ -20,7 +20,7 @@
<div class="empty-container"> <div class="empty-container">
<div class="empty-message"> <div class="empty-message">
<h2>No photos yet</h2> <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>
</div> </div>
{:else} {:else}