From b416849d9ccd7ca0b59401dcf1963f8cb8210e8b Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Wed, 7 Sep 2022 17:14:29 +0000
Subject: [PATCH] feat: re-apply ui improves

---
 apps/ui/src/routes/applications/_index.svelte | 11 +++--
 apps/ui/src/routes/databases/_index.svelte    | 42 +++++++++---------
 apps/ui/src/routes/destinations/_index.svelte | 41 +++++++++--------
 apps/ui/src/routes/services/_index.svelte     | 44 +++++++++----------
 apps/ui/src/routes/sources/_index.svelte      | 12 +++--
 5 files changed, 81 insertions(+), 69 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 e59f59384..f73281c12 100644
--- a/apps/ui/src/routes/databases/_index.svelte
+++ b/apps/ui/src/routes/databases/_index.svelte
@@ -42,28 +42,30 @@
 	});
 </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"
-				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
-			>
-		</button>
+	<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
+		<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
+		>
+	</button>
 	{/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 !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 fd297e1cb..5772102db 100644
--- a/apps/ui/src/routes/services/_index.svelte
+++ b/apps/ui/src/routes/services/_index.svelte
@@ -43,28 +43,28 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
-	{#if $appSession.isAdmin}
-		<button on:click={newService} class="btn btn-square btn-sm bg-services">
-			<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
-			>
-		</button>
-	{/if}
-</div>
-
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+<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"
+			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
+		>
+	</button>
+</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..f7dfceae7 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>
@@ -157,3 +160,4 @@
 		</div>
 	{/if}
 </div>
+