dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(ui): improve header of pages

Browse Source
This commit is contained in:
Kaname
2022-09-10 00:16:49 +00:00
parent 9f813b7385
commit 33bb8d434d
9 changed files with 45 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ui/src/routes/_NewResource.svelte
View File

@@ -16,7 +16,7 @@
} }
</script> </script>
<div class="dropdown dropdown-hover"> <div class="dropdown dropdown-left">
<slot> <slot>
<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs"> <label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
<svg <svg

4
apps/ui/src/routes/applications/_index.svelte
View File

@@ -44,9 +44,7 @@
} }
</script> </script>
<nav <nav class="header">
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> <h1 class="mr-4 text-2xl font-bold">{$t('index.applications')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button on:click={newApplication} class="btn btn-square btn-sm bg-applications"> <button on:click={newApplication} class="btn btn-square btn-sm bg-applications">

34
apps/ui/src/routes/databases/_index.svelte
View File

@@ -42,26 +42,24 @@
}); });
</script> </script>
<nav <nav class="header">
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> <h1 class="mr-4 text-2xl font-bold">{$t('index.databases')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases"> <button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
<svg <svg
class="h-6 w-6" class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg /></svg
> >
</button> </button>
{/if} {/if}
</nav> </nav>
<br /> <br />

34
apps/ui/src/routes/destinations/_index.svelte
View File

@@ -36,26 +36,24 @@
}); });
</script> </script>
<nav <nav class="header">
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> <h1 class="mr-4 text-2xl font-bold">{$t('index.destinations')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations"> <a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
<svg <svg
class="h-6 w-6" class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg /></svg
> >
</a> </a>
{/if} {/if}
</nav> </nav>
<br /> <br />

4
apps/ui/src/routes/iam/index.svelte
View File

@@ -106,9 +106,7 @@
} }
</script> </script>
<nav <nav class="header">
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 tracking-tight font-bold">Identity and Access Management</h1> <h1 class="mr-4 text-2xl tracking-tight font-bold">Identity and Access Management</h1>
<button on:click={newTeam} class="btn btn-square btn-sm bg-iam"> <button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
<svg <svg

6
apps/ui/src/routes/index.svelte
View File

@@ -275,7 +275,7 @@
</script> </script>
<nav <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" class="header" style="backdrop-filter: blur(20px);"
> >
<h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1> <h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1>
{#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)} {#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)}
@@ -319,8 +319,8 @@
on:input={() => doSearch()} on:input={() => doSearch()}
/> />
</div> </div>
<label for="search" class="label w-full"> <label for="search" class="label w-full mt-3">
<span class="label-text text-xs flex flex-wrap gap-2 items-center"> <span class="label-text text-xs flex flex-wrap gap-2 items-center">
<button <button
class:bg-coollabs={$search === '!notmine'} class:bg-coollabs={$search === '!notmine'}
class="badge badge-lg text-white text-xs rounded" class="badge badge-lg text-white text-xs rounded"

4
apps/ui/src/routes/services/_index.svelte
View File

@@ -43,9 +43,7 @@
}); });
</script> </script>
<nav <nav class="header">
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> <h1 class="mr-4 text-2xl font-bold">{$t('index.services')}</h1>
<button on:click={newService} class="btn btn-square btn-sm bg-services"> <button on:click={newService} class="btn btn-square btn-sm bg-services">
<svg <svg

5
apps/ui/src/routes/sources/_index.svelte
View File

@@ -36,9 +36,7 @@
}); });
</script> </script>
<nav <nav class="header">
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> <h1 class="mr-4 text-2xl font-bold">{$t('index.git_sources')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<a href="/sources/new" class="btn btn-square btn-sm bg-sources"> <a href="/sources/new" class="btn btn-square btn-sm bg-sources">
@@ -160,4 +158,3 @@
</div> </div>
{/if} {/if}
</div> </div>

5
apps/ui/src/tailwind.css
View File

@@ -199,4 +199,9 @@ a {
input { input {
@apply w-48 lg:w-96; @apply w-48 lg:w-96;
}
.header {
@apply flex flex-row px-4 justify-between items-center lg:fixed w-full z-10 lg:-ml-16 lg:pl-20 p-5;
background-color: rgba(31, 30, 30, 0.6);
} }