organizadores (#2)
Ya permite incluir logos de organizadores e incluso darles un caption por si no tienen nombre y hay que ponerlo. Co-authored-by: Borja Robert <borja@brobert.net> Reviewed-on: #2pull/3/head
parent
76464a61ea
commit
41afe44c51
@ -1,107 +0,0 @@
|
||||
<script>
|
||||
import { spring } from 'svelte/motion';
|
||||
|
||||
let count = 0;
|
||||
|
||||
const displayed_count = spring();
|
||||
$: displayed_count.set(count);
|
||||
$: offset = modulo($displayed_count, 1);
|
||||
|
||||
/**
|
||||
* @param {number} n
|
||||
* @param {number} m
|
||||
*/
|
||||
function modulo(n, m) {
|
||||
// handle negative numbers
|
||||
return ((n % m) + m) % m;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="counter">
|
||||
<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
|
||||
<svg aria-hidden="true" viewBox="0 0 1 1">
|
||||
<path d="M0,0.5 L1,0.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="counter-viewport">
|
||||
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
|
||||
<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
|
||||
<strong>{Math.floor($displayed_count)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
|
||||
<svg aria-hidden="true" viewBox="0 0 1 1">
|
||||
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.counter {
|
||||
display: flex;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.counter button {
|
||||
width: 2em;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
touch-action: manipulation;
|
||||
color: var(--text-color);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.counter button:hover {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
path {
|
||||
vector-effect: non-scaling-stroke;
|
||||
stroke-width: 2px;
|
||||
stroke: var(--text-color);
|
||||
}
|
||||
|
||||
.counter-viewport {
|
||||
width: 8em;
|
||||
height: 4em;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.counter-viewport strong {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: 400;
|
||||
color: var(--accent-color);
|
||||
font-size: 4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.counter-digits {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
top: -100%;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
<script>
|
||||
import {
|
||||
title,
|
||||
heading,
|
||||
subtitle,
|
||||
content,
|
||||
date,
|
||||
address,
|
||||
organizedBy,
|
||||
collabs,
|
||||
canvas
|
||||
} from '$lib/stores/store';
|
||||
|
||||
let fileinput, avatar;
|
||||
|
||||
const onFileSelected = (e) => {
|
||||
let image = e.target.files[0];
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(image);
|
||||
reader.onload = (e) => {
|
||||
$organizedBy = [...$organizedBy, { image: e.target.result, text: '' }];
|
||||
};
|
||||
};
|
||||
|
||||
const removeOrganizer = (index) => {
|
||||
if (index > -1) {
|
||||
$organizedBy.splice(index, 1);
|
||||
$organizedBy = $organizedBy;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="organized-by">
|
||||
{#if $organizedBy[0]}
|
||||
{#each $organizedBy as organization, i}
|
||||
<div class="organization">
|
||||
<div
|
||||
class="remove"
|
||||
on:click|preventDefault={() => {
|
||||
removeOrganizer(i);
|
||||
}}
|
||||
>
|
||||
x
|
||||
</div>
|
||||
<img class="organized-logo" src={organization.image} alt={organization.text} />
|
||||
<input class="logo-title" type="text" bind:value={organization.text} />
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click|preventDefault={() => {
|
||||
fileinput.click();
|
||||
}}>Añadir logo</button
|
||||
>
|
||||
<input
|
||||
style="display:none;"
|
||||
type="file"
|
||||
accept=".jpg, .jpeg, .png"
|
||||
on:change={(e) => onFileSelected(e)}
|
||||
bind:this={fileinput}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.organized-by {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.organization {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-gap: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
.organized-logo {
|
||||
max-height: 64px;
|
||||
max-width: 100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
input {
|
||||
display: block;
|
||||
max-width: 100px;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
margin: 1rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue