Skip to content

Commit

Permalink
add: alternative county views
Browse files Browse the repository at this point in the history
  • Loading branch information
Valexr committed Apr 14, 2024
1 parent f77341a commit baab8ec
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 15 deletions.
14 changes: 6 additions & 8 deletions src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { date, time, start, quote, county } from "$lib/data";
import { images } from "$lib/images";
import DateInput from "$lib/components/DateInput.svelte";
import Date from "$lib/components/Date.svelte";
import County from "$lib/components/County.svelte";
import Quote from "$lib/components/Quote.svelte";
</script>
Expand All @@ -25,7 +25,7 @@

{#await images.back() then}
<header>
<DateInput date={$date} bind:input bind:value={$start} />
<Date date={$date} bind:input bind:value={$start} />
</header>

<main>
Expand All @@ -37,9 +37,7 @@
</h2>
{/if}
{#await quote.load() then}
{#if $quote}
<Quote quote={$quote} href={repository} />
{/if}
<Quote quote={$quote} href={repository} />
{/await}
</main>

Expand All @@ -56,12 +54,12 @@
header {
justify-content: center;
}
footer h2 {
margin: 0;
}
main {
padding: 1em;
display: grid;
place-content: center;
}
footer h2 {
margin: 0;
}
</style>
21 changes: 21 additions & 0 deletions src/lib/components/Button.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script lang="ts">
export let id = "";
export let type: string;
function set(e: MouseEvent) {
const { id } = e.currentTarget as HTMLButtonElement;
type = id;
}
</script>

<button {id} class="clear outline" on:click={set}>
<slot />
</button>

<style>
button.clear {
background: transparent;
font-family: inherit;
font-weight: inherit;
}
</style>
48 changes: 43 additions & 5 deletions src/lib/components/County.svelte
Original file line number Diff line number Diff line change
@@ -1,23 +1,61 @@
<script lang="ts" context="module">
import Button from "./Button.svelte";
</script>

<script lang="ts">
export let county: { years: number; months: number; days: number };
let type = "";
</script>

<ul>
<li id="years">{county.years}</li>
<li id="months">{county.months}</li>
<li id="days">{county.days}</li>
{#if type === "months"}
<li id="months">
<Button id="" bind:type>
{county.years * 12}
</Button>
</li>
{:else if type === "days"}
<li id="days">
<Button id="" bind:type>
{county.years * 12 * 4 * 7}
</Button>
</li>
{:else if type === "hours"}
<li id="hours">
<Button id="" bind:type>
{county.years * 12 * 4 * 7 * 24}
</Button>
</li>
{:else}
<li id="years">
<Button id="hours" bind:type>
{county.years}
</Button>
</li>
<li id="months">
<Button id="months" bind:type>
{county.months}
</Button>
</li>
<li id="days">
<Button id="days" bind:type>
{county.days}
</Button>
</li>
{/if}
</ul>

<style>
ul {
list-style: none;
padding: 0;
margin: 0;
font-size: min(27.5vw, 25vh);
font-size: min(25vw, 25vh);
font-weight: bold;
display: flex;
justify-content: center;
gap: 0.25em;
gap: 0em;
margin-bottom: 0.25em;
}
ul li {
Expand Down
File renamed without changes.
6 changes: 5 additions & 1 deletion src/lib/components/Quote.svelte
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<script lang="ts" context="module">
import { fade } from "svelte/transition";
</script>

<script lang="ts">
export let quote = {
content: "",
Expand All @@ -6,7 +10,7 @@
export let href = "";
</script>

<blockquote>
<blockquote in:fade>
<p>{quote.content}</p>
<a {href}>~ {quote.author}</a>
</blockquote>
Expand Down
7 changes: 6 additions & 1 deletion src/lib/images.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,15 @@ function createImages() {
async back() {
await load();
const [{ src }] = prepare();
// await addImageProcess(src)
// const img = new Image();
// img.src = src
// await img.decode();
document.body.style.cssText = `
background: url(${src}) center no-repeat;
background-size: cover;
`;
}
}
}
}

0 comments on commit baab8ec

Please sign in to comment.