Make back button consistent
This commit is contained in:
parent
c4eef0b1db
commit
451d5b0f9e
10 changed files with 129 additions and 237 deletions
75
src/lib/components/BackButton.svelte
Normal file
75
src/lib/components/BackButton.svelte
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation'
|
||||
import ArrowLeft from '$icons/arrow-left.svg'
|
||||
|
||||
interface Props {
|
||||
href?: string
|
||||
label: string
|
||||
onclick?: () => void
|
||||
class?: string
|
||||
}
|
||||
|
||||
let { href, label, onclick, class: className = '' }: Props = $props()
|
||||
|
||||
function handleClick() {
|
||||
if (onclick) {
|
||||
onclick()
|
||||
} else if (href) {
|
||||
goto(href)
|
||||
} else {
|
||||
history.back()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="back-button {className}" onclick={handleClick} type="button">
|
||||
<ArrowLeft class="arrow-icon" />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
@import '$styles/variables.scss';
|
||||
@import '$styles/mixins.scss';
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $unit-half;
|
||||
padding: $unit $unit-2x;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $red-60;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: $corner-radius-md;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba($red-60, 0.08);
|
||||
|
||||
:global(.arrow-icon) {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba($red-60, 0.2);
|
||||
}
|
||||
|
||||
:global(.arrow-icon) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
stroke: $red-60;
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
<script lang="ts">
|
||||
import LinkCard from './LinkCard.svelte'
|
||||
import Slideshow from './Slideshow.svelte'
|
||||
import BackButton from './BackButton.svelte'
|
||||
import { formatDate } from '$lib/utils/date'
|
||||
import { renderEdraContent } from '$lib/utils/content'
|
||||
import { goto } from '$app/navigation'
|
||||
import ArrowLeft from '$icons/arrow-left.svg'
|
||||
|
||||
let { post }: { post: any } = $props()
|
||||
|
||||
|
|
@ -82,10 +81,7 @@
|
|||
{/if}
|
||||
|
||||
<footer class="post-footer">
|
||||
<button onclick={() => goto('/universe')} class="back-button">
|
||||
<ArrowLeft class="back-arrow" />
|
||||
Back to Universe
|
||||
</button>
|
||||
<BackButton href="/universe" label="Back to Universe" />
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
|
@ -318,44 +314,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: $red-60;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
border-radius: 24px;
|
||||
outline: none;
|
||||
|
||||
&:hover:not(:disabled) :global(.back-arrow) {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba($red-60, 0.25);
|
||||
}
|
||||
|
||||
:global(.back-arrow) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
margin-left: -$unit-half;
|
||||
|
||||
:global(path) {
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.25;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import type { Post } from '$lib/posts'
|
||||
import ImagePost from './ImagePost.svelte'
|
||||
import LinkCard from './LinkCard.svelte'
|
||||
import BackButton from './BackButton.svelte'
|
||||
|
||||
let { post }: { post: Post } = $props()
|
||||
|
||||
|
|
@ -42,7 +43,7 @@
|
|||
</div>
|
||||
|
||||
<footer class="post-footer">
|
||||
<a href="/universe" class="back-link">← Back to all posts</a>
|
||||
<BackButton href="/universe" label="Back to all posts" />
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
|
@ -201,17 +202,4 @@
|
|||
padding-top: $unit-4x;
|
||||
border-top: 1px solid $grey-80;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: $red-60;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { Project } from '$lib/types/project'
|
||||
import ArrowLeft from '$icons/arrow-left.svg'
|
||||
import { goto } from '$app/navigation'
|
||||
import BackButton from './BackButton.svelte'
|
||||
|
||||
interface Props {
|
||||
project: Project
|
||||
|
|
@ -74,15 +73,9 @@
|
|||
<!-- Navigation -->
|
||||
<footer class="project-footer">
|
||||
{#if project.projectType === 'labs'}
|
||||
<button onclick={() => goto('/labs')} class="back-button">
|
||||
<ArrowLeft class="back-arrow" />
|
||||
Back to labs
|
||||
</button>
|
||||
<BackButton href="/labs" label="Back to Labs" />
|
||||
{:else}
|
||||
<button onclick={() => goto('/')} class="back-button">
|
||||
<ArrowLeft class="back-arrow" />
|
||||
Back to projects
|
||||
</button>
|
||||
<BackButton href="/" label="Back to projects" />
|
||||
{/if}
|
||||
</footer>
|
||||
</article>
|
||||
|
|
@ -178,44 +171,4 @@
|
|||
.project-footer {
|
||||
padding-bottom: $unit-2x;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: $red-60;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
border-radius: 24px;
|
||||
outline: none;
|
||||
|
||||
&:hover:not(:disabled) :global(.back-arrow) {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba($red-60, 0.25);
|
||||
}
|
||||
|
||||
:global(.back-arrow) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
margin-left: -$unit-half;
|
||||
|
||||
:global(path) {
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.25;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import Button from '$lib/components/admin/Button.svelte'
|
||||
import BackButton from './BackButton.svelte'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -121,9 +122,9 @@
|
|||
|
||||
<div class="back-link-wrapper">
|
||||
{#if projectType === 'labs'}
|
||||
<a href="/labs" class="back-link">← Back to labs</a>
|
||||
<BackButton href="/labs" label="Back to Labs" />
|
||||
{:else}
|
||||
<a href="/" class="back-link">← Back to projects</a>
|
||||
<BackButton href="/" label="Back to projects" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -236,16 +237,5 @@
|
|||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: $grey-40;
|
||||
text-decoration: none;
|
||||
font-size: 0.925rem;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $grey-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import Page from '$components/Page.svelte'
|
||||
import BackButton from '$components/BackButton.svelte'
|
||||
import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte'
|
||||
import ProjectHeaderContent from '$lib/components/ProjectHeaderContent.svelte'
|
||||
import ProjectContent from '$lib/components/ProjectContent.svelte'
|
||||
|
|
@ -13,17 +14,14 @@
|
|||
</script>
|
||||
|
||||
{#if error}
|
||||
<Page>
|
||||
{#snippet header()}
|
||||
<div class="error-header">
|
||||
<h1>Error</h1>
|
||||
<div class="error-wrapper">
|
||||
<Page>
|
||||
<div class="error-content">
|
||||
<p>{error}</p>
|
||||
<BackButton href="/labs" label="Back to Labs" />
|
||||
</div>
|
||||
{/snippet}
|
||||
<div class="error-content">
|
||||
<p>{error}</p>
|
||||
<a href="/labs" class="back-link">← Back to labs</a>
|
||||
</div>
|
||||
</Page>
|
||||
</Page>
|
||||
</div>
|
||||
{:else if !project}
|
||||
<Page>
|
||||
<div class="loading">Loading project...</div>
|
||||
|
|
@ -37,7 +35,7 @@
|
|||
{/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>
|
||||
<BackButton href="/labs" label="Back to Labs" />
|
||||
</div>
|
||||
</Page>
|
||||
{:else if project.status === 'password-protected' || project.status === 'published'}
|
||||
|
|
@ -67,6 +65,14 @@
|
|||
|
||||
<style lang="scss">
|
||||
/* Error and Loading States */
|
||||
.error-wrapper {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 0 $unit-2x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.error-header h1 {
|
||||
color: $red-60;
|
||||
font-size: 2rem;
|
||||
|
|
@ -88,17 +94,6 @@
|
|||
padding: $unit-4x;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: $grey-40;
|
||||
text-decoration: none;
|
||||
font-size: 0.925rem;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $grey-20;
|
||||
}
|
||||
}
|
||||
|
||||
/* Project Wrapper */
|
||||
.project-wrapper {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import BackButton from '$components/BackButton.svelte'
|
||||
import type { PageData } from './$types'
|
||||
|
||||
let { data }: { data: PageData } = $props()
|
||||
|
|
@ -84,7 +85,7 @@
|
|||
<div class="error-content">
|
||||
<h1>Photo Not Found</h1>
|
||||
<p>{error || "The photo you're looking for doesn't exist."}</p>
|
||||
<a href="/photos" class="back-link">← Back to Photos</a>
|
||||
<BackButton href="/photos" label="Back to Photos" />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
|
|
@ -265,17 +266,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: $grey-40;
|
||||
text-decoration: none;
|
||||
font-size: 0.925rem;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $grey-20;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import PhotoGrid from '$components/PhotoGrid.svelte'
|
||||
import BackButton from '$components/BackButton.svelte'
|
||||
import type { PageData } from './$types'
|
||||
|
||||
let { data }: { data: PageData } = $props()
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
<div class="error-message">
|
||||
<h1>Album Not Found</h1>
|
||||
<p>{error}</p>
|
||||
<a href="/photos" class="back-link">← Back to Photos</a>
|
||||
<BackButton href="/photos" label="Back to Photos" />
|
||||
</div>
|
||||
</div>
|
||||
{:else if album}
|
||||
|
|
@ -107,17 +108,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: $grey-40;
|
||||
text-decoration: none;
|
||||
font-size: 0.925rem;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $grey-20;
|
||||
}
|
||||
}
|
||||
|
||||
.album-page {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<script lang="ts">
|
||||
import Page from '$components/Page.svelte'
|
||||
import BackButton from '$components/BackButton.svelte'
|
||||
import DynamicPostContent from '$components/DynamicPostContent.svelte'
|
||||
import { getContentExcerpt } from '$lib/utils/content'
|
||||
import { goto } from '$app/navigation'
|
||||
import ArrowLeft from '$icons/arrow-left.svg'
|
||||
import type { PageData } from './$types'
|
||||
|
||||
let { data }: { data: PageData } = $props()
|
||||
|
|
@ -44,12 +43,8 @@
|
|||
<Page>
|
||||
<div class="error-container">
|
||||
<div class="error-content">
|
||||
<h1>Post Not Found</h1>
|
||||
<p>{error || "The post you're looking for doesn't exist."}</p>
|
||||
<button onclick={() => goto('/universe')} class="back-button">
|
||||
<ArrowLeft class="back-arrow" />
|
||||
Back to Universe
|
||||
</button>
|
||||
<BackButton href="/universe" label="Back to Universe" />
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
|
|
@ -90,45 +85,5 @@
|
|||
color: $grey-40;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: $red-60;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
border-radius: 24px;
|
||||
outline: none;
|
||||
|
||||
&:hover:not(:disabled) :global(.back-arrow) {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba($red-60, 0.25);
|
||||
}
|
||||
|
||||
:global(.back-arrow) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
margin-left: -$unit-half;
|
||||
|
||||
:global(path) {
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.25;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import Page from '$components/Page.svelte'
|
||||
import BackButton from '$components/BackButton.svelte'
|
||||
import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte'
|
||||
import ProjectHeaderContent from '$lib/components/ProjectHeaderContent.svelte'
|
||||
import ProjectContent from '$lib/components/ProjectContent.svelte'
|
||||
|
|
@ -50,15 +51,17 @@
|
|||
</script>
|
||||
|
||||
{#if error}
|
||||
<Page>
|
||||
<div slot="header" class="error-header">
|
||||
<h1>Error</h1>
|
||||
</div>
|
||||
<div class="error-content">
|
||||
<p>{error}</p>
|
||||
<a href="/" class="back-link">← Back to home</a>
|
||||
</div>
|
||||
</Page>
|
||||
<div class="error-container">
|
||||
<Page>
|
||||
<div slot="header" class="error-header">
|
||||
<h1>Error</h1>
|
||||
</div>
|
||||
<div class="error-content">
|
||||
<p>{error}</p>
|
||||
<BackButton href="/" label="Back to projects" />
|
||||
</div>
|
||||
</Page>
|
||||
</div>
|
||||
{:else if !project}
|
||||
<Page>
|
||||
<div class="loading">Loading project...</div>
|
||||
|
|
@ -70,7 +73,7 @@
|
|||
</div>
|
||||
<div class="error-content">
|
||||
<p>This project is not yet available for viewing. Please check back later.</p>
|
||||
<a href="/" class="back-link">← Back to projects</a>
|
||||
<BackButton href="/" label="Back to projects" />
|
||||
</div>
|
||||
</Page>
|
||||
{:else if project.status === 'password-protected' || project.status === 'published'}
|
||||
|
|
@ -122,6 +125,14 @@
|
|||
|
||||
<style lang="scss">
|
||||
/* Error and Loading States */
|
||||
.error-container {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 0 $unit-2x;
|
||||
}
|
||||
|
||||
.error-header h1 {
|
||||
color: $red-60;
|
||||
font-size: 2rem;
|
||||
|
|
@ -143,17 +154,6 @@
|
|||
padding: $unit-4x;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: $grey-40;
|
||||
text-decoration: none;
|
||||
font-size: 0.925rem;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $grey-20;
|
||||
}
|
||||
}
|
||||
|
||||
/* Project Wrapper */
|
||||
.project-wrapper {
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Reference in a new issue