youwen5/jankboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add app transitions

Browse source
This commit is contained in:
Youwen Wu 2024-02-23 18:19:32 -08:00
parent e4b64f479b
commit ed289c7b9a
2 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/src/lib/Apps/Camera/Camera.svelte
View file

@ -1,8 +1,11 @@
<script lang="ts"> <script lang="ts">
import CameraContainer from './CameraContainer.svelte' import CameraContainer from './CameraContainer.svelte'
import { fade } from 'svelte/transition'
</script> </script>
<div <div
in:fade={{ duration: 150, delay: 150 }}
out:fade={{ duration: 150 }}
class="flex gap-4 w-full py-40 px-10 backdrop-blur-lg justify-center h-full rounded-3xl shadow-md bg-slate-300 bg-opacity-30" class="flex gap-4 w-full py-40 px-10 backdrop-blur-lg justify-center h-full rounded-3xl shadow-md bg-slate-300 bg-opacity-30"
> >
<div class="my-auto"> <div class="my-auto">
@ -12,6 +15,3 @@
<CameraContainer cameraUrl="camera_url_here" /> <CameraContainer cameraUrl="camera_url_here" />
</div> </div>
</div> </div>
<style lang="postcss">
</style>

3
client/src/lib/Apps/MusicBrowser/MusicBrowser.svelte
View file

@ -6,10 +6,13 @@
<script lang="ts"> <script lang="ts">
import Song from './Song.svelte' import Song from './Song.svelte'
import { songList } from '../../Dashboard/MediaPlayer/songList' import { songList } from '../../Dashboard/MediaPlayer/songList'
import { fade } from 'svelte/transition'
</script> </script>
<div <div
class="flex gap-4 w-full py-10 px-10 bg-blue-200 bg-opacity-25 backdrop-blur-xl h-full media-background rounded-3xl flex-wrap" class="flex gap-4 w-full py-10 px-10 bg-blue-200 bg-opacity-25 backdrop-blur-xl h-full media-background rounded-3xl flex-wrap"
in:fade={{ duration: 150, delay: 150 }}
out:fade={{ duration: 150 }}
> >
<h2 class="text-8xl font-bold basis-full text-slate-200">Music</h2> <h2 class="text-8xl font-bold basis-full text-slate-200">Music</h2>
<div class="basis-full h-2" /> <div class="basis-full h-2" />