chore(web) Update SvelteKit (#1066)

* Update sveltekit

* Update sveltekit

* Update correct preloading attribute
This commit is contained in:
Alex 2022-12-06 18:08:08 -06:00 committed by GitHub
parent b5a5363a6a
commit 1adf8ff6b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 3336 additions and 3077 deletions

View file

@ -154,6 +154,7 @@
on:mouseenter={handleMouseOverThumbnail}
on:mouseleave={handleMouseLeaveThumbnail}
on:click={thumbnailClickedHandler}
on:keydown={thumbnailClickedHandler}
>
{#if mouseOver || selected || disabled}
<div

View file

@ -52,7 +52,7 @@
>
<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
<a
data-sveltekit-prefetch
data-sveltekit-preload-data="hover"
class="flex gap-2 place-items-center hover:cursor-pointer"
href="/photos"
>
@ -82,7 +82,7 @@
{/if}
{#if user.isAdmin}
<a data-sveltekit-prefetch href={`admin`}>
<a data-sveltekit-preload-data="hover" href={`admin`}>
<button
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
$page.url.pathname == '/admin' &&
@ -97,6 +97,7 @@
on:focus={() => (shouldShowAccountInfo = true)}
on:mouseleave={() => (shouldShowAccountInfo = false)}
on:click={showAccountInfoPanel}
on:keydown={showAccountInfoPanel}
>
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"

View file

@ -76,6 +76,7 @@
style:border={borderStyle()}
class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4 hover:cursor-pointer"
on:click={handleClick}
on:keydown={handleClick}
>
<div class="flex justify-between">
<div class="flex gap-2 place-items-center">

View file

@ -44,7 +44,7 @@
}
</script>
<script>
<script lang="ts">
/**
* DOM Element or CSS Selector
* @type { HTMLElement|string}

View file

@ -28,7 +28,6 @@
export let scrollbarHeight = 0;
$: timelineHeight = $assetGridState.timelineHeight;
$: viewportWidth = $assetGridState.viewportWidth;
$: timelineScrolltop = (scrollbarPosition / scrollbarHeight) * timelineHeight;
let segmentScrollbarLayout: SegmentScrollbarLayout[] = [];

View file

@ -23,6 +23,7 @@
<div
on:click={onButtonClicked}
on:keydown={onButtonClicked}
class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
${
isSelected &&

View file

@ -20,11 +20,11 @@
// let domCount = 0;
onMount(async () => {
if ($page.routeId == 'albums') {
if ($page.route.id == 'albums') {
selectedAction = AppSideBarSelection.ALBUMS;
} else if ($page.routeId == 'photos') {
} else if ($page.route.id == 'photos') {
selectedAction = AppSideBarSelection.PHOTOS;
} else if ($page.routeId == 'sharing') {
} else if ($page.route.id == 'sharing') {
selectedAction = AppSideBarSelection.SHARING;
}
@ -54,9 +54,9 @@
<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6 bg-immich-bg dark:bg-immich-dark-bg">
<a
data-sveltekit-prefetch
data-sveltekit-preload-data="hover"
data-sveltekit-noscroll
href={$page.routeId !== 'photos' ? `/photos` : null}
href={$page.route.id !== 'photos' ? `/photos` : null}
class="relative"
>
<SideBarButton
@ -92,8 +92,8 @@
</a>
<a
data-sveltekit-prefetch
href={$page.routeId !== 'sharing' ? `/sharing` : null}
data-sveltekit-preload-data="hover"
href={$page.route.id !== 'sharing' ? `/sharing` : null}
class="relative"
>
<SideBarButton
@ -129,7 +129,11 @@
<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
<p>LIBRARY</p>
</div>
<a data-sveltekit-prefetch href={$page.routeId !== 'albums' ? `/albums` : null} class="relative">
<a
data-sveltekit-preload-data="hover"
href={$page.route.id !== 'albums' ? `/albums` : null}
class="relative"
>
<SideBarButton
title="Albums"
logo={ImageAlbum}

View file

@ -1,8 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
let toggleButton: HTMLElement;
onMount(() => {
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
@ -48,7 +46,6 @@
</script>
<button
bind:this={toggleButton}
on:click={toggleTheme}
id="theme-toggle"
type="button"