CSS Switch to Postcss + Various Changes
This commit is contained in:
parent
872645e1b0
commit
901cd16287
GPG key ID:
B6983AAA6B9A7A6C
9 changed files with 163 additions and 246 deletions
6
src/lib/components/Button.svelte
Normal file
6
src/lib/components/Button.svelte
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { writable, type Writable } from "svelte/store";
|
||||
|
||||
const AdminSelectedGameStore: Writable<number> = writable(1);
|
||||
const AdminSelectedGameStore: Writable<number> = writable(0);
|
||||
|
||||
export default AdminSelectedGameStore;
|
||||
|
|
@ -264,190 +264,185 @@
|
|||
<meta name="description" content="Admin Menu for managing Chellaris Sign-Ups" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="frame">
|
||||
{#if loaded}
|
||||
<List area="games" listTitle="Games">
|
||||
{#each Object.values(gameList) as game}
|
||||
<button class="list-card" class:active={game.id == $AdminSelectedGameStore ? 'active' : ''} on:click={() => setActiveGame(game.id)}>
|
||||
<div class="card-content">{game.name}</div>
|
||||
<button class="delete-box" on:click={() => deleteGame(game.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>
|
||||
</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}
|
||||
<div class="container p-12 max-h-full min-w-full">
|
||||
<div class="max-h-full min-w-full grid grid-rows-2 grid-cols-[20%,40%,40%] frame border border-white">
|
||||
{#if loaded}
|
||||
<List area="games" listTitle="Games">
|
||||
{#each Object.values(gameList) as game}
|
||||
<button class="list-card" class:active={game.id == $AdminSelectedGameStore ? 'active' : ''} on:click={() => setActiveGame(game.id)}>
|
||||
<div class="card-content">{game.name}</div>
|
||||
<button class="delete-box" on:click={() => deleteGame(game.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>
|
||||
</button>
|
||||
{/each}
|
||||
{#if newGroupForm}
|
||||
{#if newGameForm}
|
||||
<div class="list-card active">
|
||||
<form on:submit={addGroup}>
|
||||
<input bind:value={newGroupName} />
|
||||
<input type="submit" value="Add Group" />
|
||||
<form on:submit={addGame}>
|
||||
<input bind:value={newGameName} />
|
||||
<input type="submit" value="Add Game" />
|
||||
</form>
|
||||
</div>
|
||||
{:else if addingNewGroup}
|
||||
{:else if addingNewGame}
|
||||
<div class="list-card loading">
|
||||
<div class="card-content">{newGroupName}</div>
|
||||
<div class="card-content">{newGameName}</div>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
class="list-card"
|
||||
on:click={() => {
|
||||
newGroupForm = true;
|
||||
newGameForm = true;
|
||||
}}
|
||||
>
|
||||
<div class="card-content button">+</div>
|
||||
</button>
|
||||
{/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)}>
|
||||
</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>
|
||||
</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}
|
||||
</button>
|
||||
{/each}
|
||||
{#if newGroupForm}
|
||||
<div class="list-card active">
|
||||
<form on:submit={addGroup}>
|
||||
<input bind:value={newGroupName} />
|
||||
<input type="submit" value="Add Group" />
|
||||
</form>
|
||||
</div>
|
||||
{:else if addingNewGroup}
|
||||
<div class="list-card loading">
|
||||
<div class="card-content">{newGroupName}</div>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
class="list-card"
|
||||
on:click={() => {
|
||||
newGroupForm = true;
|
||||
}}
|
||||
>
|
||||
<div class="card-content button">+</div>
|
||||
</button>
|
||||
{/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>
|
||||
</List>
|
||||
<List area="details" listTitle="Empire Details">
|
||||
{#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'}
|
||||
<div>
|
||||
Select Empire
|
||||
</div>
|
||||
{: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">
|
||||
</List>
|
||||
<List area="details" listTitle="Empire Details">
|
||||
{#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'}
|
||||
<div>
|
||||
Select Empire
|
||||
</div>
|
||||
{: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 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</List>
|
||||
<List area="details" listTitle="Empire Details">
|
||||
<LoadingSpinnerLocal />
|
||||
</List>
|
||||
{/if}
|
||||
</List>
|
||||
<List area="details" listTitle="Empire Details">
|
||||
<LoadingSpinnerLocal />
|
||||
</List>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.frame {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'games 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 */
|
||||
|
|
|
|||
|
|
@ -182,7 +182,8 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if newEmpire && newEmpirePrepared}
|
||||
<div>
|
||||
{#if newEmpire && newEmpirePrepared}
|
||||
<!-- <div>
|
||||
ID: {empire.id}
|
||||
</div>
|
||||
|
|
@ -378,6 +379,8 @@
|
|||
|
||||
<button on:click={updateEmpire}>Save</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
export let listTitle = 'List';
|
||||
</script>
|
||||
|
||||
<div class="container" style={'--area:' + area}>
|
||||
<div class="container grid min-h-none max-h-full" style={'grid-area:' + area}>
|
||||
<div class="header">
|
||||
{listTitle}
|
||||
</div>
|
||||
|
|
@ -14,15 +14,11 @@
|
|||
|
||||
<style>
|
||||
.container {
|
||||
grid-area: var(--area);
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'list-header'
|
||||
'list-content';
|
||||
grid-template-rows: 2rem calc(100% - 2rem);
|
||||
grid-template-columns: 100%;
|
||||
min-height: none;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<script lang="ts">
|
||||
import SubNav from './SubNav.svelte';
|
||||
import '../styles.css';
|
||||
import '../../app.postcss';
|
||||
import { goto } from "$app/navigation";
|
||||
import { page } from "$app/stores";
|
||||
import GraphsTabStore from '$lib/stores/GraphsTab';
|
||||
|
||||
let graphsTab = "tab";
|
||||
let graphsTab = "excel-style";
|
||||
// Tab Detection
|
||||
GraphsTabStore.subscribe(tab => {
|
||||
graphsTab = tab;
|
||||
|
|
|
|||
Reference in a new issue