Ver Fonte

fix(web): noscript message (#2278)

Michel Heusschen há 2 anos atrás
pai
commit
8a421831ab
2 ficheiros alterados com 9 adições e 26 exclusões
  1. 0 26
      web/src/app.html
  2. 9 0
      web/src/routes/+layout.svelte

+ 0 - 26
web/src/app.html

@@ -16,32 +16,6 @@
 	</head>
 
 	<body class="bg-immich-bg dark:bg-immich-dark-bg">
-		<noscript>
-			<section
-				class="h-screen w-screen absolute z-[1000] flex place-items-center place-content-center p-4 bg-immich-bg dark:bg-immich-dark-bg"
-			>
-				<div
-					class="flex flex-col gap-4 border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-3xl"
-				>
-					<div class="flex flex-col place-items-center place-content-center gap-4 py-4">
-						<img
-							src="/src/lib/assets/immich-logo.svg"
-							alt="Immich Logo"
-							draggable="false"
-							class="h-24 w-24"
-						/>
-						<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
-							Welcome to Immich
-						</h1>
-					</div>
-					<div>
-						<p class="dark:text-immich-dark-fg text-center">
-							To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
-						</p>
-					</div>
-				</div>
-			</section>
-		</noscript>
 		<div>%sveltekit.body%</div>
 	</body>
 </html>

+ 9 - 0
web/src/routes/+layout.svelte

@@ -12,6 +12,7 @@
 	import type { LayoutData } from './$types';
 	import { fileUploadHandler } from '$lib/utils/file-uploader';
 	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
+	import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
 
 	let showNavigationLoadingBar = false;
 	export let data: LayoutData;
@@ -59,6 +60,14 @@
 	{/if}
 </svelte:head>
 
+<noscript
+	class="h-screen w-screen absolute z-[1000] flex place-items-center place-content-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
+>
+	<FullscreenContainer title="Welcome to Immich">
+		To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
+	</FullscreenContainer>
+</noscript>
+
 {#if showNavigationLoadingBar}
 	<NavigationLoadingBar />
 {/if}