Chellaris/chellaris-sign-up-site
Chellaris/chellaris-sign-up-site
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

CSS Switch to Postcss + Various Changes

Browse source
This commit is contained in:
Neshura 2023-12-04 16:07:21 +01:00
parent 872645e1b0
commit 901cd16287
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
9 changed files with 163 additions and 246 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lib/components/Button.svelte Normal file
View file

@ -0,0 +1,6 @@
<script lang="ts">
export let text: string;
export let action: any = () => {};
</script>
<button class="btn px-4 py-2 mx-2 rounded-token variant-ringed-primary hover:variant-filled-primary active:variant-filled-primary" on:click={action}>{text}</button>

34
src/lib/components/Modal.svelte
View file

@ -1,34 +0,0 @@
<script>
export let showModal = false;
export let isPromo = false;
</script>
{#if showModal}
<div class="backdrop" class:promo={isPromo} on:click|self>
<div class="modal">
<slot />
</div>
</div>
{/if}
<style>
.backdrop {
z-index: 200;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
}
.modal {
padding: 10px;
border-radius: 10px;
max-width: 400px;
margin: 10% auto;
text-align: center;
background: #3f3f3f;
}
.promo .modal {
background: crimson;
color: white;
}
</style>

49
src/lib/components/ModalExample.svelte
View file

@ -1,49 +0,0 @@
<script lang="ts">
import Modal from "$lib/components/Modal.svelte";
export let showSettings: boolean;
const toggleSettings = () => {
showSettings = !showSettings;
}
const handleSubmit = () => {
console.log("submitted ", gameGroupSettings);
}
let gameGroupSettings: [] = [];
</script>
<Modal showModal={showSettings} on:click={toggleSettings}>
<h3>Settings</h3>
<div class="settings-modal">
<form on:submit|preventDefault={handleSubmit}>
<b>Show Game Groups:</b><br>
<input type="checkbox" bind:group={gameGroupSettings} value="a">Group A<br>
<input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br>
<input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>
<div class="settings-modal-save">
<button>Save</button>
</div>
</form>
</div>
</Modal>
<style>
.settings-modal {
text-align: left;
}
.settings-modal input {
margin-left: 1rem;
}
.settings-modal-save {
text-align: center;
}
</style>

2
src/lib/components/consts.ts
View file

@ -1,2 +1,2 @@
export const apiBaseUrl = 'https://www.chellaris.net/api'; export const apiBaseUrl = 'https://wip.chellaris.net/api';
export const MACHINE_GROUP_ID = 12; export const MACHINE_GROUP_ID = 12;

2
src/lib/stores/admin-page/GameStore.ts
View file

@ -1,5 +1,5 @@
import { writable, type Writable } from "svelte/store"; import { writable, type Writable } from "svelte/store";
const AdminSelectedGameStore: Writable<number> = writable(1); const AdminSelectedGameStore: Writable<number> = writable(0);
export default AdminSelectedGameStore; export default AdminSelectedGameStore;

301
src/routes/admin/+page.svelte
View file

@ -264,190 +264,185 @@
<meta name="description" content="Admin Menu for managing Chellaris Sign-Ups" /> <meta name="description" content="Admin Menu for managing Chellaris Sign-Ups" />
</svelte:head> </svelte:head>
<div class="frame"> <div class="container p-12 max-h-full min-w-full">
{#if loaded} <div class="max-h-full min-w-full grid grid-rows-2 grid-cols-[20%,40%,40%] frame border border-white">
<List area="games" listTitle="Games"> {#if loaded}
{#each Object.values(gameList) as game} <List area="games" listTitle="Games">
<button class="list-card" class:active={game.id == $AdminSelectedGameStore ? 'active' : ''} on:click={() => setActiveGame(game.id)}> {#each Object.values(gameList) as game}
<div class="card-content">{game.name}</div> <button class="list-card" class:active={game.id == $AdminSelectedGameStore ? 'active' : ''} on:click={() => setActiveGame(game.id)}>
<button class="delete-box" on:click={() => deleteGame(game.id)}> <div class="card-content">{game.name}</div>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <button class="delete-box" on:click={() => deleteGame(game.id)}>
<path fill="none" d="M0 0 24 24 M24 0 0 24" /> <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
</svg> <path fill="none" d="M0 0 24 24 M24 0 0 24" />
</button> </svg>
</button> </button>
{/each}
{#if newGameForm}
<div class="list-card active">
<form on:submit={addGame}>
<input bind:value={newGameName} />
<input type="submit" value="Add Game" />
</form>
</div>
{:else if addingNewGame}
<div class="list-card loading">
<div class="card-content">{newGameName}</div>
</div>
{:else}
<button
class="list-card"
on:click={() => {
newGameForm = true;
}}
>
<div class="card-content button">+</div>
</button>
{/if}
</List>
<List area="groups" listTitle="Groups">
{#if loadingGameData}
<LoadingSpinnerLocal />
{:else}
{#each Object.values(groupList) as group}
<button
class="list-card"
class:active={$AdminSelectedGroupStore[$AdminSelectedGameStore]
? $AdminSelectedGroupStore[$AdminSelectedGameStore][group.id]
? 'active'
: ''
: ''}
on:click={() => toggleActiveGroup(group.id)}
>
<div class="card-content">{group.name}</div>
{#if group.name !== 'N/A'}
<button class="delete-box" on:click={() => deleteGroup(group.id)}>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0 24 24 M24 0 0 24" />
</svg>
</button>
{/if}
</button> </button>
{/each} {/each}
{#if newGroupForm} {#if newGameForm}
<div class="list-card active"> <div class="list-card active">
<form on:submit={addGroup}> <form on:submit={addGame}>
<input bind:value={newGroupName} /> <input bind:value={newGameName} />
<input type="submit" value="Add Group" /> <input type="submit" value="Add Game" />
</form> </form>
</div> </div>
{:else if addingNewGroup} {:else if addingNewGame}
<div class="list-card loading"> <div class="list-card loading">
<div class="card-content">{newGroupName}</div> <div class="card-content">{newGameName}</div>
</div> </div>
{:else} {:else}
<button <button
class="list-card" class="list-card"
on:click={() => { on:click={() => {
newGroupForm = true; newGameForm = true;
}} }}
> >
<div class="card-content button">+</div> <div class="card-content button">+</div>
</button> </button>
{/if} {/if}
{/if} </List>
</List> <List area="groups" listTitle="Groups">
<List area="empires" listTitle="Empires"> {#if loadingGameData}
<div class="empires-table"> <LoadingSpinnerLocal />
<div class="table-headers"> {:else}
<div class="table-header">Empire Name</div> {#each Object.values(groupList) as group}
<div class="table-header">Discord User</div> <button
</div> class="list-card"
<div class="table-content"> class:active={$AdminSelectedGroupStore[$AdminSelectedGameStore]
{#if loadingGameData} ? $AdminSelectedGroupStore[$AdminSelectedGameStore][group.id]
<LoadingSpinnerLocal /> ? 'active'
{:else} : ''
{#each Object.values(empireList) as empire} : ''}
<button on:click={() => toggleActiveGroup(group.id)}
class="list-card" >
class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''} <div class="card-content">{group.name}</div>
on:click={() => setActiveEmpire(empire.id)} {#if group.name !== 'N/A'}
> <button class="delete-box" on:click={() => deleteGroup(group.id)}>
<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{empire.name}</div>
<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>
{empire.discord_user || 'N/A'}
</div>
<button class="delete-box" on:click={() => deleteEmpire(empire)}>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0 24 24 M24 0 0 24" /> <path fill="none" d="M0 0 24 24 M24 0 0 24" />
</svg> </svg>
</button> </button>
</button> {/if}
{:else} </button>
<div class="list-card"> {/each}
<div class="card-content">No Empires Present</div> {#if newGroupForm}
</div> <div class="list-card active">
{/each} <form on:submit={addGroup}>
{#if addingNewEmpire} <input bind:value={newGroupName} />
<div class="list-card loading"> <input type="submit" value="Add Group" />
<div class="card-content active">{empireData.name}</div> </form>
<div class="card-content active"> </div>
{empireData.discord_user || 'N/A'} {:else if addingNewGroup}
</div> <div class="list-card loading">
</div> <div class="card-content">{newGroupName}</div>
{:else} </div>
<button class="list-card" on:click={addEmpire}> {:else}
<div class="card-content button">+</div> <button
</button> class="list-card"
{/if} on:click={() => {
newGroupForm = true;
}}
>
<div class="card-content button">+</div>
</button>
{/if} {/if}
{/if}
</List>
<List area="empires" listTitle="Empires">
<div class="empires-table">
<div class="table-headers">
<div class="table-header">Empire Name</div>
<div class="table-header">Discord User</div>
</div>
<div class="table-content">
{#if loadingGameData}
<LoadingSpinnerLocal />
{:else}
{#each Object.values(empireList) as empire}
<button
class="list-card"
class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}
on:click={() => setActiveEmpire(empire.id)}
>
<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{empire.name}</div>
<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>
{empire.discord_user || 'N/A'}
</div>
<button class="delete-box" on:click={() => deleteEmpire(empire)}>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0 24 24 M24 0 0 24" />
</svg>
</button>
</button>
{:else}
<div class="list-card">
<div class="card-content">No Empires Present</div>
</div>
{/each}
{#if addingNewEmpire}
<div class="list-card loading">
<div class="card-content active">{empireData.name}</div>
<div class="card-content active">
{empireData.discord_user || 'N/A'}
</div>
</div>
{:else}
<button class="list-card" on:click={addEmpire}>
<div class="card-content button">+</div>
</button>
{/if}
{/if}
</div>
</div> </div>
</div> </List>
</List> <List area="details" listTitle="Empire Details">
<List area="details" listTitle="Empire Details"> {#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'}
{#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'} <div>
<div> Select Empire
Select Empire </div>
</div> {:else if loadingEmpireData || loadingGameData}
{:else if loadingEmpireData || loadingGameData}
<LoadingSpinnerLocal />
{:else if addingNewEmpire || typeof empireData.group !== 'undefined'}
<EmpireDetails
bind:empire={empireData}
groups={groupList}
{auth}
bind:newEmpire={addingNewEmpire}
on:updated={updateGameData}
on:created={finishAddNewEmpire}
/>
{/if}
</List>
{:else}
<List area="games" listTitle="Games">
<LoadingSpinnerLocal />
</List>
<List area="groups" listTitle="Groups">
<LoadingSpinnerLocal />
</List>
<List area="empires" listTitle="Empires">
<div class="empires-table">
<div class="table-headers">
<div class="table-header">Empire Name</div>
<div class="table-header">Discord User</div>
</div>
<div class="table-content">
<LoadingSpinnerLocal /> <LoadingSpinnerLocal />
{:else if addingNewEmpire || typeof empireData.group !== 'undefined'}
<EmpireDetails
bind:empire={empireData}
groups={groupList}
{auth}
bind:newEmpire={addingNewEmpire}
on:updated={updateGameData}
on:created={finishAddNewEmpire}
/>
{/if}
</List>
{:else}
<List area="games" listTitle="Games">
<LoadingSpinnerLocal />
</List>
<List area="groups" listTitle="Groups">
<LoadingSpinnerLocal />
</List>
<List area="empires" listTitle="Empires">
<div class="empires-table">
<div class="table-headers">
<div class="table-header">Empire Name</div>
<div class="table-header">Discord User</div>
</div>
<div class="table-content">
<LoadingSpinnerLocal />
</div>
</div> </div>
</div> </List>
</List> <List area="details" listTitle="Empire Details">
<List area="details" listTitle="Empire Details"> <LoadingSpinnerLocal />
<LoadingSpinnerLocal /> </List>
</List> {/if}
{/if} </div>
</div> </div>
<style> <style>
.frame { .frame {
display: grid;
grid-template-areas: grid-template-areas:
'games empires details' 'games empires details'
'groups empires details'; 'groups empires details';
grid-template-columns: 20% 40% 40%;
grid-template-rows: 50% 50%;
max-height: calc(100%);
overflow: hidden;
margin: 3rem;
box-sizing: border-box;
border: 1px solid white;
} }
/* General Classes */ /* General Classes */

5
src/routes/admin/EmpireDetails.svelte
View file

@ -182,7 +182,8 @@
} }
</script> </script>
{#if newEmpire && newEmpirePrepared} <div>
{#if newEmpire && newEmpirePrepared}
<!-- <div> <!-- <div>
ID: {empire.id} ID: {empire.id}
</div> </div>
@ -378,6 +379,8 @@
<button on:click={updateEmpire}>Save</button> <button on:click={updateEmpire}>Save</button>
{/if} {/if}
</div>
<style> <style>
</style> </style>

6
src/routes/admin/List.svelte
View file

@ -3,7 +3,7 @@
export let listTitle = 'List'; export let listTitle = 'List';
</script> </script>
<div class="container" style={'--area:' + area}> <div class="container grid min-h-none max-h-full" style={'grid-area:' + area}>
<div class="header"> <div class="header">
{listTitle} {listTitle}
</div> </div>
@ -14,15 +14,11 @@
<style> <style>
.container { .container {
grid-area: var(--area);
display: grid;
grid-template-areas: grid-template-areas:
'list-header' 'list-header'
'list-content'; 'list-content';
grid-template-rows: 2rem calc(100% - 2rem); grid-template-rows: 2rem calc(100% - 2rem);
grid-template-columns: 100%; grid-template-columns: 100%;
min-height: none;
max-height: 100%;
} }
.header { .header {

4
src/routes/graphs/+layout.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import SubNav from './SubNav.svelte'; import SubNav from './SubNav.svelte';
import '../styles.css'; import '../../app.postcss';
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { page } from "$app/stores"; import { page } from "$app/stores";
import GraphsTabStore from '$lib/stores/GraphsTab'; import GraphsTabStore from '$lib/stores/GraphsTab';
let graphsTab = "tab"; let graphsTab = "excel-style";
// Tab Detection // Tab Detection
GraphsTabStore.subscribe(tab => { GraphsTabStore.subscribe(tab => {
graphsTab = tab; graphsTab = tab;