hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-17 02:45:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

pluginSlice fix fullscreen btn with sliding

Browse source
This commit is contained in:
VDawg 2023-11-14 15:45:17 +01:00
parent 8b291f8821
commit 07417aca1f
2 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/lib/components/Video.svelte
View file

@ -3,7 +3,6 @@
import PlayIcon from '~icons/mingcute/play-circle-line' import PlayIcon from '~icons/mingcute/play-circle-line'
import { inview } from 'svelte-inview' import { inview } from 'svelte-inview'
import IconFullscreen from '~icons/mingcute/fullscreen-fill' import IconFullscreen from '~icons/mingcute/fullscreen-fill'
import { onMount } from 'svelte'
/** @type {string} */ /** @type {string} */
export let src export let src
@ -55,8 +54,6 @@
on:pause={() => (isPaused = true)} on:pause={() => (isPaused = true)}
{autoplay} {autoplay}
on:play={() => (isPaused = false)} on:play={() => (isPaused = false)}
on:mouseenter
on:mouseleave
/> />
<button on:click={makeFullscreen} class="absolute bottom-2 left-2 z-10"> <button on:click={makeFullscreen} class="absolute bottom-2 left-2 z-10">

9
src/routes/PluginsSlice.svelte
View file

@ -117,6 +117,12 @@
'z-10 h-[20rem] min-w-0 transition-transform sm:h-[25rem] md:h-[30rem] lg:h-[37rem]', 'z-10 h-[20rem] min-w-0 transition-transform sm:h-[25rem] md:h-[30rem] lg:h-[37rem]',
isHoveringVideo && '-translate-x-56' isHoveringVideo && '-translate-x-56'
)} )}
>
<div
class="h-full w-full"
on:mouseenter={slideVideoIn}
on:mouseleave={slideVideoOut}
role="complementary"
> >
{#each items as { src, poster }, index} {#each items as { src, poster }, index}
<Video <Video
@ -129,10 +135,9 @@
on:pause={pauseVideos} on:pause={pauseVideos}
on:play={playVideos} on:play={playVideos}
videoClass="h-[inherit] aspect-video" videoClass="h-[inherit] aspect-video"
on:mouseenter={slideVideoIn}
on:mouseleave={slideVideoOut}
/> />
{/each} {/each}
</div>
<div <div
class="pt-5 text-sm font-medium text-slate-300 md:text-base [&>a:hover]:text-cyan-300 [&>a:hover]:underline [&>a]:font-bold" class="pt-5 text-sm font-medium text-slate-300 md:text-base [&>a:hover]:text-cyan-300 [&>a:hover]:underline [&>a]:font-bold"
> >