editors (#5)

Ya se puede editar la dirección con varias líneas y además hago más homogéneo el comportamiento de los logos de organizadores y colaboradores, que están un poco locos (aún se puede mejorar, la verdad)

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

src/lib/form/Colabs.svelte

@@ -1,23 +1,15 @@
 <script>
-	import {
+	import { colabs } from '$lib/stores/store';
-		title,
-		heading,
-		subtitle,
-		content,
-		date,
-		address,
-		organizedBy,
-		colabs,
-		canvas
-	} from '$lib/stores/store';
 
 	/** @type {HTMLInputElement} */ let fileinput;
 
 	const onFileSelected = (/** @type {Event} */ e) => {
+		// @ts-ignore
 		let image = e.target.files[0];
 		let reader = new FileReader();
 		reader.readAsDataURL(image);
 		reader.onload = (e) => {
+			// @ts-ignore
 			$colabs = [...$colabs, { image: e.target.result, text: '' }];
 		};
 	};
@@ -42,7 +34,7 @@
 				>
 					x
 				</div>
-				<img class="organized-logo" src={organization.image} alt={organization.text} />
+				<img class="organization-logo" src={organization.image} alt={organization.text} />
 				<input class="logo-title" type="text" bind:value={organization.text} />
 			</div>
 		{/each}
@@ -80,7 +72,8 @@
 		background-color: #ddd;
 		padding: 0.25rem;
 	}
-	.organized-logo {
+
+	.organization-logo {
 		max-height: 64px;
 		max-width: 100px;
 		margin: 0 auto;
@@ -101,6 +94,7 @@
 		display: block;
 		max-width: 100px;
 	}
+
 	button {
 		display: block;
 		padding: 0.5rem;

src/lib/form/Form.svelte

@@ -15,6 +15,7 @@
 	} from '$lib/stores/store';
 
 	/** @type {HTMLDivElement} */ let editor;
+	/** @type {HTMLDivElement} */ let editor2;
 
 	const handleSubmit = async () => {
 		console.log('submit');
@@ -33,10 +34,11 @@
 
 	const downloadCanvas = async () => {
 		if ($canvas !== undefined) {
-			const res = await html2canvas($canvas, { backgroundColor: '#fffffff' });
+			const res = await html2canvas($canvas, { scale: 2 });
 			const image = res.toDataURL('image/png');
 			const link = document.createElement('a');
-			link.download = 'cartel.png';
+			const city = $address.split('\n');
+			link.download = `${$date.split('T')[0]}-${city[city.length - 1]}-cartel.png`;
 			link.href = image;
 			link.click();
 		}
@@ -101,7 +103,7 @@
 
 		<div class="form-group">
 			<label for="address">Dirección</label>
-			<input bind:value={$address} type="text" name="address" />
+			<textarea bind:value={$address} type="text" name="address" />
 		</div>
 	</div>
 	<div class="form-group media">
@@ -131,6 +133,17 @@
 		padding: 0.45rem;
 	}
 
+	textarea {
+		display: block;
+		width: 100%;
+		font-size: 0.8rem;
+		font-family: sans-serif;
+		padding: 0.5rem;
+		min-height: 5rem;
+		line-height: 1.3rem;
+		resize: vertical;
+	}
+
 	label {
 		display: block;
 		font-size: 0.8rem;

src/lib/preview/Preview.svelte

@@ -149,12 +149,13 @@
 	.subtitle {
 		position: absolute;
 		display: flex;
-		top: 415px;
+		top: 410px;
 		left: 1rem;
 		right: 2rem;
-		font-size: 1.1rem;
+		font-size: 1.2rem;
-		color: #575;
+		color: #787;
-		height: 2.6rem;
+		text-transform: uppercase;
+		height: 3rem;
 		overflow: hidden;
 		text-align: center;
 		align-items: start;
@@ -163,15 +164,17 @@
 
 	.content {
 		position: absolute;
-		top: 500px;
+		display: flex;
-		left: 1rem;
+		flex-direction: column;
+		justify-content: center;
+		top: 480px;
+		left: 2rem;
 		right: 16rem;
+		height: 7.5rem;
 		font-size: 1rem;
 		color: #222;
 		line-height: 1.5rem;
-		height: 9rem;
 		overflow: hidden;
-		align-self: center;
 	}
 
 	.weekday {
@@ -217,24 +220,30 @@
 
 	.address {
 		position: absolute;
-		top: 650px;
+		top: 620px;
 		left: 2rem;
-		right: 17rem;
+		right: 20rem;
-		font-size: 1.15rem;
+		font-size: 1rem;
-		font-family: serif;
+		text-align: center;
+		font-weight: 700;
+		line-height: 1.5rem;
+		font-family: sans-serif;
 		color: firebrick;
-		max-height: 4rem;
+		max-height: 4.5rem;
 		overflow: hidden;
+		white-space: pre-wrap;
 	}
+
 	.imagetitle {
 		position: absolute;
-		top: 700px;
+		top: 720px;
-		font-size: 0.7rem;
+		font-size: 0.8rem;
-		color: #555;
+		color: #444;
 	}
+
 	.organized-by {
 		position: absolute;
-		top: 720px;
+		top: 740px;
 		left: 1rem;
 		right: 1rem;
 		display: grid;
@@ -246,17 +255,14 @@
 	}
 
 	.organization {
-		/* grid-row: 2/3; */
 		margin: 0 1rem;
 		display: flex;
 		flex-direction: column;
 		text-align: center;
 		align-items: center;
 		justify-content: center;
-		/* width: 64px;
-		height: 64px;
-		max-width: 100%; */
 	}
+
 	.organization img {
 		max-height: 48px;
 		max-width: 100px;
@@ -266,14 +272,15 @@
 
 	.caption {
 		margin: 0.5rem 0;
-		font-size: 0.8rem;
+		font-size: 0.7rem;
-		font-family: monospace;
+		font-family: sans-serif;
+		text-transform: uppercase;
 		color: #666;
 	}
 
 	.orgcolab {
 		position: absolute;
-		top: 710px;
+		top: 720px;
 		height: 7rem;
 		overflow: hidden;
 		display: grid;