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