un poco de todo (#11)

mezcla de cosas que mejoran la aplicación en su conjunto. Mejor separación de componentes, plantillas y demás cosas. Afina los tipos. De todo, vaya.

Co-authored-by: Borja Robert <borja@brobert.net>
Reviewed-on: #11

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
+* [x] Cambiar color de 'dirección' de rojo a verde
-* [ ] Cambiar la plantilla por modelo nuevo
+* [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

src/lib/components/Date.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+	import { date } from '$lib/stores/store';
+	import { convertDate } from '$lib/convertDate';
+	/** @type number */ export let templateIndex;
+
+	/** @type {string} */ let newdate;
+
+	$: if ($date !== '') {
+		newdate = convertDate($date);
+	}
+</script>
+
+{#if templates[templateIndex] && newdate}
+	<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};
+      text-align: {templates[templateIndex].date.textAlign};
+      font-weight: {templates[templateIndex].date.fontWeight};
+      line-height: {templates[templateIndex].date.lineHeight}rem;
+    "
+	>
+		{newdate}
+	</div>
+{/if}
+
+<style>
+	.date {
+		position: absolute;
+		text-transform: uppercase;
+		overflow: hidden;
+		display: block;
+	}
+</style>

src/lib/components/Text.svelte

@@ -0,0 +1,52 @@
+<script>
+	import {
+		heading,
+		title,
+		subtitle,
+		content,
+		date,
+		time,
+		weekday,
+		address
+	} from '$lib/stores/store';
+
+	import { convertDate } from '$lib/convertDate';
+
+	/** @type {string} */ let textDate = '';
+	/** @type {boolean} */ let checked = false;
+
+	$: if ($date !== '') {
+		textDate = convertDate($date);
+	}
+
+	$: city = $address.split('\n')[$address.split('\n').length - 1];
+</script>
+
+<div class="text-container">
+	<input type="checkbox" bind:checked />
+
+	{#if checked}
+		<div class="text" contenteditable="true">
+			<p>Estimada/o amiga/o:</p>
+			<p>El {$weekday.toLowerCase()}, {textDate}, celebramos el acto '{$title}' en {city}.</p>
+			<p>Como siempre, la entrada es gratuita hasta completar aforo.</p>
+			<p>El acto comienza a las {$time}.</p>
+			<p>{@html $content}</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.text-container {
+		margin: 1rem auto;
+	}
+	.text {
+		margin: 1rem auto;
+		padding: 1rem;
+		border: 1px solid lightgrey;
+		background-color: #fff;
+	}
+	p {
+		margin-bottom: 1rem;
+	}
+</style>

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;
+};
+

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 Heading from '$lib/components/Heading.svelte';
-	import Title from '$lib/templates/Title.svelte';
+	import Title from '$lib/components/Title.svelte';
-	import Subtitle from '$lib/templates/Subtitle.svelte';
+	import Subtitle from '$lib/components/Subtitle.svelte';
-	import Content from '$lib/templates/Content.svelte';
+	import Content from '$lib/components/Content.svelte';
-	import Time from '$lib/templates/Time.svelte';
+	import Time from '$lib/components/Time.svelte';
-	import Date from '$lib/templates/Date.svelte';
+	import Date from '$lib/components/Date.svelte';
-	import Weekday from '$lib/templates/Weekday.svelte';
+	import Weekday from '$lib/components/Weekday.svelte';
-	import Address from '$lib/templates/Address.svelte';
+	import Address from '$lib/components/Address.svelte';
+	import Text from '$lib/components/Text.svelte';
 </script>
 
 <div class="preview">
@@ -74,6 +75,9 @@
 			</div>
 		{/if}
 	</div>
+	<div class="text">
+		<Text />
+	</div>
 </div>
 
 <style>

src/lib/templates/Date.svelte

@@ -1,64 +0,0 @@
-<script>
-	import { getMonthName } from '$lib/monthName';
-	import { templates } from '$lib/templates/templates';
-
-	/** @type number */ export let templateIndex;
-	import { date } from '$lib/stores/store';
-
-	/** @type {string} */ let newdate;
-
-	/**
-	 * @param {string} date - Fecha del evento
-	 * @returns {string} - Fecha en dia (número) mes (letras)
-	 */
-	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} ${month}`;
-		return res;
-	};
-
-	$: if ($date !== '') {
-		newdate = convertDate($date);
-	}
-</script>
-
-{#if templates[templateIndex] && newdate}
-	<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};
-		text-align: {templates[templateIndex].date.textAlign};
-		font-weight: {templates[templateIndex].date.fontWeight};
-		line-height: {templates[templateIndex].date.lineHeight}rem;
-    "
-	>
-		{newdate}
-	</div>
-{/if}
-
-<style>
-	.date {
-		position: absolute;
-		text-transform: uppercase;
-		overflow: hidden;
-		display: block;
-	}
-</style>

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",

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
+  },
+}

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);

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,
+    fontSize: 1.5,
-    color: "grey",
+    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,
+    fontSize: 3,
-    color: "firebrick",
+    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,
+    fontSize: 1.5,
-    color: "#787",
+    color: "firebrick",
-    fontFamily: "Gill Sans, sans-serif",
+    fontFamily: "'Arial', sans-serif",
     lineHeight: 1.5,
     textAlign: "center",
     fontWeight: 400
@@ -94,7 +94,7 @@ export const verde = {
     left: 2,
     right: 20,
     fontSize: 1,
-    color: "firebrick",
+    color: "#91b756",
     fontFamily: "sans-serif",
     lineHeight: 1.5,
     textAlign: "center",

src/routes/+page.svelte

@@ -10,12 +10,12 @@
 	/>
 </svelte:head>
 <main>
-	<p>Elige la plantilla que quieras usar para tu diseño</p>
+	<p>Elige plantilla</p>
 	<div class="main">
 		<ul>
 			{#each templates as template}
 				<li>
-					<a href="/{template.name}"
+					<a href="/{template.name}" data-sveltekit-prefetch
 						><img src="/{template.image}" alt="Plantilla en blanco estilo {template.name}" />
 						<div class="caption">{template.name}</div></a
 					>
@@ -39,6 +39,7 @@
 	}
 	p {
 		font-size: 1.5rem;
+		color: #333;
 	}
 	ul {
 		list-style: none;
@@ -46,9 +47,11 @@
 	li {
 		line-height: 2rem;
 		display: inline-block;
-		padding: 0.5rem;
+		padding: 0.25rem;
-		background-color: rgb(80, 80, 80);
+		background-color: rebeccapurple;
+		box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.7);
 		margin: 0 0.5rem;
+		border-radius: 0.5rem;
 	}
 	a {
 		text-transform: capitalize;
@@ -56,10 +59,11 @@
 		color: white;
 		text-decoration: none;
 		text-align: center;
-		font-weight: 700;
+		font-weight: 400;
-		font-size: 1.2rem;
+		font-size: 1.4rem;
 	}
 	img {
 		max-height: 200px;
+		border-radius: 0.25rem 0.25rem 0 0;
 	}
 </style>

src/routes/[slug]/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { templates } from '$lib/templates/templates';
 	/**
+	 * Un objeto con los datos que llegan de la funcion load de +page.js
 	 * @typedef {{
 	 * slug: string;
 	 * templateIndex: number;
@@ -10,10 +10,10 @@
 	 */
 
 	/** @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>