luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Added timeline component to website

Browse Source
This commit is contained in:
Luke Else
2023-10-25 10:54:39 +01:00
parent d2066087ae
commit ee2098e6e6
22 changed files with 323 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/lib/components/Card.svelte Normal file
View File

@ -0,0 +1,66 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function onClick() {
dispatch('click');
}
</script>
<style>
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
flex: 2 1 15em;
padding: .5em 2.5em 2em 2.5em;
background: var(--bg-grad);
border-radius: .5em;
scroll-snap-align: start;
transition: all 0.2s;
}
.card:hover {
box-shadow: .5em .5em .5em var(--cyan);
}
.card .card-header :global(div) {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0em;
width: 100%;
}
.card .card-content :global(div) {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
}
.card .card-footer :global(div){
margin-bottom: 1em;
display: flex;
gap: 1em;
max-width: 100%;
justify-content: space-between;
}
</style>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="card" on:click={onClick}>
<div class="card-header">
<slot name="header"></slot>
</div>
<hr />
<div class="card-content">
<slot name="content"></slot>
</div>
<hr class="not-required"/>
<div class="card-footer">
<slot name="footer"></slot>
</div>
</div>

82
src/lib/components/Modal.svelte Normal file
View File

@ -0,0 +1,82 @@
<script lang="ts">
export let showModal: boolean;
let dialog: HTMLDialogElement;
$: if (dialog && showModal) dialog.showModal();
import CloseIcon from "./Toasts/CloseIcon.svelte";
</script>
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<dialog
bind:this={dialog}
on:close={() => (showModal = false)}
on:click|self={() => dialog.close()}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation>
<slot name="header" />
<hr />
<slot />
<hr />
</div>
<button class="close" on:click={() => dialog.close()}>
<CloseIcon width="0.8em" />
</button>
</dialog>
<style>
dialog {
max-width: 70%;
border-radius: 0.2em;
border: none;
padding: 0em 2em 2em 2em;
border-left: 2em;
border-right: 2em;
background: var(--bg);
color: var(--fg);
box-shadow: .5em .5em .5em var(--red);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
dialog > div {
padding: 1em;
}
dialog[open] {
animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zoom {
from {
transform: scale(0.95);
}
to {
transform: scale(1);
}
}
dialog[open]::backdrop {
animation: fade 0.3s ease-out;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.close {
position: absolute;
top: 1em;
right: 1.5em;
color: var(--fg);
background: transparent;
border: 0 none;
padding: 0;
margin: 0 0 0 auto;
line-height: 1;
font-size: 1.2em;
}
</style>

18
src/lib/components/Toasts/CloseIcon.svelte Normal file
View File

@ -0,0 +1,18 @@
<script>
export let width = "1em"
</script>
<svg
width={width}
style="text-align: center; display: inline-block;"
aria-hidden="true"
focusable="false"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 352 512"
>
<path
fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>

19
src/lib/components/Toasts/ErrorIcon.svelte Normal file
View File

@ -0,0 +1,19 @@
<script>
export let width = "1em"
</script>
<svg
width={width}
style="text-align: center; display: inline-block;"
aria-hidden="true"
focusable="false"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"
class=""
></path>
</svg>

18
src/lib/components/Toasts/InfoIcon.svelte Normal file
View File

@ -0,0 +1,18 @@
<script>
export let width = "1em"
</script>
<svg
width={width}
style="text-align: center; display: inline-block;"
aria-hidden="true"
focusable="false"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z"
/>
</svg>

18
src/lib/components/Toasts/SuccessIcon.svelte Normal file
View File

@ -0,0 +1,18 @@
<script>
export let width = "1em"
</script>
<svg
width={width}
style="text-align: center; display: inline-block;"
aria-hidden="true"
focusable="false"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"
/>
</svg>

67
src/lib/components/Toasts/Toast.svelte Normal file
View File

@ -0,0 +1,67 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
import { Toast, ToastType } from "$lib/toast";
import SuccessIcon from "./SuccessIcon.svelte";
import ErrorIcon from "./ErrorIcon.svelte";
import InfoIcon from "./InfoIcon.svelte";
import CloseIcon from "./CloseIcon.svelte";
const dispatch = createEventDispatcher();
export let toastData: Toast;
</script>
<article class={toastData.type.toString().toLowerCase()} role="alert" transition:fade>
{#if toastData.type === ToastType.Success}
<SuccessIcon width="1.1em" />
{:else if toastData.type === ToastType.Error}
<ErrorIcon width="1.1em" />
{:else}
<InfoIcon width="1.1em" />
{/if}
<div class="text">
{toastData.text}
</div>
{#if toastData.dismissable}
<button class="close" on:click={() => dispatch("dismiss")}>
<CloseIcon width="0.8em" />
</button>
{/if}
</article>
<style lang="postcss">
article {
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.2rem;
display: flex;
align-items: center;
margin: 0 auto 0.5rem auto;
width: 20rem;
max-width: 80%;
}
.error {
background: IndianRed;
}
.success {
background: MediumSeaGreen;
}
.info {
background: SkyBlue;
}
.text {
margin-left: 1rem;
}
.close {
color: white;
background: transparent;
border: 0 none;
padding: 0;
margin: 0 0 0 auto;
line-height: 1;
font-size: 1rem;
}
</style>

28
src/lib/components/Toasts/Toasts.svelte Normal file
View File

@ -0,0 +1,28 @@
<script lang="ts">
import Toast from "./Toast.svelte";
import { dismissToast, toasts } from "$lib/store";
</script>
{#if $toasts}
<section>
{#each $toasts as toast (toast.id)}
<Toast toastData = {toast} on:dismiss={() => dismissToast(toast.id)} />
{/each}
</section>
{/if}
<style lang="postcss">
section {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
display: flex;
margin-top: 1rem;
justify-content: center;
flex-direction: column;
z-index: 10;
}
</style>

21
src/lib/components/timeline/Timeline.svelte Normal file
View File

@ -0,0 +1,21 @@
<script lang="ts">
import { setContext } from 'svelte';
import type { TimelinePosition, TimelineConfig } from '../types';
export let position: TimelinePosition = 'right';
export let style: string = null;
setContext<TimelineConfig>('TimelineConfig', { rootPosition: position });
</script>
<ul class="timeline" {style}>
<slot />
</ul>
<style>
.timeline {
display: flex;
flex-direction: column;
padding: 6px 16px;
flex-grow: 1;
}
</style>

13
src/lib/components/timeline/TimelineConnector.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
export let style: string = null;
</script>
<span class="timeline-connector" {style} />
<style>
.timeline-connector {
width: 2px;
background-color: #bdbdbd;
flex-grow: 1;
}
</style>

30
src/lib/components/timeline/TimelineContent.svelte Normal file
View File

@ -0,0 +1,30 @@
<script lang="ts">
import { getContext } from 'svelte';
import type { TimelineConfig, TimelinePosition } from '../types';
export let style: string = null;
const config = getContext<TimelineConfig>('TimelineConfig');
const parentPosition = getContext<TimelinePosition>('ParentPosition');
const itemPosition = parentPosition ? parentPosition : config.rootPosition;
</script>
<div class={`timeline-content ${itemPosition}`} {style}>
<slot />
</div>
<style>
.timeline-content {
margin: 0;
flex: 1;
margin: 6px 16px;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
</style>

19
src/lib/components/timeline/TimelineDot.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
export let style: string = null;
</script>
<span class="timeline-dot" {style}>
<slot />
</span>
<style>
.timeline-dot {
background-color: #121212;
border: solid 2px #121212;
display: flex;
align-self: baseline;
padding: 4px;
border-radius: 50%;
margin: 11.5px 0;
}
</style>

58
src/lib/components/timeline/TimelineItem.svelte Normal file
View File

@ -0,0 +1,58 @@
<script lang="ts">
import { getContext, setContext } from 'svelte';
import type { TimelinePosition, ParentPosition, TimelineConfig } from '../types';
export let position: ParentPosition | null = null;
export let style: string = null;
const config = getContext<TimelineConfig>('TimelineConfig');
const itemPosition = position ? position : config.rootPosition;
setContext<TimelinePosition>('ParentPosition', itemPosition);
</script>
<li class={`timeline-item ${itemPosition}`} {style}>
{#if !$$slots['opposite-content']}
<div class="opposite-block" />
{:else}
<slot name="opposite-content" />
{/if}
<slot />
</li>
<style>
:global(.alternate:nth-of-type(even) > .timeline-content) {
text-align: right;
}
:global(.alternate:nth-of-type(odd) > .timeline-opposite-content) {
text-align: right;
}
.opposite-block {
flex: 1;
margin: 6px 16px;
}
.timeline-item {
list-style: none;
display: flex;
position: relative;
min-height: 70px;
}
.left {
flex-direction: row-reverse;
}
.right {
flex-direction: row;
}
.alternate:nth-of-type(even) {
flex-direction: row-reverse;
}
.alternate:nth-of-type(odd) {
flex-direction: row;
}
</style>

31
src/lib/components/timeline/TimelineOppositeContent.svelte Normal file
View File

@ -0,0 +1,31 @@
<script lang="ts">
import { getContext } from 'svelte';
import type { TimelineConfig, TimelinePosition } from '../types';
export let style: string = null;
const config = getContext<TimelineConfig>('TimelineConfig');
const parentPosition = getContext<TimelinePosition>('ParentPosition');
const itemPosition = parentPosition ? parentPosition : config.rootPosition;
</script>
<div class={`timeline-opposite-content ${itemPosition}`} {style}>
<slot />
</div>
<style>
.timeline-opposite-content {
margin: 0;
flex: 1;
margin-right: auto;
margin: 6px 16px;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
</style>

16
src/lib/components/timeline/TimelineSeparator.svelte Normal file
View File

@ -0,0 +1,16 @@
<script lang="ts">
export let style: string = null;
</script>
<div class="timeline-separator" {style}>
<slot />
</div>
<style>
.timeline-separator {
display: flex;
flex-direction: column;
flex: 0;
align-items: center;
}
</style>

38
src/lib/index.ts
View File

@ -1 +1,39 @@
// place files you want to import through the `$lib` alias in this folder.
import Timeline from '$lib/components/timeline/Timeline.svelte';
import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
import Toasts from '$lib/components/Toasts/Toasts.svelte';
import Toast from '$lib/components/Toasts/Toast.svelte';
import CloseIcon from '$lib/components/Toasts/CloseIcon.svelte';
import InfoIcon from '$lib/components/Toasts/InfoIcon.svelte';
import SuccessIcon from '$lib/components/Toasts/SuccessIcon.svelte';
import ErrorIcon from '$lib/components/Toasts/ErrorIcon.svelte';
import Card from '$lib/components/Card.svelte';
import Modal from '$lib/components/Modal.svelte';
export {
Timeline,
TimelineItem,
TimelineSeparator,
TimelineDot,
TimelineConnector,
TimelineContent,
TimelineOppositeContent,
Toasts,
Toast,
CloseIcon,
InfoIcon,
SuccessIcon,
ErrorIcon,
Card,
Modal
};

9
src/lib/types.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
type TimelinePosition = 'right' | 'left' | 'alternate';
type ParentPosition = 'right' | 'left';
type TimelineConfig = {
rootPosition: TimelinePosition;
};
export { TimelinePosition, ParentPosition, TimelineConfig };