ui: updates

This commit is contained in:
Andras Bacsai 2023-10-20 09:29:09 +02:00
parent 11bd46b200
commit f470ebbbe0
9 changed files with 64 additions and 58 deletions

View File

@ -53,12 +53,14 @@ .icon:hover {
@apply text-white; @apply text-white;
} }
.box { .box {
@apply flex items-center p-2 transition-colors cursor-pointer min-h-16 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white hover:no-underline min-w-[24rem]; @apply flex p-2 transition-colors cursor-pointer min-h-16 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white hover:no-underline min-w-[24rem];
} }
.box-without-bg { .box-without-bg {
@apply flex items-center p-2 transition-colors min-h-16 hover:text-white hover:no-underline min-w-[24rem]; @apply flex p-2 transition-colors min-h-16 hover:text-white hover:no-underline min-w-[24rem];
}
.description {
@apply pt-2 text-xs font-bold text-neutral-500 group-hover:text-white;
} }
.lds-heart { .lds-heart {
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
} }

View File

@ -15,7 +15,8 @@
</div> </div>
@endif @endif
@if ($projects->count() === 0 && $servers->count() === 0) @if ($projects->count() === 0 && $servers->count() === 0)
No resources found. Add your first server / private key <a class="text-white underline" href="{{route('server.create')}}">here</a>. No resources found. Add your first server / private key <a class="text-white underline"
href="{{ route('server.create') }}">here</a>.
@endif @endif
@if ($projects->count() > 0) @if ($projects->count() > 0)
<h3 class="pb-4">Projects</h3> <h3 class="pb-4">Projects</h3>
@ -32,32 +33,34 @@
<a class="flex flex-col flex-1 mx-6 hover:no-underline" <a class="flex flex-col flex-1 mx-6 hover:no-underline"
href="{{ route('project.resources', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}"> href="{{ route('project.resources', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
<div class="font-bold text-white">{{ $project->name }}</div> <div class="font-bold text-white">{{ $project->name }}</div>
<div class="text-xs group-hover:text-white hover:no-underline"> <div class="description">
{{ $project->description }}</div> {{ $project->description }}</div>
</a> </a>
@else @else
<a class="flex flex-col flex-1 mx-6 hover:no-underline" <a class="flex flex-col flex-1 mx-6 hover:no-underline"
href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}"> href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
<div class="font-bold text-white">{{ $project->name }}</div> <div class="font-bold text-white">{{ $project->name }}</div>
<div class="text-xs group-hover:text-white hover:no-underline"> <div class="description">
{{ $project->description }}</div> {{ $project->description }}</div>
</a> </a>
@endif @endif
<a class="mx-4 rounded group-hover:text-white hover:no-underline" <div class="flex items-center">
href="{{ route('project.resources.new', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}"> <a class="mx-4 rounded group-hover:text-white hover:no-underline"
<span class="font-bold hover:text-warning">+ New Resource</span> href="{{ route('project.resources.new', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
</a> <span class="font-bold hover:text-warning">+ New Resource</span>
<a class="mx-4 rounded group-hover:text-white" </a>
href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}"> <a class="mx-4 rounded group-hover:text-white"
<svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24" href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
stroke-linejoin="round"> stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> stroke-linejoin="round">
<path <path stroke="none" d="M0 0h24v24H0z" fill="none" />
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /> <path
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /> d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
</svg> <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
</a> </svg>
</a>
</div>
</div> </div>
@endforeach @endforeach
</div> </div>
@ -79,7 +82,7 @@
<div class="font-bold text-white"> <div class="font-bold text-white">
{{ $server->name }} {{ $server->name }}
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
{{ $server->description }}</div> {{ $server->description }}</div>
<div class="flex gap-1 text-xs text-error"> <div class="flex gap-1 text-xs text-error">
@if (!$server->settings->is_reachable) @if (!$server->settings->is_reachable)
@ -97,7 +100,7 @@
</a> </a>
@endforeach @endforeach
</div> </div>
{{-- <h3 class="py-4">Tokens</h3> {{-- <h3 class="py-4">Tokens</h3>
{{auth()->user()->tokens}} {{auth()->user()->tokens}}
<x-forms.button wire:click='createToken'>Create Token</x-forms.button> --}} <x-forms.button wire:click='createToken'>Create Token</x-forms.button> --}}
<script> <script>

