thm/test-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: re-enable SSR, somewhat functional pre-JS version
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Tomáš Mládek 2024-02-02 22:21:30 +01:00
parent c31aed6ba4
commit 854dcbdcc4
6 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app.html
View file

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>

21
src/lib/BackgroundGrid.svelte
View file

@ -12,10 +12,10 @@
let blockSize = 64; let blockSize = 64;
let cornerBlocks = 2; let cornerBlocks = 2;
let horizontalMargin = 0; let horizontalMargin = MARGIN_SIZE;
let verticalMargin = 0; let verticalMargin = MARGIN_SIZE;
let unloaded = true;
$: updateCounts();
function updateCounts() { function updateCounts() {
const gridWidth = window.innerWidth - MARGIN_SIZE; const gridWidth = window.innerWidth - MARGIN_SIZE;
const gridHeight = window.innerHeight - MARGIN_SIZE; const gridHeight = window.innerHeight - MARGIN_SIZE;
@ -62,11 +62,13 @@
onMount(() => { onMount(() => {
window.addEventListener('resize', updateCountsOnResize); window.addEventListener('resize', updateCountsOnResize);
updateCounts(); updateCounts();
unloaded = false;
}); });
</script> </script>
<div <div
class="background" class="background"
class:unloaded
class:even-vertical={verticalCount % 2 === 0} class:even-vertical={verticalCount % 2 === 0}
style="--horizontal-count: {horizontalCount}; style="--horizontal-count: {horizontalCount};
--vertical-count: {verticalCount}; --vertical-count: {verticalCount};
@ -227,4 +229,17 @@
border-left: 1px solid gray; border-left: 1px solid gray;
} }
} }
.background.unloaded {
& .grid {
width: calc(100vw - var(--horizontal-margin) * 2);
height: calc(100vh - var(--vertical-margin) * 2);
grid-template-rows: repeat(var(--vertical-count), 1fr);
grid-template-columns: repeat(var(--horizontal-count), 1fr);
}
& .edge {
justify-content: space-evenly;
}
}
</style> </style>

4
src/lib/ScreenInfo.svelte
View file

@ -2,7 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
let screenResolution = ''; let screenResolution = '... x ...';
let windowResolution = ''; let windowResolution = '';
function updateResolution() { function updateResolution() {
@ -26,7 +26,7 @@
<div class="resolution"> <div class="resolution">
<div class="title">Screen Resolution</div> <div class="title">Screen Resolution</div>
<div class="value">{screenResolution}</div> <div class="value">{screenResolution}</div>
{#if windowResolution !== screenResolution} {#if windowResolution && windowResolution !== screenResolution}
<div class="window" transition:fade> <div class="window" transition:fade>
<div class="title">Window Resolution</div> <div class="title">Window Resolution</div>
<div class="value">{windowResolution}</div> <div class="value">{windowResolution}</div>

12
src/lib/TestCard.svelte
View file

@ -7,15 +7,14 @@
let sizes = { let sizes = {
blockSize: 64, blockSize: 64,
horizontalCount: 8, horizontalCount: 16,
verticalCount: 8, verticalCount: 16,
horizontalMargin: 0, horizontalMargin: 0,
verticalMargin: 0 verticalMargin: 0
}; };
$: columnWidth = sizes.horizontalCount % 2 === 0 ? 3 : 4; $: columnWidth = sizes.horizontalCount % 2 === 0 ? 3 : 4;
$: columnHeight = 2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2); $: columnHeight = 2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2);
$: columnTop = (sizes.verticalCount - columnHeight) / 2;
$: leftColumn = sizes.horizontalCount / 4 - columnWidth / 2; $: leftColumn = sizes.horizontalCount / 4 - columnWidth / 2;
$: circleBlocks = $: circleBlocks =
2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) + 2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
@ -30,7 +29,6 @@
--circle-blocks: {circleBlocks}; --circle-blocks: {circleBlocks};
--column-width: {columnWidth}; --column-width: {columnWidth};
--column-height: {columnHeight}; --column-height: {columnHeight};
--column-top: {columnTop};
--left-column: {leftColumn};" --left-column: {leftColumn};"
> >
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} /> <BackgroundGrid on:change={(ev) => (sizes = ev.detail)} />
@ -103,7 +101,9 @@
.column { .column {
position: absolute; position: absolute;
top: calc(var(--vertical-margin) + var(--block-size) * var(--column-top)); top: 50%;
transform: translateY(-50%);
width: calc(var(--block-size) * var(--column-width)); width: calc(var(--block-size) * var(--column-width));
height: calc(var(--block-size) * var(--column-height)); height: calc(var(--block-size) * var(--column-height));
z-index: 9; z-index: 9;
@ -116,7 +116,7 @@
&.right { &.right {
right: calc(var(--horizontal-margin) + var(--block-size) * 3); right: calc(var(--horizontal-margin) + var(--block-size) * 3);
transform: rotate(180deg); transform: translateY(-50%) rotate(180deg);
} }
& .gradient { & .gradient {

2
src/routes/+layout.ts
View file

@ -1 +1 @@
export const ssr = false; export const prerender = true;

2
svelte.config.js
View file

@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
const config = { const config = {
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
kit: { kit: {
adapter: adapter({ fallback: 'index.html' }) adapter: adapter()
} }
}; };