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

date y time separados en distintos componentes y distintos inputs

Browse Source
pull/8/head
Borja Robert 2 years ago
parent 35096ddbdd
commit 8cb98b9c25
3 changed files with 38 additions and 227 deletions
Show Stats Download Patch File Download Diff File

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

@ -8,6 +8,7 @@
import Title from '$lib/templates/Title.svelte'; import Title from '$lib/templates/Title.svelte';
import Subtitle from '$lib/templates/Subtitle.svelte'; import Subtitle from '$lib/templates/Subtitle.svelte';
import Content from '$lib/templates/Content.svelte'; import Content from '$lib/templates/Content.svelte';
import Time from '$lib/templates/Time.svelte';
import Date from '$lib/templates/Date.svelte'; import Date from '$lib/templates/Date.svelte';
import Weekday from '$lib/templates/Weekday.svelte'; import Weekday from '$lib/templates/Weekday.svelte';
import Address from '$lib/templates/Address.svelte'; import Address from '$lib/templates/Address.svelte';
@ -20,8 +21,9 @@
<Title {templateIndex} /> <Title {templateIndex} />
<Subtitle {templateIndex} /> <Subtitle {templateIndex} />
<Content {templateIndex} /> <Content {templateIndex} />
<Weekday {templateIndex} />
<Date {templateIndex} /> <Date {templateIndex} />
<Time {templateIndex} />
<Weekday {templateIndex} />
<Address {templateIndex} /> <Address {templateIndex} />
{/if} {/if}

226
src/lib/preview/verde.css
Unescape Escape View File

@ -1,226 +0,0 @@
.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; */
}
.heading {
position: absolute;
top: 300px;
left: 1rem;
right: 1rem;
font-size: 1rem;
color: grey;
font-variant: small-caps;
height: 1.2rem;
overflow: hidden;
}
.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;
}

35
src/lib/templates/Time.svelte
Unescape Escape View File

@ -0,0 +1,35 @@
<script>
import { templates } from '$lib/templates/templates';
/** @type number */ export let templateIndex;
import { time } from '$lib/stores/store';
</script>
{#if templates[templateIndex] && $time !== ''}
<div
class="time"
style="
top: {templates[templateIndex].time.top}px;
height: {templates[templateIndex].time.height}rem;
left: {templates[templateIndex].time.left}rem;
right: {templates[templateIndex].time.right}rem;
color: {templates[templateIndex].time.color};
font-size: {templates[templateIndex].time.fontSize}rem;
font-family: {templates[templateIndex].time.fontFamily};
text-align: {templates[templateIndex].time.textAlign};
font-weight: {templates[templateIndex].time.fontWeight};
line-height: {templates[templateIndex].time.lineHeight}rem;
"
>
{$time}
</div>
{/if}
<style>
.time {
position: absolute;
text-transform: uppercase;
overflow: hidden;
display: block;
}
</style>
Write Preview
Loading…
Cancel
Save