lista esta branch

README.md

@@ -2,8 +2,8 @@
 Aplicación para que los grupos creen sus propios carteles.
 
 ## TODO
-* [ ] Separar fecha y hora en campos distintos.
+* [x] Separar fecha y hora en campos distintos.
-* [ ] Quitar el 'de' de la fecha
+* [x] Quitar el 'de' de la fecha
 * [ ] Generar texto de boletín junto al cartel.
 
 ### Verde

src/lib/form/Colabs.svelte

@@ -35,7 +35,12 @@
 					x
 				</div>
 				<img class="organization-logo" src={organization.image} alt={organization.text} />
-				<input class="logo-title" type="text" bind:value={organization.text} />
+				<input
+					class="logo-title"
+					type="text"
+					bind:value={organization.text}
+					placeholder="Nombre(opcional)"
+				/>
 			</div>
 		{/each}
 	{/if}
@@ -69,14 +74,14 @@
 		grid-gap: 0.5rem;
 		align-items: center;
 		justify-content: center;
-		margin: 1rem;
+		margin: 0.25rem 1rem;
 		background-color: #ddd;
 		padding: 0.25rem;
 	}
 
 	.organization-logo {
-		max-height: 64px;
+		max-height: 72px;
-		max-width: 100px;
+		max-width: 144px;
 		margin: 0 auto;
 		background-color: #fff;
 	}
@@ -94,7 +99,7 @@
 
 	input {
 		display: block;
-		max-width: 100px;
+		width: 100%;
 	}
 
 	button {

src/lib/form/Organized.svelte

@@ -35,7 +35,12 @@
 					x
 				</div>
 				<img class="organized-logo" src={organization.image} alt={organization.text} />
-				<input class="logo-title" type="text" bind:value={organization.text} />
+				<input
+					class="logo-title"
+					type="text"
+					bind:value={organization.text}
+					placeholder="Nombre (opcional)"
+				/>
 			</div>
 		{/each}
 	{/if}
@@ -68,13 +73,13 @@
 		grid-gap: 0.5rem;
 		align-items: center;
 		justify-content: center;
-		margin: 1rem;
+		margin: 0.25rem 1rem;
 		background-color: #ddd;
 		padding: 0.25rem;
 	}
 	.organized-logo {
-		max-height: 64px;
+		max-height: 72px;
-		max-width: 100px;
+		max-width: 128px;
 		margin: 0 auto;
 		background-color: #fff;
 	}
@@ -91,7 +96,7 @@
 
 	input {
 		display: block;
-		max-width: 100px;
+		width: 100%;
 	}
 
 	button {

src/lib/preview/Preview.svelte

@@ -130,7 +130,7 @@
 		max-height: 64px;
 		max-width: 128px;
 		margin: 0 auto;
-		opacity: 75%;
+		opacity: 100%;
 	}
 
 	.caption {

src/lib/templates/Date.svelte

@@ -5,30 +5,28 @@
 	/** @type number */ export let templateIndex;
 	import { date } from '$lib/stores/store';
 
-	/** @typedef
+	/** @type {string} */ let newdate;
-	 * {{
-	 * date: string;
-	 * }} Newdate
-	 */
-
-	/** @type {Newdate} */ let newdate = { date: '' };
 
-	const convertDate = (/** @type {(string | undefined)} */ datetime) => {
+	/**
-		if (datetime == undefined) {
+	 * @param {string} date - Fecha del evento
-			return {
+	 * @returns {string} - Fecha en dia (número) mes (letras)
-				date: ''
+	 */
-			};
+	const convertDate = (date) => {
+		if (date == undefined) {
+			return '';
 		}
-		/** @type {string} */ const monthNumber = datetime.split('-')[1];
+		/** @type {string} */ const monthNumber = date.split('-')[1];
-		/** @type {string} */ let day = datetime.split('-')[2].split('T')[0];
+		/** @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);
 		}
-		return {
+
-			date: `${day} de ${month}`
+		/** @type {string} */ const res = `${day} ${month}`;
-		};
+		return res;
 	};
 
 	$: if ($date !== '') {
@@ -36,7 +34,7 @@
 	}
 </script>
 
-{#if templates[templateIndex] && newdate.date}
+{#if templates[templateIndex] && newdate}
 	<div
 		class="date"
 		style="
@@ -52,7 +50,7 @@
 		line-height: {templates[templateIndex].date.lineHeight}rem;
     "
 	>
-		{newdate.date}
+		{newdate}
 	</div>
 {/if}