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

esto marcha, ahora ya empieza a funcionar lo de las plantillas loquer

Browse Source
pull/7/head
Borja Robert 2 years ago
parent b1083c934e
commit ca9d7510e8
5 changed files with 320 additions and 38 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,6 +1,5 @@
<script> <script>
// import './verde.css'; export let templateIndex;
import { templates } from '$lib/templates/templates';
import Heading from '$lib/templates/Heading.svelte'; import Heading from '$lib/templates/Heading.svelte';
import { import {
title, title,
@ -9,7 +8,6 @@
weekday, weekday,
address, address,
content, content,
heading,
organizedBy, organizedBy,
colabs, colabs,
canvas canvas
@ -42,8 +40,8 @@
<div class="preview"> <div class="preview">
<div class="result" bind:this={$canvas}> <div class="result" bind:this={$canvas}>
<div class="heading">{$heading}</div> <!-- <div class="heading">{$heading}</div> -->
<Heading template={'verde'} /> <Heading {templateIndex} />
<div class="title">{$title}</div> <div class="title">{$title}</div>
<div class="subtitle">{$subtitle}</div> <div class="subtitle">{$subtitle}</div>
<div class="content">{@html $content}</div> <div class="content">{@html $content}</div>
@ -99,5 +97,218 @@
</div> </div>
<style> <style>
.preview {
padding: 0.5rem;
display: grid;
justify-content: center;
grid-template-columns: 1fr;
align-items: start;
}
.result {
display: block;
aspect-ratio: 1/1.4142;
min-height: 842px;
align-self: center;
/* background-color: rebeccapurple; */
width: auto;
background-image: url('/imagen01.png');
background-size: contain;
position: relative;
padding: 1rem;
/* 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;
top: 410px;
left: 1rem;
right: 2rem;
font-size: 1.2rem;
color: #787;
text-transform: uppercase;
height: 3rem;
overflow: hidden;
text-align: center;
align-items: start;
justify-content: center;
}
.content {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
top: 480px;
left: 1.5rem;
right: 17rem;
height: 8.5rem;
font-size: 0.8rem;
color: #222;
line-height: 1rem;
overflow: hidden;
}
.weekday {
position: absolute;
text-transform: uppercase;
top: 600px;
left: 18.5rem;
right: 5rem;
color: white;
max-height: 2rem;
font-size: 1.3rem;
font-weight: 700;
overflow: hidden;
text-align: center;
}
.date {
position: absolute;
text-transform: uppercase;
top: 625px;
left: 18.5rem;
right: 4rem;
font-size: 1.1rem;
font-weight: 700;
color: white;
max-height: 2rem;
overflow: hidden;
text-align: center;
}
.time {
position: absolute;
top: 645px;
left: 18.5rem;
right: 5rem;
font-size: 1.8rem;
color: white;
max-height: 2rem;
overflow: hidden;
text-align: center;
font-weight: 700;
}
.address {
position: absolute;
display: grid;
top: 620px;
left: 2rem;
right: 20rem;
font-size: 1rem;
text-align: center;
font-weight: 700;
line-height: 1.5rem;
font-family: sans-serif;
color: firebrick;
height: 4.5rem;
overflow: hidden;
white-space: pre-wrap;
align-items: center;
justify-content: center;
}
.imagetitle {
position: absolute;
top: 720px;
font-size: 0.8rem;
color: #444;
}
.organized-by {
position: absolute;
top: 740px;
left: 1rem;
right: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
grid-template-rows: min-content;
grid-auto-rows: auto;
justify-content: center;
align-items: center;
}
.organization {
margin: 0 1rem;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
}
.organization img {
max-height: 48px;
max-width: 100px;
margin: 0 auto;
opacity: 75%;
}
.caption {
margin: 0.5rem 0;
font-size: 0.7rem;
font-family: sans-serif;
text-transform: uppercase;
color: #666;
}
.orgcolab {
position: absolute;
top: 720px;
height: 7rem;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content 1fr;
grid-gap: 0.25rem;
justify-content: start;
align-items: center;
width: 100%;
}
.org {
grid-row: 1/2;
grid-column: 1/2;
font-size: 0.8rem;
}
.colab {
font-size: 0.8rem;
grid-row: 1/2;
grid-column: 2/3;
}
.orgmixed {
grid-row: 2/3;
grid-column: 1/2;
display: flex;
}
.colabmixed {
grid-row: 2/3;
grid-column: 2/3;
display: flex;
}
/* @import url(`'${template}.css'`); */ /* @import url(`'${template}.css'`); */
</style> </style>

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

@ -1,15 +1,30 @@
<script> <script>
import {templates} from '$lib/templates/templates' import { templates } from '$lib/templates/templates';
export let template; console.log(templates);
/** @type number */ export let templateIndex;
console.log(templateIndex);
import { heading } from '$lib/stores/store';
</script> </script>
<div class="heading" style=`top: ${templates[template].heading.top}`> <div
<input type="text" placeholder="Ej. Charla, taller, coloquio" /> class="heading"
style="
top: {templates[templateIndex].heading.top}px;
height: {templates[templateIndex].heading.height}rem;
left: {templates[templateIndex].heading.left}rem;
right: {templates[templateIndex].heading.right}rem;
color: {templates[templateIndex].heading.color};
font-size: {templates[templateIndex].heading.fontSize}rem;
font-family: {templates[templateIndex].heading.fontFamily};
"
>
{$heading}
</div> </div>
<style> <style>
.heading { .heading {
position: absolute; position: absolute;
} font-variant: small-caps;
overflow: hidden;
}
</style> </style>

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

@ -1,15 +1,26 @@
import { verde } from '$lib/templates/verde'; import { verde } from '$lib/templates/verde';
/**
* @typedef {{
* top: number;
* height: number;
* right: number;
* left: number;
* color: string;
* fontSize: number;
* fontFamily: string;
}} Element
*/
/** /**
* @typedef {{ * @typedef {{
* name: string; * name: string;
* heading: Object; * heading: Element;
* title: string; * title: Element;
* subtitle: string; * subtitle: Element;
* datetime: string; * datetime: Element;
* weekday: string; * weekday: Element;
* content: string; * content: Element;
* address: string; * address: Element;
* }} Template * }} Template
*/ */

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

@ -12,18 +12,66 @@
export const verde = { export const verde = {
name: "verde", name: "verde",
heading: { heading: {
top: "50px", top: 300,
bottom: "120px", height: 1.2,
left: "5rem", left: 1,
right: "5rem", right: 1,
fontSize: "1rem", fontSize: 1,
color: "blue", color: "grey",
fontFamily: "sans-serif"
},
title: {
top: 100,
height: 6,
left: 2,
right: 2,
fontSize: 1.8,
color: "firebrick",
fontFamily: "Gill Sans, sans-serif"
},
subtitle: {
top: 100,
height: 6,
left: 2,
right: 2,
fontSize: 1.8,
color: "firebrick",
fontFamily: "Gill Sans, sans-serif"
},
content: {
top: 100,
height: 6,
left: 2,
right: 2,
fontSize: 1.8,
color: "firebrick",
fontFamily: "Gill Sans, sans-serif"
},
datetime: {
top: 400,
height: 4,
left: 2,
right: 2,
fontSize: 1,
color: "firebrick",
fontFamily: "sans-serif"
},
weekday: {
top: 500,
height: 1.5,
left: 2,
right: 2,
fontSize: 1,
color: "#333",
fontFamily: "sans-serif"
},
address: {
top: 500,
height: 1.5,
left: 2,
right: 2,
fontSize: 1,
color: "#333",
fontFamily: "sans-serif"
}, },
title: "title",
subtitle: "subtitle",
content: "content",
datetime: "datetime",
weekday: "weekday",
address: "address",
} }

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

@ -5,10 +5,7 @@
import Preview from '$lib/preview/Preview.svelte'; import Preview from '$lib/preview/Preview.svelte';
const slug = data.slug; const slug = data.slug;
const i = templates.map((e) => e.name).indexOf(slug); const templateIndex = templates.map((e) => e.name).indexOf(slug);
const template = templates[i];
console.log('La plantilla es ', template);
</script> </script>
<svelte:head> <svelte:head>
@ -21,7 +18,7 @@
<div class="main"> <div class="main">
<section class="form"><Form /></section> <section class="form"><Form /></section>
<section class="preview"><Preview /></section> <section class="preview"><Preview {templateIndex} /></section>
</div> </div>
<style> <style>

Write Preview
Loading…
Cancel
Save