hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

apply transitions to sidebars on large viewports

Browse source
This commit is contained in:
hippoz 2022-08-28 16:02:51 +03:00
parent fc8d81753e
commit 537036e8bb
No known key found for this signature in database
GPG key ID: 7C52899193467641
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/PresenceSidebar.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
import { ArrowLeftIcon, AtSignIcon } from "svelte-feather-icons"; import { ArrowLeftIcon, AtSignIcon } from "svelte-feather-icons";
import { quadInOut } from "svelte/easing"; import { quadInOut } from "svelte/easing";
import { maybeFly } from "../animations"; import { maybeFly, maybeFlyIf } from "../animations";
import { presenceStore, showChannelView, showPresenceSidebar, smallViewport } from "../stores"; import { presenceStore, showChannelView, showPresenceSidebar, smallViewport } from "../stores";
let pendingExit = false; let pendingExit = false;
@ -11,7 +11,7 @@
}; };
</script> </script>
<div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}"> <div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">
<div class="top-bar"> <div class="top-bar">
<span class="input-label">User List</span> <span class="input-label">User List</span>
</div> </div>

4
frontend/src/components/Sidebar.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
import { HashIcon, PlusIcon, MoreVerticalIcon, SettingsIcon, CloudIcon } from "svelte-feather-icons"; import { HashIcon, PlusIcon, MoreVerticalIcon, SettingsIcon, CloudIcon } from "svelte-feather-icons";
import { quadInOut } from "svelte/easing"; import { quadInOut } from "svelte/easing";
import { maybeFly } from "../animations"; import { maybeFly, maybeFlyIf } from "../animations";
import { channels, gatewayStatus, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores"; import { channels, gatewayStatus, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
import UserTopBar from "./UserTopBar.svelte"; import UserTopBar from "./UserTopBar.svelte";
@ -14,7 +14,7 @@
} }
</script> </script>
<div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: -10 }}"> <div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: -10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">
<UserTopBar /> <UserTopBar />
<div class="sidebar"> <div class="sidebar">
{#each $channels as channel (channel.id)} {#each $channels as channel (channel.id)}