Make Login UI responsive (#1107)

Signed-off-by: fastlorenzo <[email protected]>
intuitem · Nov 30, 2024 · ba95c9c · ba95c9c
1 parent e3e4bca
commit ba95c9c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 16 deletions.
diff --git a/enterprise/frontend/src/routes/(authentication)/login/+page.svelte b/enterprise/frontend/src/routes/(authentication)/login/+page.svelte
@@ -8,18 +8,29 @@
 	export let form: ActionData;
 </script>
 
-<div class="relative h-screen w-screen bg-slate-200">
-	<div class="absolute top-5 left-5">
-		<div class="flex flex-row max-w-48 space-x-4 pb-3">
+<div class="lg:relative h-screen w-screen bg-slate-200">
+	<div
+		class="invisible lg:visible absolute top-5 left-1/2 transform -translate-x-1/2 top-5 left-5 transform-none"
+	>
+		<div class="flex justify-center justify-start flex-row max-w-48 space-x-4 pb-3">
 			{#if !data.clientSettings.settings.name}
 				<Logo />
 			{/if}
 		</div>
 	</div>
-	<div class="absolute top-1/2 left-1/2 w-full transform -translate-x-1/2 -translate-y-1/2">
-		<div class="flex flex-row w-full pr-8">
+	<div class="lg:invisible pt-5 flex justify-center">
+		<div class="flex justify-center flex-row max-w-48 space-x-4 pb-3">
+			{#if !data.clientSettings.settings.name}
+				<Logo />
+			{/if}
+		</div>
+	</div>
+	<div
+		class="lg:absolute lg:top-1/2 lg:left-1/2 w-full transform lg:-translate-x-1/2 lg:-translate-y-1/2"
+	>
+		<div class="flex flex-col lg:flex-row w-full lg:pr-8 space-y-4 lg:space-y-0 lg:space-x-4">
 			<Greetings />
-			<div class="flex justify-center pr-5 items-center space-y-4 w-2/5">
+			<div class="flex justify-center lg:pr-5 items-center w-full lg:w-2/5">
 				<FormCard {data} {form} />
 			</div>
 		</div>

diff --git a/enterprise/frontend/src/routes/(authentication)/login/Greetings.svelte b/enterprise/frontend/src/routes/(authentication)/login/Greetings.svelte
@@ -7,7 +7,10 @@
 	const clientSettings = $page.data.clientSettings;
 </script>
 
-<div id="hellothere" class="flex flex-col justify-center items-center w-3/5 text-gray-900">
+<div
+	id="hellothere"
+	class="flex flex-col justify-center items-center lg:w-3/5 text-gray-900 px-4 lg:px-0"
+>
 	{#if !clientSettings?.settings.name}
 		<Typewriter mode="loopOnce" cursor={false} interval={50}>
 			<div class="text-2xl unstyled text-center pb-4">

diff --git a/frontend/src/routes/(authentication)/login/+page.svelte b/frontend/src/routes/(authentication)/login/+page.svelte
@@ -8,16 +8,25 @@
 	export let form: ActionData;
 </script>
 
-<div class="relative h-screen w-screen bg-slate-200">
-	<div class="absolute top-5 left-5">
-		<div class="flex flex-row max-w-48 space-x-4 pb-3">
+<div class="lg:relative h-screen w-screen bg-slate-200">
+	<div
+		class="invisible lg:visible absolute top-5 left-1/2 transform -translate-x-1/2 top-5 left-5 transform-none"
+	>
+		<div class="flex justify-center justify-start flex-row max-w-48 space-x-4 pb-3">
 			<Logo />
 		</div>
 	</div>
-	<div class="absolute top-1/2 left-1/2 w-full transform -translate-x-1/2 -translate-y-1/2">
-		<div class="flex flex-row w-full pr-8">
+	<div class="lg:invisible pt-5 flex justify-center">
+		<div class="flex justify-center flex-row max-w-48 space-x-4 pb-3">
+			<Logo />
+		</div>
+	</div>
+	<div
+		class="lg:absolute lg:top-1/2 lg:left-1/2 w-full transform lg:-translate-x-1/2 lg:-translate-y-1/2"
+	>
+		<div class="flex flex-col lg:flex-row w-full lg:pr-8 space-y-4 lg:space-y-0 lg:space-x-4">
 			<Greetings />
-			<div class="flex justify-center pr-5 items-center space-y-4 w-2/5">
+			<div class="flex justify-center lg:pr-5 items-center w-full lg:w-2/5">
 				<FormCard {data} {form} />
 			</div>
 		</div>

diff --git a/frontend/src/routes/(authentication)/login/FormCard.svelte b/frontend/src/routes/(authentication)/login/FormCard.svelte
@@ -42,7 +42,7 @@
 	$: form && form.mfaFlow ? modalMFAAuthenticate() : null;
 </script>
 
-<div class="flex flex-col w-3/4 p-10 rounded-lg shadow-lg bg-white bg-opacity-[.90]">
+<div class="flex flex-col w-7/8 lg:w-3/4 p-10 rounded-lg shadow-lg bg-white bg-opacity-[.90]">
 	<div data-testid="login" class="flex flex-col w-full items-center space-y-4">
 		<div class="bg-primary-300 px-6 py-5 rounded-full text-3xl">
 			<i class="fa-solid fa-right-to-bracket" />

diff --git a/frontend/src/routes/(authentication)/login/Greetings.svelte b/frontend/src/routes/(authentication)/login/Greetings.svelte
@@ -3,7 +3,10 @@
 	import Typewriter from 'svelte-typewriter';
 </script>
 
-<div id="hellothere" class="flex flex-col justify-center items-center w-3/5 text-gray-900">
+<div
+	id="hellothere"
+	class="flex flex-col justify-center items-center lg:w-3/5 text-gray-900 px-4 lg:px-0"
+>
 	<Typewriter mode="loopOnce" cursor={false} interval={50}>
 		<div class="text-2xl unstyled text-center pb-4">
 			<span class="text-2xl text-center">{m.helloThere()} </span>

diff --git a/frontend/src/routes/(authentication)/password-reset/+page.svelte b/frontend/src/routes/(authentication)/password-reset/+page.svelte
@@ -18,7 +18,7 @@
 		</div>
 	</div>
 	<div class="flex items-center justify-center p-10 space-x-4 w-full">
-		<div class="w-1/4 p-6 shadow-lg rounded-lg bg-white">
+		<div class="lg:w-1/4 p-6 shadow-lg rounded-lg bg-white">
 			<div id="password_reset" class="flex flex-col items-center space-y-4">
 				<div class="bg-primary-300 px-6 py-5 rounded-full text-3xl">
 					<i class="fa-solid fa-lock" />