OpenSource/paimon-moe
OpenSource/paimon-moe
1
0
Fork 0
mirror of https://github.com/MadeBaruna/paimon-moe.git synced 2025-03-13 11:18:28 +01:00
Code Issues Projects Releases Packages Wiki Activity

More timeline styling

Browse source
This commit is contained in:
Made Baruna 2021-03-20 04:12:10 +08:00
parent a31ef20bf0
commit 17cca75505
2 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/routes/timeline/_item.svelte
View file

@ -23,6 +23,8 @@
$: attachedNext = next !== null && next.start.diff(event.end, 'hour') < 1;
$: attachedPrev = prev !== null && event.start.diff(prev.end, 'hour') < 1;
$: prevEnded = prev !== null && now.isAfter(prev.end);
$: shouldShowHourStart = diffStart <= 86400000 || event.duration > 8 || !prevNearby;
$: shouldShowHourEnd = diffEnd <= 86400000 || event.duration > 8 || !prevNearby;
</script>
<div
@ -35,7 +37,9 @@
top: {marginTop +
i * (eventHeight + eventMargin)}px; height: {eventHeight}px; padding-right: 10px;
{prevNearby &&
!started && (attachedPrev || prevEnded) && prevNearby
!started &&
(attachedPrev || prevEnded) &&
prevNearby
? 'padding-left: 35px;'
: 'padding-left: 10px;'}
--image: url(/images/events/{event.image}); --pos: {event.pos}; --color: {event.color};
@ -49,16 +53,34 @@
</span>
<!-- Ending timer-->
{#if started && !ended && !event.startOnly && !attachedNext}
<div class="absolute pl-3" style="top: 6px; right: {nextNearby ? '-55px' : '-120px'}; width: 120px;">
<div
class="absolute pl-3"
style="top: 6px; right: {nextNearby ? '-55px' : '-120px'}; width: {shouldShowHourEnd ? '120px' : '40px'};"
>
<span class="text-sm rounded-xl text-black font-semibold bg-white bg-opacity-75 px-1">
{`${diffEnd > 86400000 ? `${Math.trunc(dayjs.duration(diffEnd).asDays())}d` : ''} ${dayjs.duration(diffEnd).format('HH:mm:ss')}`}
{diffEnd > 86400000
? `${Math.trunc(dayjs.duration(diffEnd).asDays())}d ${
shouldShowHourEnd ? dayjs.duration(diffEnd).format('HH:mm:ss') : ''
}`
: dayjs.duration(diffEnd).format('HH:mm:ss')}
</span>
</div>
<!-- Starting timer-->
{:else if (prevNearby && !attachedPrev ? prevEnded : true) && !started && !ended}
<div class="absolute pr-3 text-right" style="top: 6px; left: {prevNearby ? '-80px' : '-120px'}; width: 120px;">
<!-- Starting timer-->
{:else if (prevNearby && !attachedPrev ? prevEnded : true) && !started && !ended}
<div
class="absolute pr-3 text-right"
style="top: 6px; left: {prevNearby
? shouldShowHourStart
? '-80px'
: '-18px'
: '-120px'}; width: {shouldShowHourStart ? '120px' : '40px'};"
>
<span class="text-sm rounded-xl text-black font-semibold bg-white bg-opacity-75 px-1">
{`${diffStart > 86400000 ? `${Math.trunc(dayjs.duration(diffStart).asDays())}d` : ''} ${dayjs.duration(diffStart).format('HH:mm:ss')}`}
{diffStart > 86400000
? `${Math.trunc(dayjs.duration(diffStart).asDays())}d ${
shouldShowHourStart ? dayjs.duration(diffStart).format('HH:mm:ss') : ''
}`
: dayjs.duration(diffStart).format('HH:mm:ss')}
</span>
</div>
{/if}

2
src/routes/timeline/index.svelte
View file

@ -150,6 +150,8 @@
loading = false;
await tick();
if (timelineContainer === undefined) return;
if (timelineContainer.offsetWidth < 500) {
dayWidth = 40;
await tick();