Components & styles
This commit is contained in:
parent
04dba57520
commit
1ebcd9ca3b
|
|
@ -0,0 +1,66 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { login } from "./stores";
|
||||||
|
import { getGraphs } from "../lib/api";
|
||||||
|
|
||||||
|
let graphsPromise: ReturnType<typeof getGraphs> = new Promise(() => {});
|
||||||
|
$: if ($login !== undefined) {
|
||||||
|
graphsPromise = getGraphs($login?.token);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="list">
|
||||||
|
{#await graphsPromise}
|
||||||
|
<span class="item">
|
||||||
|
<h2>Fetching profiles...</h2>
|
||||||
|
</span>
|
||||||
|
{:then graphs}
|
||||||
|
{#each graphs as graph}
|
||||||
|
<a class="item" href="./graph/{graph.graph}">
|
||||||
|
<h2>{graph.data.name} <span>#{graph.graph}</span></h2>
|
||||||
|
<h3>
|
||||||
|
Value:
|
||||||
|
{#each graph.data.value as key}
|
||||||
|
<span>{key}</span>
|
||||||
|
{/each}
|
||||||
|
</h3>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
<!-- svelte-ignore a11y-missing-content -->
|
||||||
|
<a class="item add" href="google.com" />
|
||||||
|
{:catch error}
|
||||||
|
<span class="item">
|
||||||
|
<h2 style="color: red">{error.message}</h2>
|
||||||
|
</span>
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "../styles/GridList";
|
||||||
|
a.item {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsl(30, 20%, 90%);
|
||||||
|
font-size: 1.17em;
|
||||||
|
&:hover {
|
||||||
|
h2 {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h2 span {
|
||||||
|
color: hsl(30, 5%, 60%);
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
h3 span {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
h3 span::after {
|
||||||
|
content: " > ";
|
||||||
|
font-size: 0.6em;
|
||||||
|
color: hsl(30, 5%, 60%);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
h3 span:nth-last-child(1)::after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let segment: string | undefined;
|
||||||
|
import { postLogout } from "../lib/api";
|
||||||
|
import { login } from "./stores";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="/" class:active={segment === undefined || segment === "profile"}>
|
||||||
|
<h3>Profiles</h3>
|
||||||
|
</a>
|
||||||
|
<span class="sep" />
|
||||||
|
<a
|
||||||
|
href="/graphs"
|
||||||
|
class:active={segment === "graphs" || segment === "graph"}
|
||||||
|
>
|
||||||
|
<h3>Graphs</h3>
|
||||||
|
</a>
|
||||||
|
<span class="sep" />
|
||||||
|
<div class="sep" />
|
||||||
|
<span class="sep" />
|
||||||
|
{#if $login === null || $login === undefined}
|
||||||
|
<a href="/login" class:active={segment === "login"}>
|
||||||
|
<h3>Login</h3>
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<span>
|
||||||
|
<h3>@{$login.username}</h3>
|
||||||
|
</span>
|
||||||
|
<span class="sep" />
|
||||||
|
<a
|
||||||
|
href="."
|
||||||
|
on:click={async () => {
|
||||||
|
await postLogout($login?.token || ""); // ! wasn't working for some reason
|
||||||
|
login.set(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3>Logout</h3>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
nav {
|
||||||
|
z-index: 1000;
|
||||||
|
position: fixed;
|
||||||
|
width: calc(100% - 1.5em);
|
||||||
|
background-color: hsl(236, 10%, 20%);
|
||||||
|
display: flex;
|
||||||
|
border: 0.75em solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
display: inline;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
span,
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
a.active {
|
||||||
|
color: hsl(111, 100%, 50%);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: solid underline;
|
||||||
|
}
|
||||||
|
.sep {
|
||||||
|
padding: 0;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
span.sep {
|
||||||
|
width: 0.75em;
|
||||||
|
}
|
||||||
|
div.sep {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { writable } from "svelte/store";
|
||||||
|
|
||||||
|
function createLogin() {
|
||||||
|
const { subscribe, set, update } = writable<
|
||||||
|
| {
|
||||||
|
username: string;
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
| undefined
|
||||||
|
| null
|
||||||
|
>(undefined);
|
||||||
|
|
||||||
|
return {
|
||||||
|
subscribe,
|
||||||
|
set,
|
||||||
|
update,
|
||||||
|
getValue: () =>
|
||||||
|
new Promise(resolve => {
|
||||||
|
const unsubscribe = subscribe(value => {
|
||||||
|
if (value !== undefined) {
|
||||||
|
unsubscribe();
|
||||||
|
resolve(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const login = createLogin();
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
form {
|
||||||
|
padding: 1em;
|
||||||
|
background-color: hsl(236, 10%, 20%);
|
||||||
|
p#status {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: calc(100% - 1.5em);
|
||||||
|
background: none;
|
||||||
|
padding: 0.75em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
font-size: 1.17em;
|
||||||
|
color: hsl(30, 20%, 90%);
|
||||||
|
border: 2px solid black;
|
||||||
|
border-right: 2px solid transparent;
|
||||||
|
border-left: 2px solid transparent;
|
||||||
|
&:focus,
|
||||||
|
&:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
border-color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type="submit"] {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-color: black;
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: hsl(236, 5%, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
div#list {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(24em, 1fr));
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
|
grid-auto-flow: dense;
|
||||||
|
gap: 0.75em;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
padding: 1em;
|
||||||
|
background-color: hsl(236, 10%, 20%);
|
||||||
|
overflow-y: auto;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(98%);
|
||||||
|
z-index: inherit;
|
||||||
|
}
|
||||||
|
:nth-child(1) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
:nth-last-child(1) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.add {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: min(12em, 30%);
|
||||||
|
height: 0.3em;
|
||||||
|
background-color: hsl(30, 20%, 90%);
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
transform: translate(-50%, -50%) rotateZ(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue