Styles update
This commit is contained in:
rodič
94a204c3b2
revize
0e1e666f42
|
|
@ -11,32 +11,35 @@
|
|||
|
||||
<div class="text-2xl">
|
||||
{#each segments as segment}
|
||||
<div class="flex flex-wrap mb-2 gap-3 items-center text-gray-800">
|
||||
<div class="text-xl md:w-32 text-right">{format(new Date(segment.startTime), "HH:mm")} - {format(new Date(segment.endTime), "HH:mm")}</div>
|
||||
<div class="flex flex-wrap gap-2 items-center mb-6 md:mb-0">
|
||||
<div>
|
||||
<a href="/{entry}/event/{(segment.event || event).id}">
|
||||
<ItemLogo item={segment.event || event} width={event ? 'w-8' : 'w-10'}/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="">
|
||||
{#if !event}
|
||||
<a href="/{entry}/event/{(segment.event || event).id}" class="text-pbw-red hover:underline">{(segment.event || event)[event && event.shortname ? 'shortname' : 'name']}</a>
|
||||
{:else}
|
||||
<span class="">{event.shortname || event.name}</span>
|
||||
{/if}
|
||||
{#if segment.title}
|
||||
- {segment.title}
|
||||
<div class="md:flex flex-wrap mb-2 gap-3 items-center text-gray-800">
|
||||
<div class="text-xl md:w-32 md:text-right">{format(new Date(segment.startTime), "HH:mm")} - {format(new Date(segment.endTime), "HH:mm")}</div>
|
||||
<div class="md:flex gap-2 items-center mb-6 md:mb-0">
|
||||
<div class="flex gap-2 items-center my-2 md:my-0">
|
||||
<a href="/{entry}/event/{(segment.event || event).id}">
|
||||
<ItemLogo item={segment.event || event} width={event ? 'w-8' : 'w-10'}/>
|
||||
</a>
|
||||
{#if !event}
|
||||
<a href="/{entry}/event/{(segment.event || event).id}" class="text-pbw-red hover:underline">{(segment.event || event)[event && event.shortname ? 'shortname' : 'name']}</a>
|
||||
{:else}
|
||||
<span class="">{event.shortname || event.name}</span>
|
||||
{/if}
|
||||
{#if segment.title}
|
||||
- {segment.title}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="text-xl">
|
||||
{#if segment.venues || event?.venues}
|
||||
📍 {@html ((segment.venues || event.venues).map(vId => {
|
||||
const place = bundle.places.find(p => p.id === vId)
|
||||
return `<a href="/${entry}/place/${place.id}" class=\"underline hover:no-underline\">${place.name}</a>`
|
||||
})).join("<span>, </span>")}
|
||||
{:else if (segment.event?.venueName || event?.venueName)}
|
||||
📍 {(segment.event?.venueName || event?.venueName)}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-xl">
|
||||
{#if segment.venues || event?.venues}
|
||||
@ {@html ((segment.venues || event.venues).map(vId => {
|
||||
const place = bundle.places.find(p => p.id === vId)
|
||||
return `<a href="/${entry}/place/${place.id}" class=\"underline hover:no-underline\">${place.name}</a>`
|
||||
})).join("<span>, </span>")}
|
||||
{:else if (segment.event?.venueName || event?.venueName)}
|
||||
@ {(segment.event?.venueName || event?.venueName)}
|
||||
{#if segment.ecap || event?.attendees || segment.event?.attendees }
|
||||
<div class="text-lg">👥 {segment.ecap || event?.attendees || segment.event?.attendees}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
{#if col === "event"}
|
||||
<div class="text-xl text-gray-500 dark:text-gray-400 my-2">
|
||||
<span class="font-bold">{formatItemDate(item)}</span>
|
||||
{#if item.attendees}<br />{item.attendees}+ ppl{/if}
|
||||
{#if item.attendees}<br />{item.attendees} ppl{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if col === "media-partner"}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { goto } from '$app/navigation';
|
||||
import ItemLogo from '$lib/components/ItemLogo.svelte';
|
||||
export let data;
|
||||
export let highlightDay = false;
|
||||
|
||||
const startDate = "2023-06-02"
|
||||
const endDate = "2023-06-11"
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
function updateTimelineEvent(time, eventId, attendees) {
|
||||
function updateTimelineEvent(time, eventId, attendees, eventSegmentId) {
|
||||
for (const day of days) {
|
||||
for (const segment of segments) {
|
||||
const sstart = new Date(`${day}T${segment}`)
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
const baseScore = attendees ? (attendees > 3000 ? 3000 : (attendees < 200 ? 200 : attendees)) : 0
|
||||
const target = timelineData[[day, segment].join(';')]
|
||||
target.score += baseScore || 0
|
||||
target.events.push(eventId)
|
||||
target.events.push([eventId, eventSegmentId])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -53,25 +54,14 @@
|
|||
|
||||
const defaultTimes = "09:00-18:00"
|
||||
for (const event of bundle.events) {
|
||||
if (event.segments) {
|
||||
for (const eventSegment of event.segments) {
|
||||
const [ tstart, tend ] = (eventSegment.times || defaultTimes).split('-')
|
||||
const time = {
|
||||
start: new Date(`${eventSegment.date}T${tstart}`),
|
||||
end: new Date(`${tend <= tstart ? format(addDays(new Date(eventSegment.date),1), 'yyyy-MM-dd') : eventSegment.date}T${tend}`)
|
||||
}
|
||||
updateTimelineEvent(time, event.id, eventSegment.ecap || event.attendees)
|
||||
}
|
||||
} else {
|
||||
const [ tstart, tend ] = (event.times || defaultTimes).split('-').map(t => t.trim())
|
||||
const times = []
|
||||
for (let i = 0; i < (event.days || 1); i++) {
|
||||
const time = {
|
||||
start: addDays(new Date(event.date + "T" + tstart), i),
|
||||
end: addDays(new Date(event.date + "T" + tend), (tend < tstart ? i+1 : i))
|
||||
}
|
||||
updateTimelineEvent(time, event.id, event.attendees)
|
||||
for (let i = 0; i < event.segments.length; i++) {
|
||||
const eventSegment = event.segments[i]
|
||||
const [ tstart, tend ] = (eventSegment.times || defaultTimes).split('-')
|
||||
const time = {
|
||||
start: new Date(`${eventSegment.date}T${tstart}`),
|
||||
end: new Date(`${tend <= tstart ? format(addDays(new Date(eventSegment.date),1), 'yyyy-MM-dd') : eventSegment.date}T${tend}`)
|
||||
}
|
||||
updateTimelineEvent(time, event.id, eventSegment.ecap || event.attendees, i)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,34 +106,49 @@
|
|||
|
||||
<div class="w-full mb-10 relative">
|
||||
{#if selectedSegment}
|
||||
<div class="absolute top-[66px] w-[300px] border bg-white z-50 py-2 px-4 {selectedSegment ? 'block' : 'hidden'}" style="left: {selectedSegment.event.layerX}px;">
|
||||
<div class="absolute top-[81px] w-[300px] border bg-white z-50 py-2 px-4 {selectedSegment ? 'block' : 'hidden'}" style="left: {selectedSegment.event.layerX}px;">
|
||||
<div class="uppercase">{selectedSegment.title}</div>
|
||||
<div class="text-xl mt-4">
|
||||
{#each selectedSegment.data.events.map(e => eventDetail(e)) as item}
|
||||
{#each selectedSegment.data.events.map(e => { return [eventDetail(e[0]), e[1]] }) as [item, segmentId]}
|
||||
<div class="flex gap-2 items-center mb-1">
|
||||
<div class="">
|
||||
<ItemLogo {item} width="h-8" />
|
||||
</div>
|
||||
<div class="">
|
||||
{item.shortname || item.name}
|
||||
{#if item.segments[segmentId].title}
|
||||
- {item.segments[segmentId].title}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex text-center text-gray-400 text-sm">
|
||||
<div class="flex text-center text-gray-400 text-sm items-end h-10">
|
||||
{#each days as day}
|
||||
<div class="mb-1 uppercase" style="width: {1/(days.length/100)}%;">
|
||||
<div class="mb-1 uppercase {highlightDay && highlightDay !== day ? "text-gray-400 text-lg" : "text-pbw-red text-lg"}" style="width: {1/(days.length/100)}%;">
|
||||
<a href="/23/day/{format(new Date(day), 'yyyy-MM-dd')}"><span class="hidden md:inline-block">{format(new Date(day), 'eee ')}</span> {format(new Date(day), 'd')}</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="w-full border border-gray-300 rounded flex">
|
||||
<div class="w-full border {highlightDay ? 'border-gray-300' : 'border-pbw-red'} flex">
|
||||
{#each days as day, i}
|
||||
<div class="h-10 flex flex-grow hover:bg-pbw-yellow/20" style="width: {1/(days.length/100)}%; {days.length-i > 1 ? "border-right: 1px solid silver;" : ""}">
|
||||
<div
|
||||
class="h-10 flex flex-grow hover:bg-pbw-yellow/20"
|
||||
style="width: {1/(days.length/100)}%; {days.length-i > 1 ? "border-right: 1px solid "+ (highlightDay ? "silver" : "rgb(255, 22, 22)")+ ";" : ""}"
|
||||
>
|
||||
{#each segments as segment}
|
||||
<div id="{day}-{segment}" data-events={timelineData[[day, segment].join(";")].events} data-score={timelineData[[day, segment].join(";")].score} class="hover:border hover:border-pbw-yellow flex-grow cursor-pointer" style="width: {1/(segments.length/50)}%; background-color: rgba(255, 22, 22, {timelineData[[day, segment].join(";")].perc}%);" on:click={makeClick(day, segment, timelineData[[day, segment].join(";")])} on:mouseenter={makeSelected(day, segment, timelineData[[day, segment].join(";")])} on:mouseleave={hiddenSelected}>
|
||||
<div
|
||||
id="{day}-{segment}"
|
||||
data-events={timelineData[[day, segment].join(";")].events}
|
||||
data-score={timelineData[[day, segment].join(";")].score}
|
||||
class="hover:border hover:border-pbw-yellow flex-grow cursor-pointer"
|
||||
style="width: {1/(segments.length/50)}%; background-color: rgba({!highlightDay || highlightDay === day ? "255, 22, 22" : "115, 115, 115"}, {timelineData[[day, segment].join(";")].perc}%);"
|
||||
on:click={makeClick(day, segment, timelineData[[day, segment].join(";")])}
|
||||
on:mouseenter={makeSelected(day, segment, timelineData[[day, segment].join(";")])}
|
||||
on:mouseleave={hiddenSelected}
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,13 +48,13 @@
|
|||
<div class="flex gap-8 mb-6 md:mb-10">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-pbw-red"><a href="/{$page.params.entry}">#PBW23</a><span class="text-pbw-yellow">.day</span></h1>
|
||||
</div>
|
||||
|
||||
<TimelineHeatmap {data} highlightDay={$page.params.date} />
|
||||
<h2 class="text-4xl font-bold text-gray-600">{format(new Date($page.params.date), "MMMM d, yyyy - EEEE")}</h2>
|
||||
<div class="mt-10">
|
||||
<CalendarList date={$page.params.date} segments={segments} entry={$page.params.entry} bundle={data.bundle} />
|
||||
</div>
|
||||
<Footer bundle={data.bundle} />
|
||||
</div>
|
||||
|
||||
<TimelineHeatmap {data} />
|
||||
<h2 class="text-4xl font-bold text-gray-600">{format(new Date($page.params.date), "MMMM d, yyyy - EEEE")}</h2>
|
||||
<div class="mt-10">
|
||||
<CalendarList date={$page.params.date} segments={segments} entry={$page.params.entry} bundle={data.bundle} />
|
||||
</div>
|
||||
<Footer bundle={data.bundle} />
|
||||
</div>
|
||||
</div>
|
||||
Načítá se…
Odkázat v novém úkolu