Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-01-23 02:34:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added toggle for card expansion

Browse source
This commit is contained in:
Christopher Bisset 2022-06-29 12:22:55 +10:00
parent fdac9177da
commit faf02d3b44
2 changed files with 21 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docker/development/scripts/2-initialise.sh
View file

@ -48,7 +48,7 @@ then
if [ "$AUTOSTART" = "true" ]
then
# run the sub process
tmux new-session -d "${DEV_COMMAND}; sh"
tmux new-session -d "${DEV_COMMAND}; bash -i"
fi
fi

31
src/lib/index/UserCard.svelte
View file

@ -1,14 +1,23 @@
<script lang="ts">
import { fade } from 'svelte/transition';
export let user = { id: '', name: '', createdAt: '' };
import { fade, slide } from 'svelte/transition';
export let user = { id: '', name: '', createdAt: '' };
let cardExpanded = false;
</script>
<div class="grid grid-cols-1 divide-y p-2 max-w-screen-lg border-2 mx-4 border-gray-100 rounded-md text-sm text-gray-600 shadow">
<div in:fade class="flex justify-between">
<span class="font-bold">{user.id}: {user.name}</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</div>
<div class="pt-2 pl-2"><p><span class="font-bold">User Created: </span><span class="font-normal">{new Date(user.createdAt)}</span></p></div>
</div>
<div in:fade on:click={() => cardExpanded = !cardExpanded} class="grid grid-cols-1 divide-y p-2 max-w-screen-lg border-2 mx-4 border-gray-100 rounded-md text-sm text-gray-600 shadow">
<div class="flex justify-between">
<span class="font-bold">{user.id}: {user.name}</span>
{#if !cardExpanded}
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
</svg>
{/if}
</div>
{#if cardExpanded}
<div transition:slide class="pt-2 pl-2"><p><span class="font-bold">User Created: </span><span class="font-normal">{new Date(user.createdAt)}</span></p></div>
{/if}
</div>