105 lines
2.2 KiB
Svelte
105 lines
2.2 KiB
Svelte
<svelte:options tag="gancio-event" />
|
|
|
|
<script>
|
|
import { onMount } from 'svelte'
|
|
import { when } from './helpers'
|
|
export let baseurl = 'https://demo.gancio.org'
|
|
export let id
|
|
|
|
let mounted = false
|
|
let event
|
|
|
|
function update(id, baseurl) {
|
|
if (mounted) {
|
|
fetch(`${baseurl}/api/event/${id}`)
|
|
.then((res) => res.json())
|
|
.then((e) => (event = e))
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
mounted = true
|
|
update(id, baseurl)
|
|
})
|
|
$: update(id, baseurl)
|
|
|
|
function thumbnail(event) {
|
|
return `${baseurl}/media/thumb/${event.media[0].url}`
|
|
}
|
|
|
|
function position(event) {
|
|
if (event.media[0].focalpoint) {
|
|
const focalpoint = event.media[0].focalpoint
|
|
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
|
|
}
|
|
return 'center center'
|
|
}
|
|
</script>
|
|
|
|
{#if event}
|
|
<a
|
|
href="{baseurl}/event/{event.slug || event.id}"
|
|
class="card"
|
|
target="_blank"
|
|
>
|
|
{#if event.media.length}
|
|
<img
|
|
src={thumbnail(event)}
|
|
alt={event.media[0].name}
|
|
style="object-position: {position(event)}; aspect-ratio=1.7778;"
|
|
/>
|
|
{/if}
|
|
<div class="container">
|
|
<strong>{event.title}</strong>
|
|
<div>{when(event)}</div>
|
|
<div class="place">@{event.place.name}</div>
|
|
</div>
|
|
</a>
|
|
{/if}
|
|
|
|
<style>
|
|
.card {
|
|
display: block;
|
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
|
|
sans-serif;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
transition: 0.3s;
|
|
border-radius: 5px; /* 5px rounded corners */
|
|
max-width: 500px;
|
|
text-decoration: none;
|
|
color: white;
|
|
background-color: #1e1e1e;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Add rounded corners to the top left and the top right corner of the image */
|
|
img {
|
|
border-radius: 5px 5px 0 0;
|
|
max-height: 250px;
|
|
min-height: 160px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
object-position: top;
|
|
}
|
|
|
|
.card:hover .container {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* On mouse-over, add a deeper shadow */
|
|
.card:hover {
|
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Add some padding inside the card container */
|
|
.container {
|
|
transition: padding-left 0.2s;
|
|
padding: 16px;
|
|
}
|
|
|
|
.place {
|
|
font-weight: 600;
|
|
color: #ff6e40;
|
|
}
|
|
</style>
|