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"
on:click={(e) => e.stopPropagation()}
>
Visit site
Visit
<svg
slot="icon"
width="16"
@ -234,6 +234,8 @@
:global(.btn) {
flex-shrink: 0;
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"
rel="noopener noreferrer"
class="visit-button"
style="--button-bg: {project.highlightColor || '#4d4d4d'}; --button-color: white"
style="--button-bg: {project.highlightColor || '#e33d3d'}; --button-color: white"
>
Visit <ArrowRight />
</a>
@ -75,7 +75,7 @@
align-items: center;
gap: $unit;
padding: ($unit * 1.5) $unit-2x;
background: var(--button-bg, $grey-10);
background: var(--button-bg, $red-60);
color: var(--button-color, white);
text-decoration: none;
border-radius: 50px;

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

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