Skip to content

Commit

Permalink
feat: Update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
kiosion committed Nov 3, 2023
1 parent 0efd710 commit 04852fe
Show file tree
Hide file tree
Showing 32 changed files with 362 additions and 712 deletions.
52 changes: 52 additions & 0 deletions svelte-app/src/components/about/timeline-item.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<script lang="ts">
import BulletPoint from '$components/bullet-point.svelte';
// import Icon from '$components/icon.svelte';
import PortableText from '$components/portable-text/portable-text.svelte';
import type { AuthorTimelineItem } from '$types';
export let title: string | undefined, body: AuthorTimelineItem['body'], date: string;
</script>

<div class="item">
<div>
<!-- <Icon icon="ArrowRight" class="mr-4" /> -->
<BulletPoint />
<span>
<h2>{title}</h2>
<p>{date}</p>
</span>
</div>

{#if body}
<div class="body">
<PortableText text={body} />
</div>
{/if}
</div>

<style lang="scss">
.item {
@apply flex flex-col items-start justify-start;
}
h2 {
@apply text-lg font-bold text-white;
}
div {
@apply flex w-full flex-row items-center justify-start gap-x-2;
span {
@apply flex w-full flex-row items-center justify-between text-base;
}
p {
@apply font-mono text-base;
}
}
.body {
@apply -mt-1 pl-8 text-base;
}
</style>
67 changes: 67 additions & 0 deletions svelte-app/src/components/about/timeline-section.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<script lang="ts">
import { derived } from 'svelte/store';
import { currentLang, t } from '$i18n';
import TimelineItem from './timeline-item.svelte';
import type { AuthorTimelineItem } from '$types';
export let section: AuthorTimelineItem[];
const title = section[0].title;
const dateDisplay = derived([currentLang, t], ([currentLang, t]) => {
return (start: string, end: string | undefined) => {
try {
const startDate = new Date(start),
endDate = end ? new Date(end) : undefined;
if (!endDate) {
return `${new Intl.DateTimeFormat(currentLang, {
month: 'short',
year: 'numeric'
}).format(startDate)} - ${t('present')}`;
}
return `${new Intl.DateTimeFormat(currentLang, {
month: 'short',
year: 'numeric'
}).format(startDate)} - ${new Intl.DateTimeFormat(currentLang, {
month: 'short',
year: 'numeric'
}).format(endDate)}`;
} catch (_) {
return t('Invalid date');
}
};
});
</script>

<section>
<h1>{title}</h1>

<div>
{#each section as item}
<TimelineItem
title={item.subtitle}
body={item.body}
date={$dateDisplay(item.range.start, item.range.end)}
/>
{/each}
</div>
</section>

<style lang="scss">
h1 {
@apply mb-3 font-code text-2xl font-bold text-white;
}
section {
@apply my-6;
div {
@apply flex flex-col;
}
}
</style>
100 changes: 16 additions & 84 deletions svelte-app/src/components/about/timeline.svelte
Original file line number Diff line number Diff line change
@@ -1,23 +1,14 @@
<script lang="ts">
import { circInOut } from 'svelte/easing';
import { slide } from 'svelte/transition';
import { currentLang, t } from '$i18n';
import { BASE_ANIMATION_DURATION } from '$lib/consts';
import Settings from '$stores/settings';
import BulletPoint from '$components/bullet-point.svelte';
import Hoverable from '$components/hoverable.svelte';
import Icon from '$components/icon.svelte';
import PortableText from '$components/portable-text/portable-text.svelte';
import Tooltip from '$components/tooltip.svelte';
import TimelineSection from './timeline-section.svelte';
import type { AuthorTimelineItem } from '$types';
let selected: number | null = null;
export let data: AuthorTimelineItem[];
let sections: Record<string, AuthorTimelineItem[]> = {};
const dateDisplay = (start: string, end: string | undefined) => {
try {
const startDate = new Date(start),
Expand All @@ -42,77 +33,18 @@
}
};
const { reduce_motion } = Settings;
$: {
sections = {};
for (const item of data) {
if (sections[item.title]) {
sections[item.title].push(item);
} else {
sections[item.title] = [item];
}
}
}
</script>

<div class="flex flex-col items-start justify-start gap-4">
{#each data as item, i}
<Hoverable bind:hovered={data[i].hovered}>
<Tooltip
text={selected === i ? $t('Click to hide details') : $t('Click to show details')}
position="bottom"
disable={!item.body}
>
<div
class="flex w-full flex-col items-start justify-start"
on:click={() => {
if (item.body) {
selected = selected === i ? null : i;
}
}}
on:keydown={(e) => {
if (item.body && (e.code === 'Enter' || e.code === 'Space')) {
selected = selected === i ? null : i;
}
}}
aria-expanded={selected === i}
tabindex={0}
role="button"
>
<div class="flex flex-row items-center justify-start gap-4">
<Icon
icon="ChevronDown"
class="{selected === i ? 'rotate-0' : '-rotate-90'} transition-all"
/>
<div class="flex flex-row flex-wrap items-center justify-start gap-x-4">
<p
class="min-w-[10rem] select-none font-code text-base text-dark/90 dark:text-light/90"
>
{dateDisplay(item.range.start, item.range.end)}
</p>
<div class="flex flex-row items-center justify-start">
<h1
class="text-lg font-bold decoration-accent-light decoration-[3px] underline-offset-4 dark:decoration-accent-dark"
class:underline={data[i].hovered}
>
{item.title}
</h1>
{#if item.subtitle}
<BulletPoint />
<p class="text-base">{item.subtitle}</p>
{/if}
</div>
</div>
</div>
{#if selected === i && item.body}
<div
class="mx-10 pb-2 font-sans text-base"
in:slide={{
duration: BASE_ANIMATION_DURATION,
easing: circInOut
}}
out:slide={{
duration: BASE_ANIMATION_DURATION / 2,
easing: circInOut
}}
>
<div class="-mb-5">
<PortableText text={item.body} />
</div>
</div>
{/if}
</div>
</Tooltip>
</Hoverable>
{/each}
</div>
{#each Object.keys(sections) as section}
<TimelineSection section={sections[section]} />
{/each}
17 changes: 13 additions & 4 deletions svelte-app/src/components/bullet-point.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
<div
class="mx-2 h-1 w-1 rounded-full bg-dark/80 transition-all duration-150 dark:bg-light/90 {$$props.class ||
''}"
/>
<div class={$$props.class || ''} />

<style lang="scss">
div {
@apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-all duration-150;
}
:global(.dark) {
div {
@apply bg-light/80;
}
}
</style>
2 changes: 1 addition & 1 deletion svelte-app/src/components/controls/language-toggle.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
fixed
>
<button
class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
class="focusOutline -m-1.5 flex h-[32px] w-[32px] items-center justify-center rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
''}"
aria-label={$t(
$currentLang === APP_LANGS[0] ? 'Switch to french' : 'Switch to english'
Expand Down
6 changes: 3 additions & 3 deletions svelte-app/src/components/controls/menu-toggle.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@

<Hoverable>
<button
class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
class="focusOutline -m-1.5 flex h-[32px] w-[32px] items-center justify-center rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
''}"
aria-label="Toggle navigation"
data-test-id="nav-toggle"
on:click={() => navOpen.set(!$navOpen)}
>
{#if $navOpen}
<Icon icon="CloseBox" />
<Icon icon="BackBurger" height={24} width={24} />
{:else}
<Icon icon="Menu" />
<Icon icon="ForwardBurger" height={24} width={24} />
{/if}
</button>
</Hoverable>
2 changes: 1 addition & 1 deletion svelte-app/src/components/controls/theme-toggle.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<Hoverable>
<Tooltip text={$t(tooltipText)} delay={150} fixed>
<button
class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark"
class="focusOutline -m-1.5 flex h-[32px] w-[32px] items-center justify-center rounded-sm hover:text-accent-light dark:hover:text-accent-dark"
aria-label={$t(tooltipText)}
data-test-id="theme-toggle"
data-test-state={$theme}
Expand Down
2 changes: 1 addition & 1 deletion svelte-app/src/components/divider.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<span />
<span class={$$props.class || ''} />

<style lang="scss">
span {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import { linkTo, t } from '$i18n';
import { isMobile } from '$lib/helpers/responsive';
import ArrowButton from '$components/controls/arrow-button.svelte';
import Icon from '$components/icon.svelte';
Expand All @@ -17,7 +18,9 @@
preload
>
<span class="flex items-center justify-start gap-2 text-base">
<Icon icon="ArrowLeft" class="mb-0.5" inline />
{#key $isMobile}
<Icon icon={$isMobile ? 'ArrowUp' : 'ArrowLeft'} class="mb-0.5" inline />
{/key}
<p>{$t('Read more')}</p>
</span>
</ArrowButton>
Expand Down
Loading

0 comments on commit 04852fe

Please sign in to comment.