Merge pull request #4068 from TimKochDev/design

Design: More Space and Visual Hierarchy
This commit is contained in:
🏔️ Peak
2024-10-31 16:33:24 +01:00
committed by GitHub
4 changed files with 156 additions and 144 deletions

View File

@@ -69,7 +69,7 @@ button[isHighlighted]:not(:disabled) {
}
h1 {
@apply text-2xl font-bold dark:text-white;
@apply text-3xl font-bold dark:text-white;
}
h2 {
@@ -124,6 +124,10 @@ tr td:first-child {
@apply pl-4 pr-3 font-bold sm:pl-6;
}
section {
@apply mb-12;
}
.alert-success {
@apply flex items-center gap-2 text-success;
}
@@ -217,7 +221,7 @@ tr td:first-child {
}
.box {
@apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
@apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 shadow bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
}
.box-boarding {

View File

@@ -1,4 +1,4 @@
<nav class="flex flex-col flex-1 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
<nav class="flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
switchWidth() {
if (this.full === 'full') {
localStorage.setItem('pageWidth', 'center');
@@ -46,7 +46,7 @@
}
}
}">
<div class="flex pt-6 pb-4 pl-3">
<div class="flex pt-6 pb-4 pl-2">
<div class="flex flex-col w-full">
<div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
<x-version />

View File

@@ -18,7 +18,7 @@
<div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-black/80"></div>
<div class="fixed inset-0 flex">
<div class="relative flex flex-1 w-full mr-16 max-w-48 ">
<div class="relative flex flex-1 w-full mr-16 max-w-56 ">
<div class="absolute top-0 flex justify-center w-16 pt-5 left-full">
<button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open">
<span class="sr-only">Close sidebar</span>
@@ -29,14 +29,14 @@
</button>
</div>
<div class="flex flex-col pb-2 overflow-y-auto min-w-48 dark:bg-coolgray-100 gap-y-5 scrollbar">
<div class="flex flex-col pb-2 overflow-y-auto min-w-56 dark:bg-coolgray-100 gap-y-5 scrollbar">
<x-navbar />
</div>
</div>
</div>
</div>
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-48 lg:flex-col">
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
<div class="flex flex-col overflow-y-auto grow gap-y-5 scrollbar">
<x-navbar />
</div>
@@ -52,7 +52,7 @@
</button>
</div>
<main class="lg:pl-48">
<main class="lg:pl-56">
<div class="p-4 sm:px-6 lg:px-8 lg:py-6">
{{ $slot }}
</div>

View File

@@ -18,7 +18,9 @@
subscription is activated.<br> Please be patient.
</div>
@endif
<h3 class="pb-4">Projects</h3>
<section>
<h3 class="pb-2">Projects</h3>
@if ($projects->count() > 0)
<div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
@foreach ($projects as $project)
@@ -56,8 +58,10 @@
</div>
</div>
@endif
</section>
<h3 class="py-4">Servers</h3>
<section>
<h3 class="pb-2">Servers</h3>
@if ($servers->count() > 0)
<div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
@foreach ($servers as $server)
@@ -116,9 +120,12 @@
</div>
@endif
@endif
</section>
@if ($servers->count() > 0 && $projects->count() > 0)
<section>
<div class="flex items-center gap-2">
<h3 class="py-4">Deployments</h3>
<h3 class="pb-2">Deployments</h3>
@if (count($deployments_per_server) > 0)
<x-loading />
@endif
@@ -138,7 +145,7 @@
</div>
<div wire:poll.3000ms="get_deployments" class="grid grid-cols-1">
@forelse ($deployments_per_server as $server_name => $deployments)
<h4 class="py-4">{{ $server_name }}</h4>
<h4 class="pb-2">{{ $server_name }}</h4>
<div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
@foreach ($deployments as $deployment)
<a href="{{ data_get($deployment, 'deployment_url') }}" @class([
@@ -167,6 +174,7 @@
<div>No deployments running.</div>
@endforelse
</div>
</section>
@endif