From c17253589a97eed43247d5925c1859a76660ff4d Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Wed, 7 Sep 2022 01:45:05 +0000
Subject: [PATCH] fix(routes): more ui tweaks

---
 apps/ui/src/routes/applications/index.svelte | 11 ++++--
 apps/ui/src/routes/databases/index.svelte    | 14 ++++---
 apps/ui/src/routes/destinations/index.svelte | 41 +++++++++++---------
 apps/ui/src/routes/services/index.svelte     | 12 +++---
 apps/ui/src/routes/sources/index.svelte      | 11 ++++--
 5 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/apps/ui/src/routes/applications/index.svelte b/apps/ui/src/routes/applications/index.svelte
index 60644e16d..51d2fd74e 100644
--- a/apps/ui/src/routes/applications/index.svelte
+++ b/apps/ui/src/routes/applications/index.svelte
@@ -44,8 +44,10 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
+<nav
+	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
+>
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.applications')}</h1>
 	{#if $appSession.isAdmin}
 		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
 			<svg
@@ -63,8 +65,9 @@
 			>
 		</button>
 	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex flex-col justify-center mt-10 pb-12 lg:pt-16 sm:pb-16">
 	{#if !applications || ownApplications.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
diff --git a/apps/ui/src/routes/databases/index.svelte b/apps/ui/src/routes/databases/index.svelte
index 04dbeb768..f73281c12 100644
--- a/apps/ui/src/routes/databases/index.svelte
+++ b/apps/ui/src/routes/databases/index.svelte
@@ -42,8 +42,11 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
+<nav
+	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
+>
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.databases')}</h1>
+	{#if $appSession.isAdmin}
 	<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
 		<svg
 			class="h-6 w-6"
@@ -59,9 +62,10 @@
 			/></svg
 		>
 	</button>
-</div>
-
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{/if}
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !databases || ownDatabases.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
diff --git a/apps/ui/src/routes/destinations/index.svelte b/apps/ui/src/routes/destinations/index.svelte
index 27656cdb7..25b738c55 100644
--- a/apps/ui/src/routes/destinations/index.svelte
+++ b/apps/ui/src/routes/destinations/index.svelte
@@ -36,27 +36,30 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
+<nav
+	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
+>
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.destinations')}</h1>
 	{#if $appSession.isAdmin}
-		<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
-			<svg
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</a>
+	<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
+		<svg
+			class="h-6 w-6"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+			/></svg
+		>
+	</a>
 	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !destinations || ownDestinations.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div>
diff --git a/apps/ui/src/routes/services/index.svelte b/apps/ui/src/routes/services/index.svelte
index fe3bed644..5772102db 100644
--- a/apps/ui/src/routes/services/index.svelte
+++ b/apps/ui/src/routes/services/index.svelte
@@ -43,8 +43,10 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
+<nav
+	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
+>
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.services')}</h1>
 	<button on:click={newService} class="btn btn-square btn-sm bg-services">
 		<svg
 			class="h-6 w-6"
@@ -60,9 +62,9 @@
 			/></svg
 		>
 	</button>
-</div>
-
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !services || ownServices.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('service.no_service')}</div>
diff --git a/apps/ui/src/routes/sources/index.svelte b/apps/ui/src/routes/sources/index.svelte
index a5a5f98ff..1bea7598a 100644
--- a/apps/ui/src/routes/sources/index.svelte
+++ b/apps/ui/src/routes/sources/index.svelte
@@ -36,8 +36,10 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div>
+<nav
+	class="flex flex-row px-4 justify-between items-center bg-neutral-focus lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5"
+>
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.git_sources')}</h1>
 	{#if $appSession.isAdmin}
 		<a href="/sources/new" class="btn btn-square btn-sm bg-sources">
 			<svg
@@ -55,8 +57,9 @@
 			>
 		</a>
 	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !sources || ownSources.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('source.no_git_sources_found')}</div>