encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve datetime display in webcomponent

Browse Source
This commit is contained in:
lesion
2022-09-05 11:42:47 +02:00
parent 5253cee835
commit 3c176ff7af
1 changed files with 248 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
webcomponents/src/GancioEvents.svelte
View File

@@ -1,5 +1,6 @@
<script> <svelte:options tag="gancio-events" />
<script>
import { onMount } from 'svelte' import { onMount } from 'svelte'
export let baseurl = '' export let baseurl = ''
export let title = '' export let title = ''
@@ -7,7 +8,7 @@
export let tags = '' export let tags = ''
export let places = '' export let places = ''
export let theme = 'light' export let theme = 'light'
export let show_recurrent=false export let show_recurrent = false
export let sidebar = 'true' export let sidebar = 'true'
export let external_style = '' export let external_style = ''
@@ -15,14 +16,14 @@
let mounted = false let mounted = false
let events = [] let events = []
function update (v) { function update(v) {
if (!mounted) return if (!mounted) return
const params = [] const params = []
if (maxlength) { if (maxlength) {
params.push(`max=${maxlength}`) params.push(`max=${maxlength}`)
} }
if(tags) { if (tags) {
params.push(`tags=${tags}`) params.push(`tags=${tags}`)
} }
@@ -30,168 +31,206 @@
params.push(`places=${places}`) params.push(`places=${places}`)
} }
params.push(`show_recurrent=${show_recurrent?'true':'false'}`) params.push(`show_recurrent=${show_recurrent ? 'true' : 'false'}`)
fetch(`${baseurl}/api/events?${params.join('&')}`) fetch(`${baseurl}/api/events?${params.join('&')}`)
.then(res => res.json()) .then((res) => res.json())
.then(e => { .then((e) => {
events = e events = e
}) })
.catch(e => { .catch((e) => {
console.error('Error loading Gancio API -> ', e) console.error('Error loading Gancio API -> ', e)
}) })
} }
function position(event) { function position(event) {
if (event.media[0].focalpoint) { if (event.media && event.media[0].focalpoint) {
const focalpoint = event.media[0].focalpoint const focalpoint = event.media[0].focalpoint
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%` return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
} }
return 'center center' return 'center center'
} }
function when (timestamp) { function _when(unix_timestamp, type = 'long') {
return new Date(timestamp*1000) const options =
.toLocaleDateString(undefined, type === 'long'
{ ? {
weekday: 'long', weekday: 'long',
month: 'long', month: 'long',
day: 'numeric', day: 'numeric',
hour: '2-digit', hour: '2-digit',
minute: '2-digit' minute: '2-digit',
}) }
: { hour: '2-digit', minute: '2-digit' }
const d = new Date(unix_timestamp * 1000).toLocaleString(undefined, options)
return d
}
function when(event) {
if (event.multidate) {
return _when(event.start_datetime) + ' - ' + _when(event.end_datetime)
}
return (
_when(event.start_datetime) +
(event.end_datetime ? '-' + _when(event.end_datetime, 'short') : '')
)
} }
onMount(() => { onMount(() => {
mounted = true mounted = true
update() update()
}) })
$: update(maxlength && title && places && tags && theme && show_recurrent && sidebar) $: update(
maxlength && title && places && tags && theme && show_recurrent && sidebar
)
</script> </script>
<svelte:options tag="gancio-events"/>
{#if external_style}<link rel='stylesheet' href='{external_style}' />{/if} {#if external_style}<link rel="stylesheet" href={external_style} />{/if}
{#if events.length} {#if events.length}
<div id='gancioEvents' <div
class:dark="{theme === 'dark'}" class:light="{theme === 'light'}" id="gancioEvents"
class:sidebar="{sidebar === 'true'}" class:nosidebar="{sidebar !== 'true'}"> class:dark={theme === 'dark'}
class:light={theme === 'light'}
class:sidebar={sidebar === 'true'}
class:nosidebar={sidebar !== 'true'}
>
{#if title && sidebar === 'true'} {#if title && sidebar === 'true'}
<a href='{baseurl}' target='_blank' id='header'> <a href={baseurl} target="_blank" id="header">
<div class='content'> <div class="content">
<div class='title'>{title}</div> <div class="title">{title}</div>
<img id='logo' alt='logo' src='{baseurl}/logo.png'/> <img id="logo" alt="logo" src="{baseurl}/logo.png" />
</div> </div>
</a> </a>
{/if} {/if}
{#each events as event} {#each events as event}
<a href='{baseurl}/event/{event.slug || event.id}' class='event' title='{event.title}' target='_blank'> <a
href="{baseurl}/event/{event.slug || event.id}"
class="event"
title={event.title}
target="_blank"
>
{#if sidebar !== 'true'} {#if sidebar !== 'true'}
<div class='img'> <div class="img">
{#if event.media.length} {#if event.media.length}
<img style="object-position: {position(event)}; aspect-ratio=1.7778;" <img
alt="{event.media[0].name}" style="object-position: {position(event)}; aspect-ratio=1.7778;"
src="{baseurl + '/media/thumb/' + event.media[0].url}" loading='lazy'/> alt={event.media[0].name}
src={baseurl + '/media/thumb/' + event.media[0].url}
loading="lazy"
/>
{:else} {:else}
<img style="aspect-ratio=1.7778;" <img
alt="{event.title}" style="aspect-ratio=1.7778;"
src="{baseurl + '/noimg.svg'}" loading='lazy'/> alt={event.title}
src={baseurl + '/noimg.svg'}
loading="lazy"
/>
{/if} {/if}
</div> </div>
{/if} {/if}
<div class='content'> <div class="content">
<div class='subtitle'> <div class="subtitle">
{when(event.start_datetime)} {when(event)}
</div> </div>
<div class='title'> <div class="title">
{event.title} {event.title}
</div> </div>
<span class='place'>@{event.place.name} <span class='subtitle'> {event.place.address}</span></span> <span class="place"
>@{event.place.name}
<span class="subtitle"> {event.place.address}</span></span
>
{#if event.tags.length} {#if event.tags.length}
<div class='tags'> <div class="tags">
{#each event.tags as tag} {#each event.tags as tag}
<span class='tag'>#{tag}</span> <span class="tag">#{tag}</span>
{/each} {/each}
</div> </div>
{/if} {/if}
</div> </div>
</a> </a>
{/each} {/each}
</div> </div>
{/if} {/if}
<style> <style>
#gancioEvents { #gancioEvents {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
box-sizing: content-box; box-sizing: content-box;
margin: 0 auto; margin: 0 auto;
font-size: 1rem; font-size: 1rem;
} text-align: left;
}
.nosidebar { .nosidebar {
max-width: 1200px; max-width: 1200px;
} }
#header{ #header {
padding: 1.2rem 1rem; padding: 1.2rem 1rem;
background-color: var(--bg-odd-color); background-color: var(--bg-odd-color);
} }
.sidebar { .sidebar {
max-width: 500px; max-width: 500px;
box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 1px 3px 1px; box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;
border-radius: 5px; border-radius: 5px;
font-size: 1rem; font-size: 1rem;
} }
.event .img { .event .img {
width: 100%; width: 100%;
max-width: 450px; max-width: 450px;
max-height: 250px; max-height: 250px;
aspect-ratio: 1.7778; aspect-ratio: 1.7778;
flex: 1 0 auto; flex: 1 0 auto;
/* height: 100%; */ /* height: 100%; */
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.event { .event {
flex-wrap: wrap; flex-wrap: wrap;
} }
.event .img { .event .img {
max-width: 100%; max-width: 100%;
} }
} }
.event img { .event img {
object-fit: cover; object-fit: cover;
border-radius: 15px; border-radius: 15px;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
} rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.nosidebar .event { .nosidebar .event {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.nosidebar .content { .nosidebar .content {
margin-left: 1rem; margin-left: 1rem;
margin-top: 5px; margin-top: 5px;
text-align: left; text-align: left;
} }
.tags { .tags {
margin-top: 2px; margin-top: 2px;
} }
#logo { #logo {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
height: 40px; height: 40px;
} }
a { a {
text-decoration: none; text-decoration: none;
color: var(--text-color); color: var(--text-color);
display: flex; display: flex;
@@ -199,77 +238,77 @@ a {
margin: 0; margin: 0;
line-height: 1.275rem; line-height: 1.275rem;
font-weight: 400; font-weight: 400;
font-size: .875rem; font-size: 0.875rem;
position: relative; position: relative;
transition: background-color .3s cubic-bezier(.25,.8,.5,1), padding .3s; transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
padding 0.3s;
box-sizing: content-box; box-sizing: content-box;
} }
a:hover .title, a:hover .title,
a:focus .title, a:focus .title,
a:active .title { a:active .title {
text-decoration:underline; text-decoration: underline;
} }
.dark { .dark {
--bg-odd-color: #161616; --bg-odd-color: #161616;
--bg-even-color: #222; --bg-even-color: #222;
--bg-hover-color: #333; --bg-hover-color: #333;
--text-color: white; --text-color: white;
--title-color: white; --title-color: white;
--line-color: rgba(120, 120, 120, 0.2); --line-color: rgba(120, 120, 120, 0.2);
} }
.light { .light {
--bg-odd-color: #f5f5f5; --bg-odd-color: #f5f5f5;
--bg-even-color: #FAFAFA; --bg-even-color: #fafafa;
--bg-hover-color: #EEE; --bg-hover-color: #eee;
--text-color: #222; --text-color: #222;
--title-color: black; --title-color: black;
--line-color: rgba(220, 220, 220, 0.9); --line-color: rgba(220, 220, 220, 0.9);
} }
.sidebar a { .sidebar a {
background-color: var(--bg-even-color); background-color: var(--bg-even-color);
border-bottom:1px solid var(--line-color); border-bottom: 1px solid var(--line-color);
} }
.sidebar a:hover, .sidebar a:hover,
.sidebar a:focus, .sidebar a:focus,
.sidebar a:active { .sidebar a:active {
background-color: var(--bg-hover-color); background-color: var(--bg-hover-color);
padding-left: 15px; padding-left: 15px;
padding-right:25px; padding-right: 25px;
} }
.place { .place {
font-weight: 400; font-weight: 400;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.4rem; line-height: 1.4rem;
color: orangered; color: orangered;
} }
.title { .title {
color: var(--title-color); color: var(--title-color);
font-weight: bold; font-weight: bold;
font-size: 1.3rem; font-size: 1.3rem;
line-height: 1.1em; line-height: 1.1em;
} }
.nosidebar .title { .nosidebar .title {
font-size: 1.9em; font-size: 1.9em;
line-height: 1.1em; line-height: 1.1em;
} }
.subtitle { .subtitle {
font-size: 1rem; font-size: 1rem;
line-height: 1.1em; line-height: 1.1em;
color: var(--title-color); color: var(--title-color);
opacity: 0.9; opacity: 0.9;
} }
.tag { .tag {
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
} }
</style> </style>