Various Small fixes

This commit is contained in:
Neshura 2023-08-11 21:39:02 +02:00
parent 86dc51aa61
commit 5f69bf5f71
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
8 changed files with 175 additions and 5 deletions

View file

@ -0,0 +1,31 @@
<script>
import SubNav from './SubNav.svelte';
import '../styles.css';
</script>
<div class="app">
<SubNav />
<main>
<slot />
</main>
</div>
<style>
.app {
display: flex;
flex-direction: column;
min-height: 100%;
}
main {
flex: 1;
display: flex;
flex-direction: column;
padding: 2rem;
width: 100%;
max-height: 100%;
margin: 0 auto;
box-sizing: border-box;
}
</style>

View file

@ -0,0 +1,16 @@
<script>
import { page } from '$app/stores';
</script>
<svelte:head>
<title>Graphs</title>
<meta name="description" content="Chellaris Sign-Up Graphs" />
</svelte:head>
<h1>WIP</h1>
<style>
h1 {
width: 100%;
}
</style>

View file

@ -0,0 +1,122 @@
<script>
import { page } from '$app/stores';
import discord from '$lib/images/discord.svg';
</script>
<header>
<div class="corner">
</div>
<nav>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
</svg>
<ul>
<li aria-current={$page.url.pathname === '/graphs' ? 'page' : undefined}>
<a href="/graphs">Home</a>
</li>
<li aria-current={$page.url.pathname === '/graphs/tab' ? 'page' : undefined}>
<a href="/graphs/tab">Tab 1</a>
</li>
<li aria-current={$page.url.pathname === '/graphs/tab2' ? 'page' : undefined}>
<a href="/graphs/tab2">Tab 2</a>
</li>
</ul>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
</svg>
</nav>
<div class="corner">
</div>
</header>
<style>
header {
display: flex;
justify-content: space-between;
}
.corner {
width: 3em;
height: 3em;
}
.corner a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.corner img {
width: 2em;
height: 2em;
object-fit: contain;
}
nav {
display: flex;
justify-content: center;
--background: rgba(0, 0, 0, 0.7);
}
svg {
width: 2em;
height: 3em;
display: block;
}
path {
fill: var(--background);
}
ul {
position: relative;
padding: 0;
margin: 0;
height: 3em;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
background: var(--background);
background-size: contain;
}
li {
position: relative;
height: 100%;
}
li[aria-current='page']::before {
--size: 6px;
content: '';
width: 0;
height: 0;
position: absolute;
top: 0;
left: calc(50% - var(--size));
border: var(--size) solid transparent;
border-top: var(--size) solid var(--color-theme-1);
}
nav a {
display: flex;
height: 100%;
align-items: center;
padding: 0 0.5rem;
color: var(--color-text);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
transition: color 0.2s linear;
}
a:hover {
color: var(--color-theme-1);
}
</style>

View file

@ -0,0 +1 @@
<h1>Example Tab</h1>

View file

@ -0,0 +1 @@
<h1>Example Tab</h1>

View file

@ -39,7 +39,7 @@
.fullscreen-margin { .fullscreen-margin {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
min-height: 100%; height: 90vh;
flex-grow: 1; flex-grow: 1;
padding: 2rem; padding: 2rem;
} }

View file

@ -1,5 +1,5 @@
/** @type {import('./$types').PageLoad} */ import type { PageLoad } from "../$types";
export async function load({ fetch }) { export const load: PageLoad = async ({ fetch }) => {
const apiBaseUrl = 'https://www.chellaris.net/api/v1'; const apiBaseUrl = 'https://www.chellaris.net/api/v1';
const popsRet: { speciesArray: Array<number> } = await (await fetch(apiBaseUrl + '/species')).json(); const popsRet: { speciesArray: Array<number> } = await (await fetch(apiBaseUrl + '/species')).json();
const popsData: Array<number> = popsRet.speciesArray; const popsData: Array<number> = popsRet.speciesArray;

View file

@ -149,8 +149,7 @@
options.scales.r.max = scaleLimit; options.scales.r.max = scaleLimit;
if (typeof localStorage !== "undefined") { if (typeof localStorage !== "undefined") {
console.log("Set Store to ", weighted) localStorage.setItem("weighted", weighted.toString());
localStorage.setItem("weighted", weighted.toString())
} }
} }
</script> </script>