Loggest thy stuff
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

146 lines
3.2 KiB

<script lang="ts" context="module">
import type { LoadInput } from "@sveltejs/kit/types/internal";
const TIPS = [
"Ctrl-click items and requirements in your suggestions to log it.",
"Suggestions are incomplete, go into scopes or sprints to view all you need to do.",
]
export async function load({ url, fetch }: LoadInput ) {
const res = await fetch("indexdata.json");
if (res.ok) {
return {
props: {
...await res.json(),
tip: TIPS[Math.floor(Math.random() * TIPS.length)]
}
};
}
return {
status: res.status,
error: `Failed: ${res.status}`
};
}
</script>
<script lang="ts">
import ItemLink from "$lib/components/frontpage/ItemLink.svelte";
import ScopeLink from "$lib/components/frontpage/ScopeLink.svelte";
import RequirementLink from "$lib/components/frontpage/RequirementLink.svelte";
import type { ScopeEntry } from "$lib/models/scope";
import type { StandaloneItem } from "$lib/models/item";
import type { StandaloneRequirement } from "$lib/models/project";
import type { StandaloneSprint } from "$lib/models/sprint";
import SprintLink from "$lib/components/frontpage/SprintLink.svelte";
export let scopes: ScopeEntry[] = [];
export let items: StandaloneItem[] = [];
export let requirements: StandaloneRequirement[] = [];
export let sprints: StandaloneSprint[] = [];
export let tip: string;
</script>
<div class="header-wrapper">
<h1>Stufflog</h1>
<h2>Logging your stuff.</h2>
</div>
<main>
<div class="column">
<div class="row">
<h2>Scopes</h2>
{#each scopes as scope (scope.id)}
<ScopeLink scope={scope} />
{/each}
</div>
<div class="row">
<h2>Today</h2>
<p>When you mark an item as aquired today, it will appear here.</p>
<p>TIP: {tip}</p>
</div>
</div>
<div class="column">
<div class="row">
<h2>Suggestions</h2>
{#each items as item (item.id)}
<ItemLink item={item} />
{/each}
{#each requirements as requirement (requirement.id)}
<RequirementLink requirement={requirement} />
{/each}
</div>
</div>
<div class="column">
<div class="row">
<h2>Sprints</h2>
{#each sprints as sprint (sprint.id)}
<SprintLink sprint={sprint} />
{/each}
</div>
</div>
</main>
<style lang="scss">
div.header-wrapper {
width: 180ch;
max-width: 95%;
margin: auto;
margin-top: 2em;
h1 {
margin: 0.333em 0.333ch;
margin-bottom: 0;
font-size: 3em;
font-weight: 100;
}
h2 {
font-size: 1em;
margin: 1em 1ch;
margin-top: 0;
font-style: italic;
font-weight: 100;
}
}
p {
margin-top: 0.25em;
}
main {
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
width: 180ch;
max-width: 95%;
margin: auto;
@media screen and (max-width: 1000px) {
width: 100%;
flex-direction: column;
}
> div.column {
display: flex;
flex-direction: column;
flex-basis: 50;
flex: 1;
> div.row {
margin: 0.5em 1ch;
padding: 0.5em 1ch;
> h2 {
font-size: 1.25em;
margin: 0;
margin-bottom: 0.25em;
}
}
}
}
</style>