refactor: responsive: device units (#17551)
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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: () => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user