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,7 +264,8 @@
|
|||
<meta name="description" content="Admin Menu for managing Chellaris Sign-Ups" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="frame">
|
||||
<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}
|
||||
|
|
@ -434,20 +435,14 @@
|
|||
</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,6 +182,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if newEmpire && newEmpirePrepared}
|
||||
<!-- <div>
|
||||
ID: {empire.id}
|
||||
|
|
@ -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