Render pretty event with nice looking transition.

This commit is contained in:
Ryan Breen
2023-02-14 23:43:24 -05:00
parent bed3c121e7
commit ad0b657cd5
2 changed files with 17 additions and 2 deletions

View File

@@ -106,8 +106,17 @@
</div>
<template x-for="event in events">
<div class="mt-3" x-text="JSON.stringify(event, 2)">
<template x-for="(event, index) in events">
<div class="mt-3 border-solid border border-fuchsia-700 rounded-lg">
<div class="select-none flex cursor-pointer text-xl" @click="selected = selected === index ? null : index">
<div class="flex-none w-14 p-4 font-extrabold" x-text="selected === index ? '-' : '+'"></div>
<div class="flex-initial w-64 p-4" x-text="event.metadata.signed_at"></div>
<div class="flex-initial w-64 p-4" x-text="event.metadata.host"></div>
</div>
<pre class="rounded-b-lg bg-slate-200" x-html="highlight(event)" x-show="selected === index"
x-transition:enter.opacity.delay.75ms x-transition:leave.opacity>
</pre>
</div>
</template>
</body>