diff --git a/README.md b/README.md index ca45bc8..e3350a1 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,19 @@ Aplicación para que los grupos creen sus propios carteles. * [x] Separar fecha y hora en campos distintos. * [x] Quitar el 'de' de la fecha * [ ] Generar texto de boletín junto al cartel. +* [ ] Guardar una copia de todos los carteles que se creen y crear una página 'admin' que los muestre con fecha, permita borrarlos y tal. Se pueden guardar todos en Sqlite y listo. ### Verde -* [ ] Cambiar color de 'dirección' de rojo a verde -* [ ] Cambiar la plantilla por modelo nuevo +* [x] Cambiar color de 'dirección' de rojo a verde +* [x] Cambiar la plantilla por modelo nuevo ### Azul * [ ] Fecha y hora juntas en la esquina superior derecha * [ ] Intentar incluir "contenido" en la esquina superior izquierda + +### Corazón +* [ ] Incluir todos los elementos +* [ ] Confirmar con Esther + +### Nueva plantilla +* [ ] Incluir diff --git a/src/lib/templates/Address.svelte b/src/lib/components/Address.svelte similarity index 100% rename from src/lib/templates/Address.svelte rename to src/lib/components/Address.svelte diff --git a/src/lib/templates/Content.svelte b/src/lib/components/Content.svelte similarity index 100% rename from src/lib/templates/Content.svelte rename to src/lib/components/Content.svelte diff --git a/src/lib/components/Date.svelte b/src/lib/components/Date.svelte new file mode 100644 index 0000000..ac75a9a --- /dev/null +++ b/src/lib/components/Date.svelte @@ -0,0 +1,41 @@ + + +{#if templates[templateIndex] && newdate} +
+ {newdate} +
+{/if} + + diff --git a/src/lib/templates/Heading.svelte b/src/lib/components/Heading.svelte similarity index 100% rename from src/lib/templates/Heading.svelte rename to src/lib/components/Heading.svelte diff --git a/src/lib/templates/Subtitle.svelte b/src/lib/components/Subtitle.svelte similarity index 100% rename from src/lib/templates/Subtitle.svelte rename to src/lib/components/Subtitle.svelte diff --git a/src/lib/components/Text.svelte b/src/lib/components/Text.svelte new file mode 100644 index 0000000..92daf9f --- /dev/null +++ b/src/lib/components/Text.svelte @@ -0,0 +1,52 @@ + + +
+ + + {#if checked} +
+

Estimada/o amiga/o:

+

El {$weekday.toLowerCase()}, {textDate}, celebramos el acto '{$title}' en {city}.

+

Como siempre, la entrada es gratuita hasta completar aforo.

+

El acto comienza a las {$time}.

+

{@html $content}

+
+ {/if} +
+ + diff --git a/src/lib/templates/Time.svelte b/src/lib/components/Time.svelte similarity index 100% rename from src/lib/templates/Time.svelte rename to src/lib/components/Time.svelte diff --git a/src/lib/templates/Title.svelte b/src/lib/components/Title.svelte similarity index 100% rename from src/lib/templates/Title.svelte rename to src/lib/components/Title.svelte diff --git a/src/lib/templates/Weekday.svelte b/src/lib/components/Weekday.svelte similarity index 100% rename from src/lib/templates/Weekday.svelte rename to src/lib/components/Weekday.svelte diff --git a/src/lib/convertDate.js b/src/lib/convertDate.js new file mode 100644 index 0000000..8744dc8 --- /dev/null +++ b/src/lib/convertDate.js @@ -0,0 +1,23 @@ +import { getMonthName } from '$lib/monthName'; +/** + * @param {string} date - Fecha del evento + * @returns {string} - Fecha en dia (número) mes (letras) + */ +export const convertDate = (date) => { + if (date == undefined) { + return ''; + } + /** @type {string} */ const monthNumber = date.split('-')[1]; + /** @type {string} */ let day = date.split('-')[2].split('T')[0]; + /** @type {number} */ const dayNumber = Number(day); + /** @type {string} */ const month = getMonthName(monthNumber); + + /** Removes 0 on single digit days */ + if (dayNumber < 10) { + day = day.charAt(1); + } + + /** @type {string} */ const res = `${day} de ${month}`; + return res; +}; + diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte index 9e5c1de..e34cad1 100644 --- a/src/lib/preview/Preview.svelte +++ b/src/lib/preview/Preview.svelte @@ -4,14 +4,15 @@ import { organizedBy, colabs, canvas } from '$lib/stores/store'; - import Heading from '$lib/templates/Heading.svelte'; - import Title from '$lib/templates/Title.svelte'; - import Subtitle from '$lib/templates/Subtitle.svelte'; - import Content from '$lib/templates/Content.svelte'; - import Time from '$lib/templates/Time.svelte'; - import Date from '$lib/templates/Date.svelte'; - import Weekday from '$lib/templates/Weekday.svelte'; - import Address from '$lib/templates/Address.svelte'; + import Heading from '$lib/components/Heading.svelte'; + import Title from '$lib/components/Title.svelte'; + import Subtitle from '$lib/components/Subtitle.svelte'; + import Content from '$lib/components/Content.svelte'; + import Time from '$lib/components/Time.svelte'; + import Date from '$lib/components/Date.svelte'; + import Weekday from '$lib/components/Weekday.svelte'; + import Address from '$lib/components/Address.svelte'; + import Text from '$lib/components/Text.svelte';
@@ -74,6 +75,9 @@
{/if} +
+ +
diff --git a/src/lib/templates/azul.js b/src/lib/templates/azul.js index 13539e9..361de30 100644 --- a/src/lib/templates/azul.js +++ b/src/lib/templates/azul.js @@ -17,13 +17,13 @@ export const azul = { fontWeight: 700 }, title: { - top: 445, + top: 440, height: 7.5, left: 1, right: 1, fontSize: 3, color: "firebrick", - fontFamily: "sans-serif", + fontFamily: "'Arial', sans-serif", lineHeight: 2.4, textAlign: "right", fontWeight: 700 @@ -33,7 +33,7 @@ export const azul = { top: 575, height: 1.4, left: 1, - right: 2, + right: 1, fontSize: 1.6, color: "white", fontFamily: "Gill Sans, sans-serif", diff --git a/src/lib/templates/corazon.js b/src/lib/templates/corazon.js new file mode 100644 index 0000000..4e3f3cc --- /dev/null +++ b/src/lib/templates/corazon.js @@ -0,0 +1,104 @@ +import '$lib/templates/templates' + +/** @type {import('$lib/templates/templates').Template} */ +export const corazon = { + name: "corazon", + image: "corazon.png", + heading: { + top: 20, + height: 2, + left: 3, + right: 10, + fontSize: 2, + color: "white", + fontFamily: "sans-serif", + lineHeight: 2, + textAlign: "left", + fontWeight: 700 + }, + title: { + top: 445, + height: 7.5, + left: 1, + right: 1, + fontSize: 3, + color: "firebrick", + fontFamily: "sans-serif", + lineHeight: 2.4, + textAlign: "right", + fontWeight: 700 + + }, + subtitle: { + top: 575, + height: 1.4, + left: 1, + right: 2, + fontSize: 1.6, + color: "white", + fontFamily: "Gill Sans, sans-serif", + lineHeight: 1.5, + textAlign: "center", + fontWeight: 400 + }, + content: { + top: 480, + height: 8.5, + left: 1.5, + right: 17, + fontSize: 0, + color: "#222", + fontFamily: "sans-serif", + lineHeight: 1.1, + textAlign: "left", + fontWeight: 700 + }, + date: { + top: 25, + height: 4, + left: 5, + right: 1, + fontSize: 1.1, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 1, + textAlign: "right", + fontWeight: 700 + }, + time: { + top: 55, + height: 2, + left: 18.5, + right: 1, + fontSize: 1.8, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 2, + textAlign: "right", + fontWeight: 700 + }, + weekday: { + top: 25, + height: 1.5, + left: 1, + right: 10, + fontSize: 1.3, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 1.8, + textAlign: "left", + fontWeight: 700 + }, + address: { + top: 620, + height: 5.5, + left: 2, + right: 2, + fontSize: 1.2, + color: "white", + fontFamily: "sans-serif", + lineHeight: 1.8, + textAlign: "center", + fontWeight: 400 + }, +} diff --git a/src/lib/templates/templates.js b/src/lib/templates/templates.js index 52d4954..886cb5e 100644 --- a/src/lib/templates/templates.js +++ b/src/lib/templates/templates.js @@ -1,5 +1,6 @@ import { verde } from '$lib/templates/verde'; import { azul } from '$lib/templates/azul'; +import { corazon } from '$lib/templates/corazon'; /** * @typedef {{ * top: number; @@ -34,3 +35,4 @@ import { azul } from '$lib/templates/azul'; export const templates = []; templates.push(verde); templates.push(azul); +templates.push(corazon); diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js index e28133a..baf3509 100644 --- a/src/lib/templates/verde.js +++ b/src/lib/templates/verde.js @@ -3,39 +3,39 @@ import '$lib/templates/templates' /** @type {import('$lib/templates/templates').Template} */ export const verde = { name: "verde", - image: "imagen01.png", + image: "plantilla_verde.png", heading: { - top: 300, + top: 100, height: 1.2, - left: 1, + left: 8, right: 1, - fontSize: 1, - color: "grey", + fontSize: 1.5, + color: "white", fontFamily: "sans-serif", lineHeight: 1.1, textAlign: "left", fontWeight: 400 }, title: { - top: 320, + top: 150, height: 6, - left: 1, + left: 8, right: 1, - fontSize: 2.9, - color: "firebrick", + fontSize: 3, + color: "white", fontFamily: "Gill Sans, sans-serif", lineHeight: 2.1, textAlign: "center", fontWeight: 400 }, subtitle: { - top: 420, + top: 300, height: 3, - left: 1, + left: 8, right: 2, - fontSize: 1.4, - color: "#787", - fontFamily: "Gill Sans, sans-serif", + fontSize: 1.5, + color: "firebrick", + fontFamily: "'Arial', sans-serif", lineHeight: 1.5, textAlign: "center", fontWeight: 400 @@ -94,10 +94,10 @@ export const verde = { left: 2, right: 20, fontSize: 1, - color: "firebrick", + color: "#91b756", fontFamily: "sans-serif", lineHeight: 1.5, textAlign: "center", fontWeight: 700 }, -} \ No newline at end of file +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 70c9107..f0e76ee 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -10,12 +10,12 @@ />
-

Elige la plantilla que quieras usar para tu diseño

+

Elige plantilla