Various Small fixes
This commit is contained in:
parent
86dc51aa61
commit
5f69bf5f71
GPG key ID:
B6983AAA6B9A7A6C
8 changed files with 175 additions and 5 deletions
31
src/routes/graphs/+layout.svelte
Normal file
31
src/routes/graphs/+layout.svelte
Normal 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>
|
||||
16
src/routes/graphs/+page.svelte
Normal file
16
src/routes/graphs/+page.svelte
Normal 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>
|
||||
122
src/routes/graphs/SubNav.svelte
Normal file
122
src/routes/graphs/SubNav.svelte
Normal 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>
|
||||
1
src/routes/graphs/tab/+page.svelte
Normal file
1
src/routes/graphs/tab/+page.svelte
Normal file
|
|
@ -0,0 +1 @@
|
|||
<h1>Example Tab</h1>
|
||||
1
src/routes/graphs/tab2/+page.svelte
Normal file
1
src/routes/graphs/tab2/+page.svelte
Normal file
|
|
@ -0,0 +1 @@
|
|||
<h1>Example Tab</h1>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
.fullscreen-margin {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height: 100%;
|
||||
height: 90vh;
|
||||
flex-grow: 1;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export async function load({ fetch }) {
|
||||
import type { PageLoad } from "../$types";
|
||||
export const load: PageLoad = async ({ fetch }) => {
|
||||
const apiBaseUrl = 'https://www.chellaris.net/api/v1';
|
||||
const popsRet: { speciesArray: Array<number> } = await (await fetch(apiBaseUrl + '/species')).json();
|
||||
const popsData: Array<number> = popsRet.speciesArray;
|
||||
|
|
|
|||
|
|
@ -149,8 +149,7 @@
|
|||
options.scales.r.max = scaleLimit;
|
||||
|
||||
if (typeof localStorage !== "undefined") {
|
||||
console.log("Set Store to ", weighted)
|
||||
localStorage.setItem("weighted", weighted.toString())
|
||||
localStorage.setItem("weighted", weighted.toString());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Reference in a new issue