Heatmap select red in days
This commit is contained in:
rodič
0e1e666f42
revize
b89730a18e
|
@ -106,7 +106,7 @@
|
||||||
|
|
||||||
<div class="w-full mb-10 relative">
|
<div class="w-full mb-10 relative">
|
||||||
{#if selectedSegment}
|
{#if selectedSegment}
|
||||||
<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="absolute top-[81px] w-[300px] border bg-white z-50 py-2 px-4 {selectedSegment ? 'hidden md:block' : 'hidden'}" style="left: {selectedSegment.event.layerX}px;">
|
||||||
<div class="uppercase">{selectedSegment.title}</div>
|
<div class="uppercase">{selectedSegment.title}</div>
|
||||||
<div class="text-xl mt-4">
|
<div class="text-xl mt-4">
|
||||||
{#each selectedSegment.data.events.map(e => { return [eventDetail(e[0]), e[1]] }) as [item, segmentId]}
|
{#each selectedSegment.data.events.map(e => { return [eventDetail(e[0]), e[1]] }) as [item, segmentId]}
|
||||||
|
@ -136,14 +136,14 @@
|
||||||
{#each days as day, i}
|
{#each days as day, i}
|
||||||
<div
|
<div
|
||||||
class="h-10 flex flex-grow hover:bg-pbw-yellow/20"
|
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)")+ ";" : ""}"
|
style="width: {1/(days.length/100)}%; {(highlightDay && highlightDay === day ? "border: 1px solid rgb(255, 22, 22);" : (!highlightDay ? "border-right: 1px solid rgb(255, 22, 22);" : (days.length-i > 1 ? "border-right: 1px solid silver;" : "")))}"
|
||||||
>
|
>
|
||||||
{#each segments as segment}
|
{#each segments as segment}
|
||||||
<div
|
<div
|
||||||
id="{day}-{segment}"
|
id="{day}-{segment}"
|
||||||
data-events={timelineData[[day, segment].join(";")].events}
|
data-events={timelineData[[day, segment].join(";")].events}
|
||||||
data-score={timelineData[[day, segment].join(";")].score}
|
data-score={timelineData[[day, segment].join(";")].score}
|
||||||
class="hover:border hover:border-pbw-yellow flex-grow cursor-pointer"
|
class="md:hover:border md: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}%);"
|
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:click={makeClick(day, segment, timelineData[[day, segment].join(";")])}
|
||||||
on:mouseenter={makeSelected(day, segment, timelineData[[day, segment].join(";")])}
|
on:mouseenter={makeSelected(day, segment, timelineData[[day, segment].join(";")])}
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TimelineHeatmap {data} highlightDay={$page.params.date} />
|
<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>
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-600">{format(new Date($page.params.date), "MMMM d, yyyy - EEEE")}</h2>
|
||||||
<div class="mt-10">
|
<div class="mt-10">
|
||||||
<CalendarList date={$page.params.date} segments={segments} entry={$page.params.entry} bundle={data.bundle} />
|
<CalendarList date={$page.params.date} segments={segments} entry={$page.params.entry} bundle={data.bundle} />
|
||||||
</div>
|
</div>
|
||||||
|
|
Načítá se…
Odkázat v novém úkolu