src/lib/components/City.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+
+	/** @type number */ export let templateIndex;
+	import { city } from '$lib/stores/store';
+</script>
+
+{#if templates[templateIndex] && $city}
+	<div
+		class="city"
+		style="
+    top: {templates[templateIndex].city.top}px;
+    height: {templates[templateIndex].city.height}rem;
+    left: {templates[templateIndex].city.left}rem;
+    right: {templates[templateIndex].city.right}rem;
+    color: {templates[templateIndex].city.color};
+    font-size: {templates[templateIndex].city.fontSize}rem;
+    font-family: {templates[templateIndex].city.fontFamily};
+    line-height: {templates[templateIndex].city.lineHeight};
+		text-align: {templates[templateIndex].city.textAlign};
+		font-weight: {templates[templateIndex].city.fontWeight};
+		line-height: {templates[templateIndex].city.lineHeight}rem;
+    "
+	>
+		{$city}
+	</div>
+{/if}
+
+<style>
+	.city {
+		position: absolute;
+		overflow: hidden;
+		text-transform: uppercase;
+	}
+</style>

src/lib/components/Text.svelte

@@ -7,7 +7,8 @@
 		date,
 		time,
 		weekday,
-		address
+		address,
+		city
 	} from '$lib/stores/store';
 
 	import { convertDate } from '$lib/convertDate';
@@ -18,8 +19,6 @@
 	$: if ($date !== '') {
 		textDate = convertDate($date);
 	}
-
-	$: city = $address.split('\n')[$address.split('\n').length - 1];
 </script>
 
 <div class="text-container">
@@ -29,7 +28,7 @@
 	{#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>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>

src/lib/form/Form.svelte

@@ -12,6 +12,7 @@
 		time,
 		weekday,
 		address,
+		city,
 		canvas
 	} from '$lib/stores/store';
 
@@ -117,9 +118,10 @@
 			bind:value={$address}
 			type="text"
 			name="address"
-			placeholder="Ej. Calle del Abeto, 4
-Albacete"
+			placeholder="Ej. Calle del Abeto, 4"
 		/>
+		<label for="city">Ciudad</label>
+		<input bind:value={$city} type="text" name="" placeholder="Ej. Cádiz" />
 	</div>
 
 	<div class="form-group ">
@@ -160,7 +162,7 @@ Albacete"
 		font-size: 0.8rem;
 		font-family: sans-serif;
 		padding: 0.5rem;
-		min-height: 5rem;
+		min-height: 3rem;
 		line-height: 1.3rem;
 		resize: vertical;
 	}

src/lib/preview/Preview.svelte

@@ -13,6 +13,7 @@
 	import Weekday from '$lib/components/Weekday.svelte';
 	import Address from '$lib/components/Address.svelte';
 	import Text from '$lib/components/Text.svelte';
+	import City from '$lib/components/City.svelte';
 </script>
 
 <div class="preview">
@@ -26,6 +27,7 @@
 			<Time {templateIndex} />
 			<Weekday {templateIndex} />
 			<Address {templateIndex} />
+			<City {templateIndex} />
 		{/if}
 
 		{#if $organizedBy[0] && $colabs[0]}

src/lib/stores/store.js

@@ -8,6 +8,7 @@ export const date = writable("");
 export const time = writable("");
 export const weekday = writable("");
 export const address = writable("");
+export const city = writable("");
 export const organizedBy = writable([]);
 export const colabs = writable([]);
 export const canvas = writable();

src/lib/templates/azul.js

@@ -91,7 +91,19 @@ export const azul = {
   },
   address: {
     top: 620,
-    height: 5.5,
+    height: 3,
+    left: 2,
+    right: 2,
+    fontSize: 1.2,
+    color: "white",
+    fontFamily: "sans-serif",
+    lineHeight: 1.5,
+    textAlign: "center",
+    fontWeight: 400
+  },
+  city: {
+    top: 680,
+    height: 2,
     left: 2,
     right: 2,
     fontSize: 1.2,

src/lib/templates/corazon.js

@@ -82,7 +82,7 @@ export const corazon = {
     height: 1.5,
     left: 1,
     right: 10,
-    fontSize: 1.3,
+    fontSize: 0,
     color: "#fff",
     fontFamily: "sans-serif",
     lineHeight: 1.8,
@@ -91,9 +91,9 @@ export const corazon = {
   },
   address: {
     top: 645,
-    height: 5.5,
+    height: 3.6,
     left: 8,
-    right: 2,
+    right: 1,
     fontSize: 1.3,
     color: "white",
     fontFamily: "'Arial', sans-serif",
@@ -101,4 +101,16 @@ export const corazon = {
     textAlign: "left",
     fontWeight: 400
   },
+  city: {
+    top: 25,
+    height: 1.5,
+    left: 8,
+    right: 1,
+    fontSize: 1.5,
+    color: "white",
+    fontFamily: "'Arial', sans-serif",
+    lineHeight: 1.6,
+    textAlign: "right",
+    fontWeight: 700
+  },
 }

src/lib/templates/templates.js

@@ -28,6 +28,7 @@ import { corazon } from '$lib/templates/corazon';
 * weekday: Element;
 * content: Element;
 * address: Element;
+* city: Element;
 * }} Template
 */
 

src/lib/templates/verde.js

@@ -90,7 +90,7 @@ export const verde = {
   },
   address: {
     top: 625,
-    height: 4.5,
+    height: 2.8,
     left: 2,
     right: 20,
     fontSize: 1,
@@ -100,4 +100,16 @@ export const verde = {
     textAlign: "center",
     fontWeight: 700
   },
+  city: {
+    top: 675,
+    height: 2,
+    left: 2,
+    right: 20,
+    fontSize: 1.2,
+    color: "#91b756",
+    fontFamily: "sans-serif",
+    lineHeight: 1.5,
+    textAlign: "center",
+    fontWeight: 700
+  },
 }