cjdenio/trax-accidents
1
0 Fork 0
mirror of https://github.com/cjdenio/trax-accidents.git synced 2026-10-03 10:46:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

hover + bug

Browse Source
This commit is contained in:
cjdenio committed 2026-04-19 20:28:15 -06:00
1 parent a5459b23c6
commit b3ecc15c1b
3 files changed
+38 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/home.handlebars
+19 -6
View File
@@ -29,20 +29,33 @@
<pre class="font-sans text-wrap border border-gray-500 border-t-0 rounded-b-lg p-2">{{ latestCollision.content }}</pre>
</div>
<div class="flex justify-between max-w-96 mx-auto h-8">
<div class="flex justify-between max-w-96 mx-auto h-8" id="the-box">
{{#each last90Days }}
{{#if this}}
<div class="h-full w-0.5 sm:w-1 bg-red-400"></div>
{{#if collision}}
<div class="h-full w-0.5 sm:w-1 bg-red-400" data-date="{{ renderedDate }}"></div>
{{else}}
<div class="h-full w-0.5 sm:w-1 bg-green-400"></div>
<div class="h-full w-0.5 sm:w-1 bg-green-400" data-date="{{ renderedDate }}"></div>
{{/if}}
{{/each}}
</div>
<div class="max-w-96 mx-auto flex justify-between">
<div class="text-gray-600 text-sm">60 days ago</div>
<div class="text-gray-600 text-sm">Today</div>
<div class="text-gray-400 text-sm basis-0 grow">60 days ago</div>
<div class="text-sm basis-0 grow text-center" id="selected-date"></div>
<div class="text-gray-400 text-sm basis-0 grow text-end">Today</div>
</div>
<script>
for (const bar of document.querySelectorAll("[data-date]")) {
bar.addEventListener("mouseenter", function () {
document.getElementById("selected-date").innerText = this.dataset["date"];
});
}
document.getElementById("the-box").addEventListener("mouseleave", function () {
document.getElementById("selected-date").innerText = "";
});
</script>
</body>
</html>