brobert
/
carteles
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Labels Milestones

New Pull Request

un poco de todo #11

Merged
brobert merged 13 commits from corazon into main 3 years ago
Conversation 0 Commits 13 Files Changed 21
21 changed files with 275 additions and 101 deletions
Show Stats Download Patch File Download Diff File

12
README.md
Unescape Escape View File

@ -5,11 +5,19 @@ Aplicación para que los grupos creen sus propios carteles.
* [x] Separar fecha y hora en campos distintos.
* [x] Quitar el 'de' de la fecha
* [ ] Generar texto de boletín junto al cartel.
* [ ] Guardar una copia de todos los carteles que se creen y crear una página 'admin' que los muestre con fecha, permita borrarlos y tal. Se pueden guardar todos en Sqlite y listo.
### Verde
* [ ] Cambiar color de 'dirección' de rojo a verde
* [ ] Cambiar la plantilla por modelo nuevo
* [x] Cambiar color de 'dirección' de rojo a verde
* [x] Cambiar la plantilla por modelo nuevo
### Azul
* [ ] Fecha y hora juntas en la esquina superior derecha
* [ ] Intentar incluir "contenido" en la esquina superior izquierda
### Corazón
* [ ] Incluir todos los elementos
* [ ] Confirmar con Esther
### Nueva plantilla
* [ ] Incluir

0
src/lib/templates/Address.svelte → src/lib/components/Address.svelte
Unescape Escape View File

0
src/lib/templates/Content.svelte → src/lib/components/Content.svelte
Unescape Escape View File

41
src/lib/components/Date.svelte
Unescape Escape View File

@ -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
src/lib/templates/Heading.svelte → src/lib/components/Heading.svelte
Unescape Escape View File

0
src/lib/templates/Subtitle.svelte → src/lib/components/Subtitle.svelte
Unescape Escape View File

52
src/lib/components/Text.svelte
Unescape Escape View File

@ -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
src/lib/templates/Time.svelte → src/lib/components/Time.svelte
Unescape Escape View File

0
src/lib/templates/Title.svelte → src/lib/components/Title.svelte
Unescape Escape View File

0
src/lib/templates/Weekday.svelte → src/lib/components/Weekday.svelte
Unescape Escape View File

23
src/lib/convertDate.js
Unescape Escape View File

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

20
src/lib/preview/Preview.svelte
Unescape Escape View File

@ -4,14 +4,15 @@
import { organizedBy, colabs, canvas } from '$lib/stores/store';
import Heading from '$lib/templates/Heading.svelte';
import Title from '$lib/templates/Title.svelte';
import Subtitle from '$lib/templates/Subtitle.svelte';
import Content from '$lib/templates/Content.svelte';
import Time from '$lib/templates/Time.svelte';
import Date from '$lib/templates/Date.svelte';
import Weekday from '$lib/templates/Weekday.svelte';
import Address from '$lib/templates/Address.svelte';
import Heading from '$lib/components/Heading.svelte';
import Title from '$lib/components/Title.svelte';
import Subtitle from '$lib/components/Subtitle.svelte';
import Content from '$lib/components/Content.svelte';
import Time from '$lib/components/Time.svelte';
import Date from '$lib/components/Date.svelte';
import Weekday from '$lib/components/Weekday.svelte';
import Address from '$lib/components/Address.svelte';
import Text from '$lib/components/Text.svelte';
</script>
<div class="preview">
@ -74,6 +75,9 @@
</div>
{/if}
</div>
<div class="text">
<Text />
</div>
</div>
<style>

64
src/lib/templates/Date.svelte
Unescape Escape View File

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

6
src/lib/templates/azul.js
Unescape Escape View File

