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: #11pull/12/head
parent
fdb2526eda
commit
3456d96d2e
@ -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>
|
||||
@ -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>
|
||||
@ -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;
|
||||
};
|
||||
|
||||
@ -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>
|
||||
@ -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
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Loading…
Reference in New Issue