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

no sé por dónde voy pero voy a usar hx un rato

Browse Source
pull/7/head
Borja Robert 2 years ago
parent 57dc4d50fd
commit d4cdca6e70
7 changed files with 123 additions and 71 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,8 +1,8 @@
<script>
export let templateIndex;
/** @type {number} */ export let templateIndex;
import Heading from '$lib/templates/Heading.svelte';
import Title from '$lib/templates/Title.svelte';
import {
title,
subtitle,
date,
weekday,
@ -40,21 +40,22 @@
<div class="preview">
<div class="result" bind:this={$canvas}>
<!-- <div class="heading">{$heading}</div> -->
{#if templateIndex >= 0}
<Heading {templateIndex} />
<div class="title">{$title}</div>
<Title {templateIndex} />
<div class="subtitle">{$subtitle}</div>
<div class="content">{@html $content}</div>
<div class="weekday">{$weekday}</div>
{#if newdate.date}<div class="date">{newdate.date}</div>{/if}
{#if newdate.time}<div class="time">{newdate.time}</div>{/if}
<div class="address">{$address}</div>
{/if}
{#if $organizedBy[0] && $colabs[0]}
<div class="orgcolab">
<div class="org">Organiza:</div>
<div class="colab">Colabora:</div>
<div class="orgmixed">
{#each $organizedBy as organization, i}
{#each $organizedBy as organization}
<div class="organization">
<img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div>
@ -62,7 +63,7 @@
{/each}
</div>
<div class="colabmixed">
{#each $colabs as organization, i}
{#each $colabs as organization}
<div class="organization">
<img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div>
@ -74,7 +75,7 @@
{#if $organizedBy[0] && !$colabs[0]}
<div class="imagetitle">Organiza:</div>
<div class="organized-by">
{#each $organizedBy as organization, i}
{#each $organizedBy as organization}
<div class="organization">
<img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div>
@ -85,7 +86,7 @@
{#if $colabs[0] && !$organizedBy[0]}
<div class="imagetitle">Colabora:</div>
<div class="organized-by">
{#each $colabs as organization, i}
{#each $colabs as organization}
<div class="organization">
<img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div>
@ -119,25 +120,6 @@
/* border-radius: 0.5rem; */
}
.title {
position: absolute;
top: 320px;
left: 1rem;
right: 1rem;
font-family: 'Gill Sans', sans-serif;
font-size: 2.9rem;
font-variant: small-caps;
line-height: 2.5rem;
color: firebrick;
font-weight: 600;
height: 5rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: end;
text-align: center;
}
.subtitle {
position: absolute;
display: flex;

38
src/lib/templates/Title.svelte
Unescape Escape View File

@ -0,0 +1,38 @@
<script>
import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex;
import { title } from '$lib/stores/store';
</script>
{#if templates[templateIndex] && $title}
<div
class="title"
style="
top: {templates[templateIndex].title.top}px;
height: {templates[templateIndex].title.height}rem;
left: {templates[templateIndex].title.left}rem;
right: {templates[templateIndex].title.right}rem;
color: {templates[templateIndex].title.color};
font-size: {templates[templateIndex].title.fontSize}rem;
font-family: {templates[templateIndex].title.fontFamily};
"
>
{$title}
</div>
{/if}
<style>
.title {
position: absolute;
font-variant: small-caps;
line-height: 2.5rem;
color: firebrick;
font-weight: 600;
height: 5rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: end;
text-align: center;
}
</style>

2
src/lib/templates/heading.svelte
Unescape Escape View File

@ -6,6 +6,7 @@
import { heading } from '$lib/stores/store';
</script>
{#if $heading && templates[templateIndex].heading}
<div
class="heading"
style="
@ -20,6 +21,7 @@
>
{$heading}
</div>
{/if}
<style>
.heading {

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

@ -8,6 +8,7 @@ import { verde } from '$lib/templates/verde';
* color: string;
* fontSize: number;
* fontFamily: string;
* lineHeight: number;
}} Element
*/

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

@ -1,14 +1,30 @@
/**
* @typedef {Object} Template
* @property name {string}
* @property heading {Object}
* @property title {string}
* @property subtitle {string}
* @property content {string}
* @property datetime {string}
* @property weekday {string}
* @property address {string}
* @typedef {{
* top: number;
* height: number;
* right: number;
* left: number;
* color: string;
* fontSize: number;
* fontFamily: string;
* lineHeight: number;
}} Element
*/
/**
* @typedef {{
* name: string;
* heading: Element;
* title: Element;
* subtitle: Element;
* datetime: Element;
* weekday: Element;
* content: Element;
* address: Element;
* }} Template
*/
/** @type {Template} */
export const verde = {
name: "verde",
heading: {
@ -18,16 +34,19 @@ export const verde = {
right: 1,
fontSize: 1,
color: "grey",
fontFamily: "sans-serif"
fontFamily: "sans-serif",
lineHeight: 1.1
},
title: {
top: 100,
top: 320,
height: 6,
left: 2,
right: 2,
fontSize: 1.8,
left: 1,
right: 1,
fontSize: 2.9,
color: "firebrick",
fontFamily: "Gill Sans, sans-serif"
fontFamily: "Gill Sans, sans-serif",
lineHeight: 2.5
},
subtitle: {
top: 100,
@ -36,7 +55,8 @@ export const verde = {
right: 2,
fontSize: 1.8,
color: "firebrick",
fontFamily: "Gill Sans, sans-serif"
fontFamily: "Gill Sans, sans-serif",
lineHeight: 2
},
content: {
top: 100,
@ -45,7 +65,8 @@ export const verde = {
right: 2,
fontSize: 1.8,
color: "firebrick",
fontFamily: "Gill Sans, sans-serif"
fontFamily: "Gill Sans, sans-serif",
lineHeight: 1
},
datetime: {
top: 400,
@ -54,7 +75,8 @@ export const verde = {
right: 2,
fontSize: 1,
color: "firebrick",
fontFamily: "sans-serif"
fontFamily: "sans-serif",
lineHeight: 1
},
weekday: {
top: 500,
@ -63,7 +85,8 @@ export const verde = {
right: 2,
fontSize: 1,
color: "#333",
fontFamily: "sans-serif"
fontFamily: "sans-serif",
lineHeight: 1
},
address: {
top: 500,
@ -72,6 +95,7 @@ export const verde = {
right: 2,
fontSize: 1,
color: "#333",
fontFamily: "sans-serif"
fontFamily: "sans-serif",
lineHeight: 1
},
}

5
src/routes/[slug]/+page.js
Unescape Escape View File

@ -1,7 +1,12 @@
import { templates } from '$lib/templates/templates';
/** @type {import('./$types').PageLoad} */
export function load(event) {
const slug = event.params.slug;
/** @type {number|undefined} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
if (templateIndex !== -1) {
return {
slug
}
}
}

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

@ -5,7 +5,7 @@
import Preview from '$lib/preview/Preview.svelte';
const slug = data.slug;
/** @type {number|undefined} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
/** @type {number} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
</script>
<svelte:head>

Write Preview
Loading…
Cancel
Save