refactor: responsive: device units (#17551)

This commit is contained in:
Min Idzelis
2025-04-11 18:09:10 -04:00
committed by GitHub
parent 5bcb58c3e7
commit 3bec8dc337
15 changed files with 16 additions and 16 deletions

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}

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}

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: () => {

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>

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>

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" />

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>