View File

@ -24,7 +24,7 @@
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
Public Repository Public Repository
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
You can deploy any kind of public repositories from the supported git providers. You can deploy any kind of public repositories from the supported git providers.
</div> </div>
</div> </div>
@ -34,7 +34,7 @@
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
Private Repository (with GitHub App) Private Repository (with GitHub App)
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
You can deploy public & private repositories through your GitHub Apps. You can deploy public & private repositories through your GitHub Apps.
</div> </div>
</div> </div>
@ -44,7 +44,7 @@
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
Private Repository (with deploy key) Private Repository (with deploy key)
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
You can deploy public & private repositories with a simple deploy key (SSH key). You can deploy public & private repositories with a simple deploy key (SSH key).
</div> </div>
</div> </div>
@ -56,7 +56,7 @@
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
Based on a Dockerfile Based on a Dockerfile
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
You can deploy a simple Dockerfile, without Git. You can deploy a simple Dockerfile, without Git.
</div> </div>
</div> </div>
@ -66,7 +66,7 @@
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
Based on a Docker Compose Based on a Docker Compose
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
You can deploy complex application easily with Docker Compose. You can deploy complex application easily with Docker Compose.
</div> </div>
</div> </div>
@ -76,7 +76,7 @@
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
Based on an existing Docker Image Based on an existing Docker Image
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
You can deploy an existing Docker Image form any Registry. You can deploy an existing Docker Image form any Registry.
</div> </div>
</div> </div>
@ -89,7 +89,7 @@
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
New PostgreSQL New PostgreSQL
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
The most loved relational database in the world. The most loved relational database in the world.
</div> </div>
</div> </div>
@ -99,16 +99,17 @@
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
New Redis New Redis
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
The open source, in-memory data store for cache, streaming engine, and message broker. The open source, in-memory data store for cache, streaming engine, and message broker.
</div> </div>
</div> </div>
</div> <div class="box group" wire:click="setType('mongodb')"> </div>
<div class="box group" wire:click="setType('mongodb')">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
New MongoDB New MongoDB
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
MongoDB is a source-available cross-platform document-oriented database program. MongoDB is a source-available cross-platform document-oriented database program.
</div> </div>
</div> </div>
@ -134,10 +135,9 @@
@else @else
@foreach ($services as $serviceName => $service) @foreach ($services as $serviceName => $service)
@if (data_get($service, 'disabled')) @if (data_get($service, 'disabled'))
<button class="text-left bg-black cursor-not-allowed bg-coolgray-200/20 box-without-bg" <button class="text-left cursor-not-allowed bg-coolgray-200/20 box-without-bg" disabled>
disabled>
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold text-coolgray-500"> <div class="font-bold">
{{ Str::headline($serviceName) }} {{ Str::headline($serviceName) }}
</div> </div>
You need to upgrade to {{ data_get($service, 'minVersion') }} to use this service. You need to upgrade to {{ data_get($service, 'minVersion') }} to use this service.
@ -146,12 +146,12 @@
@else @else
<button class="text-left box group" wire:loading.attr="disabled" <button class="text-left box group" wire:loading.attr="disabled"
wire:click="setType('one-click-service-{{ $serviceName }}')"> wire:click="setType('one-click-service-{{ $serviceName }}')">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-2">
<div class="font-bold text-white group-hover:text-white"> <div class="font-bold text-white group-hover:text-white">
{{ Str::headline($serviceName) }} {{ Str::headline($serviceName) }}
</div> </div>
@if (data_get($service, 'slogan')) @if (data_get($service, 'slogan'))
<div class="text-xs"> <div class="description">
{{ data_get($service, 'slogan') }} {{ data_get($service, 'slogan') }}
</div> </div>
@endif @endif

