You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.3 KiB
Svelte
71 lines
1.3 KiB
Svelte
<script>
|
|
import {
|
|
heading,
|
|
title,
|
|
subtitle,
|
|
content,
|
|
date,
|
|
newdate,
|
|
time,
|
|
weekday,
|
|
address,
|
|
city
|
|
} from '$lib/stores/store';
|
|
|
|
import { convertDate } from '$lib/convertDate';
|
|
|
|
/** @type {string} */ let textDate = '';
|
|
/** @type {boolean} */ let checked = false;
|
|
|
|
$: if ($date !== '') {
|
|
textDate = convertDate($date);
|
|
}
|
|
</script>
|
|
|
|
<div class="text-container">
|
|
<input type="checkbox" bind:checked />
|
|
<label for="checked">Mostrar texto</label>
|
|
|
|
{#if checked}
|
|
<div class="text" contenteditable="true">
|
|
<p>Estimada/o amiga/o:</p>
|
|
<p>
|
|
El {$weekday.toLowerCase()}, {textDate}, celebramos el acto <strong>'{$title}'</strong> en {$city}.
|
|
</p>
|
|
<p>Como siempre, la entrada es gratuita hasta completar aforo.</p>
|
|
<ul>
|
|
<li>
|
|
<p style="white-space: pre-wrap;">
|
|
<strong>Lugar</strong>:<br />{$address}<br /><em>{$city}</em>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p><strong>Fecha</strong>:<br />{$newdate}<br />{$time}</p>
|
|
</li>
|
|
</ul>
|
|
<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: 1rem 0;
|
|
}
|
|
label {
|
|
color: #333;
|
|
}
|
|
li {
|
|
margin: 1rem 0;
|
|
}
|
|
</style>
|