separo city del resto de address para tener más flexibilidad

pull/13/head
Borja Robert 2 years ago
parent e2f266fc4a
commit 82316d99af

@ -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>

@ -7,7 +7,8 @@
date, date,
time, time,
weekday, weekday,
address address,
city
} from '$lib/stores/store'; } from '$lib/stores/store';
import { convertDate } from '$lib/convertDate'; import { convertDate } from '$lib/convertDate';
@ -18,8 +19,6 @@
$: if ($date !== '') { $: if ($date !== '') {
textDate = convertDate($date); textDate = convertDate($date);
} }
$: city = $address.split('\n')[$address.split('\n').length - 1];
</script> </script>
<div class="text-container"> <div class="text-container">
@ -29,7 +28,7 @@
{#if checked} {#if checked}
<div class="text" contenteditable="true"> <div class="text" contenteditable="true">
<p>Estimada/o amiga/o:</p> <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>Como siempre, la entrada es gratuita hasta completar aforo.</p>
<p>El acto comienza a las {$time}.</p> <p>El acto comienza a las {$time}.</p>
<p>{@html $content}</p> <p>{@html $content}</p>

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

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

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

@ -101,4 +101,16 @@ export const azul = {
textAlign: "center", textAlign: "center",
fontWeight: 400 fontWeight: 400
}, },
city: {
top: 620,
height: 5.5,
left: 2,
right: 2,
fontSize: 1.2,
color: "white",
fontFamily: "sans-serif",
lineHeight: 1.8,
textAlign: "center",
fontWeight: 400
},
} }

@ -101,4 +101,16 @@ export const corazon = {
textAlign: "left", textAlign: "left",
fontWeight: 400 fontWeight: 400
}, },
city: {
top: 645,
height: 5.5,
left: 8,
right: 2,
fontSize: 1.3,
color: "white",
fontFamily: "'Arial', sans-serif",
lineHeight: 1.6,
textAlign: "left",
fontWeight: 400
},
} }

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

@ -90,7 +90,7 @@ export const verde = {
}, },
address: { address: {
top: 625, top: 625,
height: 4.5, height: 2.8,
left: 2, left: 2,
right: 20, right: 20,
fontSize: 1, fontSize: 1,
@ -100,4 +100,16 @@ export const verde = {
textAlign: "center", textAlign: "center",
fontWeight: 700 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
},
} }

Loading…
Cancel
Save