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

Button unification

Browse source
This commit is contained in:
Justin Edmund 2025-06-10 19:09:23 -07:00
parent 90735d2c83
commit bbced97929
3 changed files with 59 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/LabCard.svelte
View file

@ -67,7 +67,7 @@
iconPosition="right" iconPosition="right"
on:click={(e) => e.stopPropagation()} on:click={(e) => e.stopPropagation()}
> >
Visit site Visit
<svg <svg
slot="icon" slot="icon"
width="16" width="16"
@ -234,6 +234,8 @@
:global(.btn) { :global(.btn) {
flex-shrink: 0; flex-shrink: 0;
margin-top: 2px; // Align with title baseline margin-top: 2px; // Align with title baseline
font-size: 1rem !important; // Match detail page Visit button
min-height: auto !important; // Remove min-height to match detail page
} }
} }

4
src/lib/components/ProjectHeaderContent.svelte
View file

@ -19,7 +19,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="visit-button" class="visit-button"
style="--button-bg: {project.highlightColor || '#4d4d4d'}; --button-color: white" style="--button-bg: {project.highlightColor || '#e33d3d'}; --button-color: white"
> >
Visit <ArrowRight /> Visit <ArrowRight />
</a> </a>
@ -75,7 +75,7 @@
align-items: center; align-items: center;
gap: $unit; gap: $unit;
padding: ($unit * 1.5) $unit-2x; padding: ($unit * 1.5) $unit-2x;
background: var(--button-bg, $grey-10); background: var(--button-bg, $red-60);
color: var(--button-color, white); color: var(--button-color, white);
text-decoration: none; text-decoration: none;
border-radius: 50px; border-radius: 50px;

168
src/routes/labs/[slug]/+page.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import Page from '$components/Page.svelte' import Page from '$components/Page.svelte'
import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte' import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte'
import ProjectHeaderContent from '$lib/components/ProjectHeaderContent.svelte'
import ProjectContent from '$lib/components/ProjectContent.svelte' import ProjectContent from '$lib/components/ProjectContent.svelte'
import type { PageData } from './$types' import type { PageData } from './$types'
import type { Project } from '$lib/types/project' import type { Project } from '$lib/types/project'
@ -11,92 +12,60 @@
const error = $derived(data.error as string | undefined) const error = $derived(data.error as string | undefined)
</script> </script>
<div class="project-page-container"> {#if error}
{#if error} <Page>
<Page> {#snippet header()}
{#snippet header()} <div class="error-header">
<div class="error-header"> <h1>Error</h1>
<h1>Error</h1>
</div>
{/snippet}
<div class="error-content">
<p>{error}</p>
<a href="/labs" class="back-link">← Back to labs</a>
</div> </div>
</Page> {/snippet}
{:else if !project} <div class="error-content">
<Page> <p>{error}</p>
<div class="loading">Loading project...</div> <a href="/labs" class="back-link">← Back to labs</a>
</Page> </div>
{:else if project.status === 'list-only'} </Page>
<Page> {:else if !project}
{#snippet header()} <Page>
<div class="error-header"> <div class="loading">Loading project...</div>
<h1>Project Not Available</h1> </Page>
</div> {:else if project.status === 'list-only'}
{/snippet} <Page>
<div class="error-content"> {#snippet header()}
<p>This project is not yet available for viewing. Please check back later.</p> <div class="error-header">
<a href="/labs" class="back-link">← Back to labs</a> <h1>Project Not Available</h1>
</div> </div>
</Page> {/snippet}
{:else if project.status === 'password-protected'} <div class="error-content">
<p>This project is not yet available for viewing. Please check back later.</p>
<a href="/labs" class="back-link">← Back to labs</a>
</div>
</Page>
{:else if project.status === 'password-protected' || project.status === 'published'}
<div class="project-wrapper">
<Page> <Page>
{#snippet header()} {#snippet header()}
<div class="project-header"> <div class="project-header">
{#if project.logoUrl} <ProjectHeaderContent {project} />
<div
class="project-logo"
style="background-color: {project.backgroundColor || '#f5f5f5'}"
>
<img src={project.logoUrl} alt="{project.title} logo" />
</div>
{/if}
<h1 class="project-title">{project.title}</h1>
{#if project.subtitle}
<p class="project-subtitle">{project.subtitle}</p>
{/if}
</div> </div>
{/snippet} {/snippet}
<ProjectPasswordProtection {#if project.status === 'password-protected'}
projectSlug={project.slug} <ProjectPasswordProtection
correctPassword={project.password || ''} projectSlug={project.slug}
projectType="labs" correctPassword={project.password || ''}
> projectType="labs"
{#snippet children()} >
<ProjectContent {project} /> {#snippet children()}
{/snippet} <ProjectContent {project} />
</ProjectPasswordProtection> {/snippet}
</ProjectPasswordProtection>
{:else}
<ProjectContent {project} />
{/if}
</Page> </Page>
{:else} </div>
<Page class="project-page"> {/if}
{#snippet header()}
<div class="project-header">
{#if project.logoUrl}
<div
class="project-logo"
style="background-color: {project.backgroundColor || '#f5f5f5'}"
>
<img src={project.logoUrl} alt="{project.title} logo" />
</div>
{/if}
<h1 class="project-title">{project.title}</h1>
{#if project.subtitle}
<p class="project-subtitle">{project.subtitle}</p>
{/if}
</div>
{/snippet}
<ProjectContent {project} />
</Page>
{/if}
</div>
<style lang="scss"> <style lang="scss">
.project-page-container {
padding: 0 $unit-2x;
box-sizing: border-box;
}
/* Error and Loading States */ /* Error and Loading States */
.error-header h1 { .error-header h1 {
color: $red-60; color: $red-60;
@ -130,49 +99,20 @@
} }
} }
/* Project Header */ /* Project Wrapper */
.project-header { .project-wrapper {
text-align: center;
width: 100%; width: 100%;
padding: $unit-2x 0; max-width: 700px;
} margin: 0 auto;
.project-logo {
width: 100px;
height: 100px;
margin: 0 auto $unit-2x;
display: flex;
align-items: center;
justify-content: center;
border-radius: $unit-2x;
padding: $unit-2x;
box-sizing: border-box; box-sizing: border-box;
img { @include breakpoint('phone') {
max-width: 100%; padding: 0 $unit-2x;
max-height: 100%;
object-fit: contain;
} }
} }
.project-title { /* Project Header */
font-size: 2.5rem; .project-header {
font-weight: 700; width: 100%;
margin: 0 0 $unit;
color: $grey-10;
@include breakpoint('phone') {
font-size: 2rem;
}
}
.project-subtitle {
font-size: 1.25rem;
color: $grey-40;
margin: 0;
@include breakpoint('phone') {
font-size: 1rem;
}
} }
</style> </style>