You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.1 KiB
Svelte
54 lines
1.1 KiB
Svelte
<script>
|
|
import { templates } from '$lib/templates/templates';
|
|
/**
|
|
* @typedef {{
|
|
* slug: string;
|
|
* templateIndex: number;
|
|
* templateImage: string;
|
|
* }}
|
|
* LoadFunctionData
|
|
*/
|
|
|
|
/** @type LoadFunctionData */ export let data;
|
|
import Form from '$lib/form/Form.svelte';
|
|
import Preview from '$lib/preview/Preview.svelte';
|
|
|
|
const slug = data.slug;
|
|
const templateIndex = data.templateIndex;
|
|
const templateImage = data.templateImage;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Carteles DMD - Plantilla {data.slug}</title>
|
|
</svelte:head>
|
|
|
|
<div class="main">
|
|
<section class="form"><Form /></section>
|
|
|
|
{#if templateIndex !== undefined}
|
|
<section class="preview">
|
|
<Preview {templateIndex} {templateImage} />
|
|
</section>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.main {
|
|
display: grid;
|
|
grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
|
|
grid-gap: 0.5rem;
|
|
min-height: calc(100vh - 5rem);
|
|
}
|
|
|
|
.form {
|
|
grid-column: 1/2;
|
|
background-color: rgb(230, 240, 240);
|
|
}
|
|
|
|
.preview {
|
|
grid-column: 2/3;
|
|
min-height: 200px;
|
|
background-color: rgb(240, 238, 240);
|
|
}
|
|
</style>
|