@ -17,13 +17,13 @@ export const azul = {
fontWeight: 700
},
title: {
top: 445,
top: 440,
height: 7.5,
left: 1,
right: 1,
fontSize: 3,
color: "firebrick",
fontFamily: "sans-serif",
fontFamily: "'Arial', sans-serif",
lineHeight: 2.4,
textAlign: "right",
fontWeight: 700
@ -33,7 +33,7 @@ export const azul = {
top: 575,
height: 1.4,
left: 1,
right: 2,
right: 1,
fontSize: 1.6,
color: "white",
fontFamily: "Gill Sans, sans-serif",

104
src/lib/templates/corazon.js
Unescape Escape View File

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

2
src/lib/templates/templates.js
Unescape Escape View File

@ -1,5 +1,6 @@
import { verde } from '$lib/templates/verde';
import { azul } from '$lib/templates/azul';
import { corazon } from '$lib/templates/corazon';
/**
* @typedef {{
* top: number;
@ -34,3 +35,4 @@ import { azul } from '$lib/templates/azul';
export const templates = [];
templates.push(verde);
templates.push(azul);
templates.push(corazon);

32
src/lib/templates/verde.js
Unescape Escape View File

@ -3,39 +3,39 @@ import '$lib/templates/templates'
/** @type {import('$lib/templates/templates').Template} */
export const verde = {
name: "verde",
image: "imagen01.png",
image: "plantilla_verde.png",
heading: {
top: 300,
top: 100,
height: 1.2,
left: 1,
left: 8,
right: 1,
fontSize: 1,
color: "grey",
fontSize: 1.5,
color: "white",
fontFamily: "sans-serif",
lineHeight: 1.1,
textAlign: "left",
fontWeight: 400
},
title: {
top: 320,
top: 150,
height: 6,
left: 1,
left: 8,
right: 1,
fontSize: 2.9,
color: "firebrick",
fontSize: 3,
color: "white",
fontFamily: "Gill Sans, sans-serif",
lineHeight: 2.1,
textAlign: "center",
fontWeight: 400
},
subtitle: {
top: 420,
top: 300,
height: 3,
left: 1,
left: 8,
right: 2,
fontSize: 1.4,
color: "#787",
fontFamily: "Gill Sans, sans-serif",
fontSize: 1.5,
color: "firebrick",
fontFamily: "'Arial', sans-serif",
lineHeight: 1.5,
textAlign: "center",
fontWeight: 400
@ -94,10 +94,10 @@ export const verde = {
left: 2,
right: 20,
fontSize: 1,
color: "firebrick",
color: "#91b756",
fontFamily: "sans-serif",
lineHeight: 1.5,
textAlign: "center",
fontWeight: 700
},
}
}

16
src/routes/+page.svelte
Unescape Escape View File

@ -10,12 +10,12 @@
/>
</svelte:head>
<main>
<p>Elige la plantilla que quieras usar para tu diseño</p>
<p>Elige plantilla</p>
<div class="main">
<ul>
{#each templates as template}
<li>
<a href="/{template.name}"
<a href="/{template.name}" data-sveltekit-prefetch
><img src="/{template.image}" alt="Plantilla en blanco estilo {template.name}" />
<div class="caption">{template.name}</div></a
>
@ -39,6 +39,7 @@
}
p {
font-size: 1.5rem;
color: #333;
}
ul {
list-style: none;
@ -46,9 +47,11 @@
li {
line-height: 2rem;
display: inline-block;
padding: 0.5rem;
background-color: rgb(80, 80, 80);
padding: 0.25rem;
background-color: rebeccapurple;
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.7);
margin: 0 0.5rem;
border-radius: 0.5rem;
}
a {
text-transform: capitalize;
@ -56,10 +59,11 @@
color: white;
text-decoration: none;
text-align: center;
font-weight: 700;
font-size: 1.2rem;
font-weight: 400;
font-size: 1.4rem;
}
img {
max-height: 200px;
border-radius: 0.25rem 0.25rem 0 0;
}
</style>

4
src/routes/[slug]/+page.svelte
Unescape Escape View File

@ -1,6 +1,6 @@
<script>
import { templates } from '$lib/templates/templates';
/**
* Un objeto con los datos que llegan de la funcion load de +page.js
* @typedef {{
* slug: string;
* templateIndex: number;
@ -10,10 +10,10 @@
*/
/** @type LoadFunctionData */ export let data;
import Form from '$lib/form/Form.svelte';
import Preview from '$lib/preview/Preview.svelte';
const slug = data.slug;
const templateIndex = data.templateIndex;
const templateImage = data.templateImage;
</script>

BIN
static/corazon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB

BIN
static/plantilla_verde.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

Write Preview
Loading…
Cancel
Save