Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: responsive: device units (#17551)

Browse Source
This commit is contained in:
Min Idzelis 2025-04-11 18:09:10 -04:00 committed by GitHub
parent 5bcb58c3e7
commit 3bec8dc337
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/album-page/album-viewer.svelte
View File

@ -99,7 +99,7 @@
</header>
<main
class="relative h-screen overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
class="relative h-dvh overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
>
<AssetGrid enableRouting={true} {album} {assetStore} {assetInteraction}>
<section class="pt-8 md:pt-24">

2
web/src/lib/components/layouts/AuthPageLayout.svelte
View File

@ -9,7 +9,7 @@
let { title, children }: Props = $props();
</script>
<section class="min-w-screen flex min-h-dvh items-center justify-center relative">
<section class="min-w-dvw flex min-h-dvh items-center justify-center relative">
<div class="absolute -z-10 w-full h-full flex place-items-center place-content-center">
<img
src={immichLogo}

2
web/src/lib/components/layouts/ErrorLayout.svelte
View File

@ -21,7 +21,7 @@
};
</script>
<div class="h-screen w-screen">
<div class="h-dvh w-dvw">
<section class="bg-immich-bg dark:bg-immich-dark-bg">
<div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
<a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">

2
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View File

@ -66,7 +66,7 @@
aria-labelledby={ariaLabelledBy}
bind:this={menuElement}
class="{isVisible
? 'max-h-screen max-h-svh'
? 'max-h-dvh max-h-svh'
: 'max-h-0'} flex flex-col transition-all duration-[250ms] ease-in-out outline-none overflow-auto"
role="menu"
tabindex="-1"

2
web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
View File

@ -91,7 +91,7 @@
},
]}
>
<section class="fixed left-0 top-0 z-10 flex h-screen w-screen" {oncontextmenu} role="presentation">
<section class="fixed left-0 top-0 z-10 flex h-dvh w-dvw" {oncontextmenu} role="presentation">
<ContextMenu
{direction}
{x}

2
web/src/lib/components/shared-components/full-screen-modal.svelte
View File

@ -77,7 +77,7 @@
role="presentation"
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
class="fixed left-0 top-0 z-[9999] flex h-dvh w-screen place-content-center place-items-center bg-black/40"
class="fixed left-0 top-0 z-[9999] flex h-dvh w-dvw place-content-center place-items-center bg-black/40"
onkeydown={(event) => {
event.stopPropagation();
}}

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -58,7 +58,7 @@
<section
id="dashboard-navbar"
class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-screen text-sm"
class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm"
>
<SkipLink text={$t('skip_to_content')} />
<div

2
web/src/lib/components/shared-components/navigation-loading-bar.svelte
View File

@ -26,7 +26,7 @@
</script>
{#if showing}
<div class="absolute left-0 top-0 z-[999999999] h-[3px] w-screen bg-white">
<div class="absolute left-0 top-0 z-[999999999] h-[3px] w-dvw bg-white">
<span class="absolute h-[3px] bg-immich-primary" style:width={`${$progress}%`}></span>
</div>
{/if}

2
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -605,7 +605,7 @@
{/if}
<main
class="relative h-screen overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
class="relative h-dvh overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
>
<AssetGrid
enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}

2
web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -34,7 +34,7 @@
};
</script>
<main class="grid h-screen bg-immich-bg pt-18 dark:bg-immich-dark-bg">
<main class="grid h-dvh bg-immich-bg pt-18 dark:bg-immich-dark-bg">
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}

2
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -486,7 +486,7 @@
</header>
<main
class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
class="relative h-dvh overflow-hidden bg-immich-bg tall:ml-4 md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
use:scrollMemoryClearer={{
routeStartsWith: AppRoute.PEOPLE,
beforeClear: () => {

2
web/src/routes/(user)/share/[key]/+error.svelte
View File

@ -6,7 +6,7 @@
<title>Oops! Error - Immich</title>
</svelte:head>
<section class="flex flex-col px-4 h-screen w-screen place-content-center place-items-center">
<section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center">
<h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1>
{#if page.error?.message}
<h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2>

2
web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -70,7 +70,7 @@
</ControlAppBar>
</header>
<main
class="relative h-screen overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
class="relative h-dvh overflow-hidden bg-immich-bg px-6 max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
>
<div class="flex flex-col items-center justify-center mt-20">
<div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('password_required')}</div>

2
web/src/routes/+page.svelte
View File

@ -4,7 +4,7 @@
import { t } from 'svelte-i18n';
</script>
<section class="flex h-screen w-screen place-content-center place-items-center">
<section class="flex h-dvh w-dvw place-content-center place-items-center">
<div class="flex max-w-[350px] flex-col place-items-center gap-10 text-center">
<div class="flex place-content-center place-items-center">
<Logo variant="icon" class="text-center" size="landing" />

4
web/src/routes/auth/onboarding/+page.svelte
View File

@ -56,7 +56,7 @@
const SvelteComponent = $derived(onboardingSteps[index].component);
</script>
<section id="onboarding-page" class="min-w-screen flex min-h-screen p-4">
<section id="onboarding-page" class="min-w-dvw flex min-h-dvh p-4">
<div class="flex flex-col w-full">
<div class="w-full bg-gray-300 dark:bg-gray-600 rounded-md h-2">
<div
@ -64,7 +64,7 @@
style="width: {(index / (onboardingSteps.length - 1)) * 100}%"
></div>
</div>
<div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
<div class="w-full min-w-dvw py-8 flex h-full place-content-center place-items-center">
<SvelteComponent onDone={handleDoneClicked} onPrevious={handlePrevious} />
</div>
</div>