View File

@ -18,7 +18,7 @@
<div class="font-bold text-white"> <div class="font-bold text-white">
{{ $server->name }} {{ $server->name }}
</div> </div>
<div class="text-xs group-hover:text-white"> <div class="description">
{{ $server->description }}</div> {{ $server->description }}</div>
<div class="flex gap-1 text-xs text-error"> <div class="flex gap-1 text-xs text-error">
@if (!$server->settings->is_reachable) @if (!$server->settings->is_reachable)

View File

@ -42,8 +42,7 @@ class="items-center justify-center box">+ Add New Resource</a>
href="{{ route('project.application.configuration', [$project->uuid, $environment->name, $application->uuid]) }}"> href="{{ route('project.application.configuration', [$project->uuid, $environment->name, $application->uuid]) }}">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold text-white">{{ $application->name }}</div> <div class="font-bold text-white">{{ $application->name }}</div>
<div class="text-xs text-gray-400 group-hover:text-white">{{ $application->description }}</div> <div class="description">{{ $application->description }}</div>
</div> </div>
@if (Str::of(data_get($application, 'status'))->startsWith('running')) @if (Str::of(data_get($application, 'status'))->startsWith('running'))
<div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div> <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
@ -59,7 +58,7 @@ class="items-center justify-center box">+ Add New Resource</a>
href="{{ route('project.database.configuration', [$project->uuid, $environment->name, $database->uuid]) }}"> href="{{ route('project.database.configuration', [$project->uuid, $environment->name, $database->uuid]) }}">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold text-white">{{ $database->name }}</div> <div class="font-bold text-white">{{ $database->name }}</div>
<div class="text-xs text-gray-400 group-hover:text-white">{{ $database->description }}</div> <div class="description">{{ $database->description }}</div>
</div> </div>
@if (Str::of(data_get($database, 'status'))->startsWith('running')) @if (Str::of(data_get($database, 'status'))->startsWith('running'))
<div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div> <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
@ -75,7 +74,7 @@ class="items-center justify-center box">+ Add New Resource</a>
href="{{ route('project.service', [$project->uuid, $environment->name, $service->uuid]) }}"> href="{{ route('project.service', [$project->uuid, $environment->name, $service->uuid]) }}">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold text-white">{{ $service->name }}</div> <div class="font-bold text-white">{{ $service->name }}</div>
<div class="text-xs text-gray-400 group-hover:text-white">{{ $service->description }}</div> <div class="description">{{ $service->description }}</div>
</div> </div>
@if (Str::of(serviceStatus($service))->startsWith('running')) @if (Str::of(serviceStatus($service))->startsWith('running'))
<div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div> <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>

View File

@ -10,7 +10,7 @@
<div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}</div> <div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}</div>
<div class="grid gap-2 lg:grid-cols-2"> <div class="grid gap-2 lg:grid-cols-2">
@forelse ($project->environments as $environment) @forelse ($project->environments as $environment)
<a class="justify-center box" href="{{ route('project.resources', [$project->uuid, $environment->name]) }}"> <a class="items-center justify-center box description" href="{{ route('project.resources', [$project->uuid, $environment->name]) }}">
{{ $environment->name }} {{ $environment->name }}
</a> </a>
@empty @empty

View File

@ -20,20 +20,22 @@
<a class="flex flex-col flex-1 mx-6 hover:no-underline" <a class="flex flex-col flex-1 mx-6 hover:no-underline"
href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}"> href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
<div class="font-bold text-white">{{ $project->name }}</div> <div class="font-bold text-white">{{ $project->name }}</div>
<div class="text-xs group-hover:text-white hover:no-underline"> <div class="description ">
{{ $project->description }}</div> {{ $project->description }}</div>
</a> </a>
<a class="mx-4 rounded group-hover:text-white" <div class="flex items-center">
href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}"> <a class="mx-4 rounded group-hover:text-white"
<svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24" href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" <svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
stroke-linejoin="round"> stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> stroke-linejoin="round">
<path <path stroke="none" d="M0 0h24v24H0z" fill="none" />
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /> <path
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /> d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
</svg> <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
</a> </svg>
</a>
</div>
</div> </div>
@empty @empty
<div> <div>

