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">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>

21
src/lib/BackgroundGrid.svelte
View file

@ -12,10 +12,10 @@
let blockSize = 64;
let cornerBlocks = 2;
let horizontalMargin = 0;
let verticalMargin = 0;
let horizontalMargin = MARGIN_SIZE;
let verticalMargin = MARGIN_SIZE;
let unloaded = true;
$: updateCounts();
function updateCounts() {
const gridWidth = window.innerWidth - MARGIN_SIZE;
const gridHeight = window.innerHeight - MARGIN_SIZE;
@ -62,11 +62,13 @@
onMount(() => {
window.addEventListener('resize', updateCountsOnResize);
updateCounts();
unloaded = false;
});
</script>
<div
class="background"
class:unloaded
class:even-vertical={verticalCount % 2 === 0}
style="--horizontal-count: {horizontalCount};
--vertical-count: {verticalCount};
@ -227,4 +229,17 @@
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>

4
src/lib/ScreenInfo.svelte
View file

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

12
src/lib/TestCard.svelte
View file

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