🔨 Refactor: Improve UI for session page

- Add a button to the `[sessionId]/+page.svelte` file for column selection
- Update the class of the button to `z-20 flex justify-end items-center overflow-hidden sticky left-0 w-1/6 text-xs leading-5`
- Add an `on:click` event to the button to update

[src/routes/projects/[projectId]/sessionv2/[sessionId]/+page.svelte]
- Change class of button from `flex justify-end items-center overflow-hidden sticky left-0 z-20 w-1/6 text-xs leading-5` to `z-20 flex justify-end items-center overflow-hidden sticky left-0 w-1/6 text-xs leading-5`
- Add a `<button>` element for column selection
- Add `on:click` event to the `<button>` element to update
This commit is contained in:
Kiril Videlov 2023-02-22 11:57:12 +01:00
parent 3c42525a13
commit f1d8555453

View File

@ -152,7 +152,7 @@
: ''}" : ''}"
> >
<button <button
class="flex justify-end items-center overflow-hidden sticky left-0 z-20 w-1/6 text-xs leading-5 class="z-20 flex justify-end items-center overflow-hidden sticky left-0 w-1/6 text-xs leading-5
{selectedFileIdx == i {selectedFileIdx == i
? 'text-zinc-200 cursor-default' ? 'text-zinc-200 cursor-default'
: 'text-zinc-400 hover:text-zinc-200 cursor-pointer'}" : 'text-zinc-400 hover:text-zinc-200 cursor-pointer'}"
@ -165,6 +165,7 @@
{/each} {/each}
</div> </div>
<!-- col selection -->
<div <div
class="col-start-1 col-end-2 row-start-1 grid" class="col-start-1 col-end-2 row-start-1 grid"
style="grid-template-columns: repeat(88, minmax(0, 1fr));" style="grid-template-columns: repeat(88, minmax(0, 1fr));"
@ -204,14 +205,20 @@
new Date(delta.timestampMs) new Date(delta.timestampMs)
)} / span 1;" )} / span 1;"
> >
<a <button
href="/" class="z-20 h-full flex flex-col w-full items-center justify-center text-xs "
class="flex flex-col items-center justify-center text-xs " on:click={() => {
> console.log(
<p class="font-semibold text-zinc-800"> timeStampToCol(
<!-- foo --> new Date(delta.timestampMs)
</p> )
</a> );
value = timeStampToCol(
new Date(delta.timestampMs)
);
selectedFileIdx = idx;
}}
/>
</li> </li>
{/each} {/each}
{/each} {/each}