diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte index cdaef96..4d71912 100644 --- a/src/lib/preview/Preview.svelte +++ b/src/lib/preview/Preview.svelte @@ -1,18 +1,15 @@
-
+
{#if templateIndex >= 0} - <div class="subtitle">{$subtitle}</div> - <div class="content">{@html $content}</div> - <div class="weekday">{$weekday}</div> - {#if newdate.date}<div class="date">{newdate.date}</div>{/if} - {#if newdate.time}<div class="time">{newdate.time}</div>{/if} - <div class="address">{$address}</div> + <Subtitle {templateIndex} /> + <Content {templateIndex} /> + <Weekday {templateIndex} /> + <Date {templateIndex} /> + <Address {templateIndex} /> + <!-- <div class="address">{$address}</div> --> {/if} {#if $organizedBy[0] && $colabs[0]} <div class="orgcolab"> @@ -111,47 +108,14 @@ aspect-ratio: 1/1.4142; min-height: 842px; align-self: center; - /* background-color: rebeccapurple; */ width: auto; - background-image: url('/imagen01.png'); + /* background-image: url('/imagen01.png'); */ background-size: contain; position: relative; padding: 1rem; - /* border-radius: 0.5rem; */ } - .subtitle { - position: absolute; - display: flex; - top: 410px; - left: 1rem; - right: 2rem; - font-size: 1.2rem; - color: #787; - text-transform: uppercase; - height: 3rem; - overflow: hidden; - text-align: center; - align-items: start; - justify-content: center; - } - - .content { - position: absolute; - display: flex; - flex-direction: column; - justify-content: center; - top: 480px; - left: 1.5rem; - right: 17rem; - height: 8.5rem; - font-size: 0.8rem; - color: #222; - line-height: 1rem; - overflow: hidden; - } - - .weekday { + /* .weekday { position: absolute; text-transform: uppercase; top: 600px; @@ -163,9 +127,9 @@ font-weight: 700; overflow: hidden; text-align: center; - } + } */ - .date { + /* .date { position: absolute; text-transform: uppercase; top: 625px; @@ -177,8 +141,8 @@ max-height: 2rem; overflow: hidden; text-align: center; - } - + } */ + /* .time { position: absolute; top: 645px; @@ -190,9 +154,9 @@ overflow: hidden; text-align: center; font-weight: 700; - } + } */ - .address { + /* .address { position: absolute; display: grid; top: 620px; @@ -209,7 +173,7 @@ white-space: pre-wrap; align-items: center; justify-content: center; - } + } */ .imagetitle { position: absolute; @@ -292,5 +256,4 @@ grid-column: 2/3; display: flex; } - /* @import url(`'${template}.css'`); */ </style> diff --git a/src/lib/templates/Address.svelte b/src/lib/templates/Address.svelte new file mode 100644 index 0000000..6831217 --- /dev/null +++ b/src/lib/templates/Address.svelte @@ -0,0 +1,37 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { address } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $address} + <div + class="address" + style=" + top: {templates[templateIndex].address.top}px; + height: {templates[templateIndex].address.height}rem; + left: {templates[templateIndex].address.left}rem; + right: {templates[templateIndex].address.right}rem; + color: {templates[templateIndex].address.color}; + font-size: {templates[templateIndex].address.fontSize}rem; + font-family: {templates[templateIndex].address.fontFamily}; + line-height: {templates[templateIndex].address.lineHeight}; + " + > + {$address} + </div> +{/if} + +<style> + .address { + position: absolute; + display: grid; + text-align: center; + font-weight: 700; + overflow: hidden; + white-space: pre-wrap; + align-items: center; + justify-content: center; + } +</style> diff --git a/src/lib/templates/Content.svelte b/src/lib/templates/Content.svelte new file mode 100644 index 0000000..636f0ae --- /dev/null +++ b/src/lib/templates/Content.svelte @@ -0,0 +1,33 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { content } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $content} + <div + class="content" + style=" + top: {templates[templateIndex].content.top}px; + height: {templates[templateIndex].content.height}rem; + left: {templates[templateIndex].content.left}rem; + right: {templates[templateIndex].content.right}rem; + color: {templates[templateIndex].content.color}; + font-size: {templates[templateIndex].content.fontSize}rem; + font-family: {templates[templateIndex].content.fontFamily}; + " + > + {@html $content} + </div> +{/if} + +<style> + .content { + position: absolute; + display: flex; + flex-direction: column; + overflow: hidden; + justify-content: center; + } +</style> diff --git a/src/lib/templates/Date.svelte b/src/lib/templates/Date.svelte new file mode 100644 index 0000000..8de4508 --- /dev/null +++ b/src/lib/templates/Date.svelte @@ -0,0 +1,89 @@ +<script> + import { getMonthName } from '$lib/monthName'; + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { date } from '$lib/stores/store'; + + /** @typedef + * {{ + * date: string; + * time: string; + * }} Newdate + */ + + /** @type {Newdate} */ let newdate = { date: '', time: '' }; + + const convertDateTime = (/** @type {(string | undefined)} */ datetime) => { + if (datetime == undefined) { + return { + date: '', + time: '' + }; + } + const monthNumber = datetime.split('-')[1]; + const day = datetime.split('-')[2].split('T')[0]; + const time = datetime.split('T')[1]; + const month = getMonthName(monthNumber); + return { + date: `${day} de ${month}`, + time: time + }; + }; + + $: if ($date !== '') { + newdate = convertDateTime($date); + } +</script> + +{#if templates[templateIndex] && newdate.date} + <div + class="date" + style=" + top: {templates[templateIndex].date.top}px; + height: {templates[templateIndex].date.height}rem; + left: {templates[templateIndex].date.left}rem; + right: {templates[templateIndex].date.right}rem; + color: {templates[templateIndex].date.color}; + font-size: {templates[templateIndex].date.fontSize}rem; + font-family: {templates[templateIndex].date.fontFamily}; + " + > + {newdate.date} + </div> +{/if} +{#if templates[templateIndex] && newdate.time} + <div + class="time" + style=" + top: {templates[templateIndex].time.top}px; + height: {templates[templateIndex].time.height}rem; + left: {templates[templateIndex].time.left}rem; + right: {templates[templateIndex].time.right}rem; + color: {templates[templateIndex].time.color}; + font-size: {templates[templateIndex].time.fontSize}rem; + font-family: {templates[templateIndex].time.fontFamily}; + " + > + {newdate.time} + </div> +{/if} + +<style> + .date { + position: absolute; + text-transform: uppercase; + overflow: hidden; + display: flex; + justify-content: center; + align-items: start; + text-align: center; + } + + .time { + position: absolute; + overflow: hidden; + text-align: center; + font-weight: 700; + } +</style> diff --git a/src/lib/templates/Subtitle.svelte b/src/lib/templates/Subtitle.svelte new file mode 100644 index 0000000..14fccea --- /dev/null +++ b/src/lib/templates/Subtitle.svelte @@ -0,0 +1,35 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { subtitle } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $subtitle} + <div + class="subtitle" + style=" + top: {templates[templateIndex].subtitle.top}px; + height: {templates[templateIndex].subtitle.height}rem; + left: {templates[templateIndex].subtitle.left}rem; + right: {templates[templateIndex].subtitle.right}rem; + color: {templates[templateIndex].subtitle.color}; + font-size: {templates[templateIndex].subtitle.fontSize}rem; + font-family: {templates[templateIndex].subtitle.fontFamily}; + " + > + {$subtitle} + </div> +{/if} + +<style> + .subtitle { + position: absolute; + font-variant: small-caps; + overflow: hidden; + display: flex; + justify-content: center; + align-items: start; + text-align: center; + } +</style> diff --git a/src/lib/templates/Weekday.svelte b/src/lib/templates/Weekday.svelte new file mode 100644 index 0000000..2bd8227 --- /dev/null +++ b/src/lib/templates/Weekday.svelte @@ -0,0 +1,33 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { weekday } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $weekday} + <div + class="weekday" + style=" + top: {templates[templateIndex].weekday.top}px; + height: {templates[templateIndex].weekday.height}rem; + left: {templates[templateIndex].weekday.left}rem; + right: {templates[templateIndex].weekday.right}rem; + color: {templates[templateIndex].weekday.color}; + font-size: {templates[templateIndex].weekday.fontSize}rem; + font-family: {templates[templateIndex].weekday.fontFamily}; + " + > + {$weekday} + </div> +{/if} + +<style> + .weekday { + position: absolute; + text-transform: uppercase; + font-weight: 700; + overflow: hidden; + text-align: center; + } +</style> diff --git a/src/lib/templates/templates.js b/src/lib/templates/templates.js index 338dac5..231de45 100644 --- a/src/lib/templates/templates.js +++ b/src/lib/templates/templates.js @@ -15,10 +15,12 @@ import { verde } from '$lib/templates/verde'; /** * @typedef {{ * name: string; + * image: string; * heading: Element; * title: Element; * subtitle: Element; - * datetime: Element; + * date: Element; + * time: Element; * weekday: Element; * content: Element; * address: Element; diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js index 234c84f..164f964 100644 --- a/src/lib/templates/verde.js +++ b/src/lib/templates/verde.js @@ -1,5 +1,6 @@ -/** @typedef {{ +/** +* @typedef {{ * top: number; * height: number; * right: number; @@ -14,10 +15,12 @@ /** * @typedef {{ * name: string; +* image: string; * heading: Element; * title: Element; * subtitle: Element; -* datetime: Element; +* date: Element; +* time: Element; * weekday: Element; * content: Element; * address: Element; @@ -27,6 +30,7 @@ /** @type {Template} */ export const verde = { name: "verde", + image: "imagen01.png", heading: { top: 300, height: 1.2, @@ -49,53 +53,63 @@ export const verde = { }, subtitle: { - top: 100, - height: 6, - left: 2, + top: 420, + height: 3, + left: 1, right: 2, - fontSize: 1.8, - color: "firebrick", + fontSize: 1.2, + color: "#787", fontFamily: "Gill Sans, sans-serif", - lineHeight: 2 + lineHeight: 1.5 }, content: { - top: 100, - height: 6, - left: 2, - right: 2, - fontSize: 1.8, - color: "firebrick", - fontFamily: "Gill Sans, sans-serif", - lineHeight: 1 + top: 480, + height: 8.5, + left: 1.5, + right: 17, + fontSize: 0.8, + color: "#222", + fontFamily: "sans-serif", + lineHeight: 1.1 }, - datetime: { - top: 400, + date: { + top: 625, height: 4, - left: 2, - right: 2, - fontSize: 1, - color: "firebrick", + left: 18.5, + right: 4, + fontSize: 1.1, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 1 + }, + time: { + top: 645, + height: 2, + left: 18.5, + right: 5, + fontSize: 1.8, + color: "#fff", fontFamily: "sans-serif", lineHeight: 1 }, weekday: { - top: 500, + top: 600, height: 1.5, - left: 2, - right: 2, - fontSize: 1, - color: "#333", + left: 18.5, + right: 5, + fontSize: 1.3, + color: "#fff", fontFamily: "sans-serif", - lineHeight: 1 + lineHeight: 1.8 }, address: { - top: 500, - height: 1.5, + top: 625, + height: 4.5, left: 2, - right: 2, + right: 20, fontSize: 1, - color: "#333", + color: "firebrick", fontFamily: "sans-serif", - lineHeight: 1 + lineHeight: 1.5 }, } \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8954221..c5f6527 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,8 +1,4 @@ <script> - import Form from '$lib/form/Form.svelte'; - import Preview from '$lib/preview/Preview.svelte'; - - let template = 'verde'; </script> <svelte:head> @@ -14,26 +10,18 @@ </svelte:head> <div class="main"> - <section class="form"><Form /></section> - <section class="preview"><Preview /></section> + <ul> + <li><a href="/verde">Plantilla Verde</a></li> + </ul> </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); + grid-template-columns: repeat(4, min-content); + max-width: 900px; + margin: 0 auto; + border: 1px solid blue; + padding: 1rem; } </style> diff --git a/src/routes/[slug]/+error.svelte b/src/routes/[slug]/+error.svelte new file mode 100644 index 0000000..d19e1de --- /dev/null +++ b/src/routes/[slug]/+error.svelte @@ -0,0 +1,14 @@ +<script> + import { page } from '$app/stores'; +</script> + +{#if $page.error} + <div class="error-message"><h1>{$page.status}: {$page.error.message}</h1></div> +{/if} + +<style> + .error-message { + max-width: 480px; + margin: 0 auto; + } +</style> diff --git a/src/routes/[slug]/+page.js b/src/routes/[slug]/+page.js index 1a2d908..54b2ce7 100644 --- a/src/routes/[slug]/+page.js +++ b/src/routes/[slug]/+page.js @@ -1,12 +1,21 @@ +import { error } from '@sveltejs/kit'; import { templates } from '$lib/templates/templates'; /** @type {import('./$types').PageLoad} */ export function load(event) { + + /** @type {string} */ const slug = event.params.slug; - /** @type {number|undefined} */ const templateIndex = templates.map((e) => e.name).indexOf(slug); + + /** @type {number} */ const templateIndex = templates.map((e) => e.name).indexOf(slug); + /** @type {string} */ const templateImage = templates[templateIndex].image; if (templateIndex !== -1) { return { - slug + slug, + templateIndex, + templateImage } } + + throw error(404, "Not found"); } diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte index 38f1510..5c127ed 100644 --- a/src/routes/[slug]/+page.svelte +++ b/src/routes/[slug]/+page.svelte @@ -1,26 +1,33 @@ <script> import { templates } from '$lib/templates/templates'; - export let data; + /** + * @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; - /** @type {number} */ const templateIndex = templates.map((e) => e.name).indexOf(slug); + const templateIndex = data.templateIndex; + const templateImage = data.templateImage; </script> <svelte:head> - <title>Carteles DMD - + Carteles DMD - Plantilla {data.slug}
+ {#if templateIndex !== undefined}
- +
{/if}