View File

@ -1,5 +1,5 @@
# documentation: https://docs.baby-buddy.net # documentation: https://docs.baby-buddy.net
# slogan: Baby Buddy is an open-source web application that helps parents track their baby's daily activities, growth, and health with ease. It's a handy tool for new parents to keep a close eye on their little one's development. # slogan: Baby Buddy is an open-source web application that helps parents track their baby's daily activities, growth, and health with ease.
services: services:
babybuddy: babybuddy:

View File

@ -12,7 +12,7 @@
}, },
"babybuddy": { "babybuddy": {
"documentation": "https:\/\/docs.baby-buddy.net", "documentation": "https:\/\/docs.baby-buddy.net",
"slogan": "Baby Buddy is an open-source web application that helps parents track their baby's daily activities, growth, and health with ease. It's a handy tool for new parents to keep a close eye on their little one's development.", "slogan": "Baby Buddy is an open-source web application that helps parents track their baby's daily activities, growth, and health with ease.",
"compose": "c2VydmljZXM6CiAgYmFieWJ1ZGR5OgogICAgaW1hZ2U6ICdsc2NyLmlvL2xpbnV4c2VydmVyL2JhYnlidWRkeTpsYXRlc3QnCiAgICBlbnZpcm9ubWVudDoKICAgICAgLSBTRVJWSUNFX0ZRRE5fQkFCWUJVRERZCiAgICAgIC0gUFVJRD0xMDAwCiAgICAgIC0gUEdJRD0xMDAwCiAgICAgIC0gVFo9RXVyb3BlL01hZHJpZAogICAgICAtIENTUkZfVFJVU1RFRF9PUklHSU5TPSRTRVJWSUNFX0ZRRE5fQkFCWUJVRERZCiAgICB2b2x1bWVzOgogICAgICAtICdiYWJ5YnVkZHktY29uZmlnOi9jb25maWcnCiAgICBoZWFsdGhjaGVjazoKICAgICAgdGVzdDoKICAgICAgICAtIENNRAogICAgICAgIC0gY3VybAogICAgICAgIC0gJy1mJwogICAgICAgIC0gJ2h0dHA6Ly9sb2NhbGhvc3Q6ODAwMCcKICAgICAgaW50ZXJ2YWw6IDJzCiAgICAgIHRpbWVvdXQ6IDEwcwogICAgICByZXRyaWVzOiAxNQo=" "compose": "c2VydmljZXM6CiAgYmFieWJ1ZGR5OgogICAgaW1hZ2U6ICdsc2NyLmlvL2xpbnV4c2VydmVyL2JhYnlidWRkeTpsYXRlc3QnCiAgICBlbnZpcm9ubWVudDoKICAgICAgLSBTRVJWSUNFX0ZRRE5fQkFCWUJVRERZCiAgICAgIC0gUFVJRD0xMDAwCiAgICAgIC0gUEdJRD0xMDAwCiAgICAgIC0gVFo9RXVyb3BlL01hZHJpZAogICAgICAtIENTUkZfVFJVU1RFRF9PUklHSU5TPSRTRVJWSUNFX0ZRRE5fQkFCWUJVRERZCiAgICB2b2x1bWVzOgogICAgICAtICdiYWJ5YnVkZHktY29uZmlnOi9jb25maWcnCiAgICBoZWFsdGhjaGVjazoKICAgICAgdGVzdDoKICAgICAgICAtIENNRAogICAgICAgIC0gY3VybAogICAgICAgIC0gJy1mJwogICAgICAgIC0gJ2h0dHA6Ly9sb2NhbGhvc3Q6ODAwMCcKICAgICAgaW50ZXJ2YWw6IDJzCiAgICAgIHRpbWVvdXQ6IDEwcwogICAgICByZXRyaWVzOiAxNQo="
}, },
"code-server": { "code-server": {