Nav extra details

This commit is contained in:
Gleb Koval 2021-07-08 16:57:55 +01:00
parent c3036ac98a
commit 62223572de
No known key found for this signature in database
GPG Key ID: 120F2F6DA9D995FB
8 changed files with 104 additions and 19 deletions

View File

@ -11,7 +11,7 @@
<div id="list">
{#await graphsPromise}
<span class="item">
<h2>Fetching profiles...</h2>
<h2>Fetching graphs...</h2>
</span>
{:then graphs}
{#each graphs as graph}

View File

@ -1,7 +1,7 @@
<script lang="ts">
export let segment: string | undefined;
import { postLogout } from "../lib/api";
import { login } from "./stores";
import { extraNav, login } from "./stores";
</script>
<nav>
@ -16,6 +16,23 @@
<h3>Graphs</h3>
</a>
<span class="sep" />
{#if $extraNav !== undefined}
<span class="extra">
<h3>
{#each $extraNav.filter(i => i) as item}
<span class="spacer" />
{#if typeof item === "string"}
<span>{item}</span>
{:else}
<button type="button" on:click={item[1]}>
{item[0]}
</button>
{/if}
{/each}
</h3>
</span>
<span class="sep" />
{/if}
<div class="sep" />
<span class="sep" />
{#if $login === null || $login === undefined}
@ -76,4 +93,39 @@
div.sep {
flex: 1;
}
.extra {
padding-left: 0;
@media screen and (max-width: 803px) {
display: none;
}
h3 {
span,
button {
color: hsl(30, 20%, 90%);
font-size: 1em;
font-weight: 500;
padding: 0;
display: inline;
background: none;
border: none;
user-select: text;
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
}
span.spacer::before {
text-decoration: none;
content: ">";
margin-left: 1em;
color: hsl(30, 5%, 60%);
font-weight: 100;
font-size: 0.75em;
vertical-align: middle;
}
button:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
</style>

View File

@ -27,3 +27,25 @@ function createLogin() {
}
export const login = createLogin();
function createExtraNav() {
const { subscribe, set, update } = writable<
(string | [string, () => void])[] | undefined
>();
return {
subscribe: (
...params: Parameters<typeof subscribe>
): ReturnType<typeof subscribe> => {
const unsubscribe = subscribe(...params);
return () => {
set(undefined);
unsubscribe();
};
},
set,
update
};
}
export const extraNav = createExtraNav();

View File

@ -1,8 +1,13 @@
export enum Permissions {
ALL = "*",
VIEW = "view",
ADD_PROFILE = "add_profile",
REMOVE_PROFILE = "remove_profile",
ADD_GRAPH = "add_graph",
REMOVE_GRAPH = "remove_graph",
VIEW_USERS = "view_users",
ADD_USER = "add_user",
EDIT_USER = "edit_user",

View File

@ -40,4 +40,7 @@
padding-top: $navbar-padding;
min-height: calc(100% - #{$navbar-padding} - 0.75em);
}
:global(button) {
font-family: "Fira Code", monospace;
}
</style>

View File

@ -34,19 +34,9 @@
>
<h2>Login</h2>
<p id="status">{status}</p>
<input
type="text"
id="username"
placeholder="Username"
bind:value={username}
/><br />
<input
type="password"
id="password"
placeholder="Password"
bind:value={password}
/><br />
<input type="submit" id="submit" value="Login" />
<input type="text" placeholder="Username" bind:value={username} />
<input type="password" placeholder="Password" bind:value={password} />
<input type="submit" value="Login" />
</form>
</div>

View File

@ -1,6 +1,6 @@
<script lang="ts">
import { goto } from "@sapper/app";
import { login } from "../../components/stores";
import { login, extraNav } from "../../components/stores";
import {
getPlayerProfiles,
getUUID,
@ -8,12 +8,25 @@
putProfiles
} from "../../lib/api";
$extraNav; // important for subscription to store to be activated
let username = "";
let uuid = "";
let status = "";
let profilesPromise: ReturnType<typeof getPlayerProfiles> = new Promise(
resolve => resolve([])
);
$: if (!uuid) {
extraNav.set([
["Add", () => ([username, uuid, status] = ["", "", ""])]
]);
} else {
extraNav.set([
["Add", () => ([username, uuid, status] = ["", "", ""])],
username
]);
}
</script>
<svelte:head>
@ -38,9 +51,8 @@
<p id="status">{status}</p>
<input
type="text"
id="username"
bind:value={username}
placeholder="Minecraft Username"
bind:value={username}
/>
<input type="submit" value="Search" />
</form>

View File

@ -1,4 +1,6 @@
form {
display: flex;
flex-direction: column;
padding: 1em;
background-color: hsl(236, 10%, 20%);
p#status {
@ -6,7 +8,6 @@ form {
}
}
input {
width: calc(100% - 1.5em);
background: none;
padding: 0.75em;
margin-bottom: 1em;