refactor: create layout groups
This commit is contained in:
parent
ba6e54d7d5
commit
1c2e89bb79
26 changed files with 64 additions and 81 deletions
|
@ -1,22 +0,0 @@
|
|||
<script>
|
||||
import { IconSpiral } from '@tabler/icons-svelte';
|
||||
export let size = 32;
|
||||
</script>
|
||||
|
||||
<div class="spinner"><IconSpiral {size} class="spinner-icon" /></div>
|
||||
|
||||
<style>
|
||||
.spinner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.spinner-icon) {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -7,7 +7,7 @@
|
|||
import { createEventDispatcher } from 'svelte';
|
||||
const dispatch = createEventDispatcher<{ focus: void }>();
|
||||
|
||||
export let full = false;
|
||||
export let bg = false;
|
||||
|
||||
let sizes = {
|
||||
blockSize: 64,
|
||||
|
@ -28,7 +28,7 @@
|
|||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="test-card"
|
||||
class:full
|
||||
class:bg
|
||||
style="--block-size: {sizes.blockSize}px;
|
||||
--horizontal-margin: {sizes.horizontalMargin}px;
|
||||
--vertical-margin: {sizes.verticalMargin}px;
|
||||
|
@ -38,7 +38,7 @@
|
|||
--left-column: {leftColumn};"
|
||||
on:dblclick={() => dispatch('focus') && document.body.requestFullscreen()}
|
||||
>
|
||||
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={!full} />
|
||||
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={bg} />
|
||||
|
||||
<div class="axes">
|
||||
<Axes />
|
||||
|
@ -141,7 +141,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.test-card:not(.full) {
|
||||
.test-card.bg {
|
||||
& .info,
|
||||
& .column,
|
||||
& .axes,
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
</script>
|
||||
|
||||
<a href="/" class="hide-idle"><i class="ti ti-arrow-back"></i> {$i18n.t('Back')}</a>
|
||||
<slot />
|
||||
|
||||
<style>
|
||||
a {
|
||||
|
@ -22,5 +23,7 @@
|
|||
align-items: center;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
5
src/routes/(fullscreen)/card/+page.svelte
Normal file
5
src/routes/(fullscreen)/card/+page.svelte
Normal file
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import TestCard from '$lib/TestCard.svelte';
|
||||
</script>
|
||||
|
||||
<TestCard />
|
50
src/routes/(pages)/+layout.svelte
Normal file
50
src/routes/(pages)/+layout.svelte
Normal file
|
@ -0,0 +1,50 @@
|
|||
<script lang="ts">
|
||||
import TestCard from '$lib/TestCard.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { i18n } from '$lib/i18n';
|
||||
</script>
|
||||
|
||||
<TestCard bg on:focus={() => goto('/card')} />
|
||||
<main class:sub={!$page.data.root}>
|
||||
<a href=".." class="button button-back"><i class="ti ti-arrow-back" />{$i18n.t('Back')}</a>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid white;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main.sub {
|
||||
height: 90vh;
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.button-back {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
opacity: 0.66;
|
||||
transition: opacity 0.3s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
main:not(.sub) .button-back {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { version } from '../../package.json';
|
||||
import { version } from '../../../package.json';
|
||||
import { i18n } from '$lib/i18n';
|
||||
</script>
|
||||
|
|
@ -4,11 +4,7 @@
|
|||
import '@fontsource/b612/700.css';
|
||||
import '@tabler/icons-webfont/tabler-icons.css';
|
||||
import '../index.css';
|
||||
import TestCard from '$lib/TestCard.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { i18n } from '$lib/i18n';
|
||||
|
||||
let idleTimeout: NodeJS.Timeout | undefined;
|
||||
onMount(() => {
|
||||
|
@ -20,53 +16,11 @@
|
|||
}, 3000);
|
||||
});
|
||||
});
|
||||
|
||||
$: onlyCard = $page.data.card;
|
||||
</script>
|
||||
|
||||
<TestCard full={onlyCard} on:focus={() => goto('/card')} />
|
||||
<main class:content={!onlyCard} class:sub={!$page.data.root && !onlyCard}>
|
||||
<a href=".." class="button button-back"><i class="ti ti-arrow-back" />{$i18n.t('Back')}</a>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main.content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid white;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main.sub {
|
||||
height: 90vh;
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.button-back {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
opacity: 0.66;
|
||||
transition: opacity 0.3s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
main:not(.sub) .button-back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.hide-idle) {
|
||||
transition: opacity 1s;
|
||||
opacity: 1;
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
return {
|
||||
card: true
|
||||
};
|
||||
};
|
Loading…
Reference in a new issue