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

fix: animations causing page transition conflicts

Browse source
This commit is contained in:
Christopher Bisset 2022-06-29 13:35:44 +10:00
parent dc4512836f
commit 797a3bdb79
4 changed files with 6 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/lib/common/nav.svelte
View file

@ -46,7 +46,7 @@
<span class="indent-4">User View</span>
</a>
<a href="/devices.html" class="nav-item">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span class="indent-4">Device View</span>

3
src/lib/devices/DeviceCard.svelte
View file

@ -18,7 +18,8 @@
{/if}
</div>
{#if cardExpanded}
<div transition:slide class="pt-2 pl-2">
<!-- we put a conditional on the outro transition so page changes do not trigger the animation -->
<div in:slide out:slide={{ duration: cardExpanded ? 0 : 500 }} class="pt-2 pl-2">
<p><span class="font-bold">Device Last Seen: </span><span class="font-normal">{new Date(device.lastSeen)}</span></p>
<p><span class="font-bold">IP Addresses: </span><span class="font-normal">{device.ipAddresses}</span></p>
</div>

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

@ -18,6 +18,7 @@
{/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>
<!-- we put a conditional on the outro transition so page changes do not trigger the animation -->
<div in:slide out:slide={{ duration: cardExpanded ? 0 : 500 }} 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>

2
src/routes/index.svelte
View file

@ -2,7 +2,7 @@
<script lang="ts">
import UserCard from '$lib/index/UserCard.svelte';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { fade, fly } from 'svelte/transition';
//
// Component Variables