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;
}
.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 {
@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 {
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

View File

@ -15,7 +15,8 @@
</div>
@endif
@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
@if ($projects->count() > 0)
<h3 class="pb-4">Projects</h3>
@ -32,17 +33,18 @@
<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')]) }}">
<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>
</a>
@else
<a class="flex flex-col flex-1 mx-6 hover:no-underline"
href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
<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>
</a>
@endif
<div class="flex items-center">
<a class="mx-4 rounded group-hover:text-white hover:no-underline"
href="{{ route('project.resources.new', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => data_get($project, 'environments.0.name', 'production')]) }}">
<span class="font-bold hover:text-warning">+ New Resource</span>
@ -59,6 +61,7 @@
</svg>
</a>
</div>
</div>
@endforeach
</div>
@if ($projects->count() > 0)
@ -79,7 +82,7 @@
<div class="font-bold text-white">
{{ $server->name }}
</div>
<div class="text-xs group-hover:text-white">
<div class="description">
{{ $server->description }}</div>
<div class="flex gap-1 text-xs text-error">
@if (!$server->settings->is_reachable)
@ -97,7 +100,7 @@
</a>
@endforeach
</div>
{{-- <h3 class="py-4">Tokens</h3>
{{-- <h3 class="py-4">Tokens</h3>
{{auth()->user()->tokens}}
<x-forms.button wire:click='createToken'>Create Token</x-forms.button> --}}
<script>

View File

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

View File

@ -18,7 +18,7 @@
<div class="font-bold text-white">
{{ $server->name }}
</div>
<div class="text-xs group-hover:text-white">
<div class="description">
{{ $server->description }}</div>
<div class="flex gap-1 text-xs text-error">
@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]) }}">
<div class="flex flex-col mx-6">
<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>
@if (Str::of(data_get($application, 'status'))->startsWith('running'))
<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]) }}">
<div class="flex flex-col mx-6">
<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>
@if (Str::of(data_get($database, 'status'))->startsWith('running'))
<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]) }}">
<div class="flex flex-col mx-6">
<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>
@if (Str::of(serviceStatus($service))->startsWith('running'))
<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="grid gap-2 lg:grid-cols-2">
@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 }}
</a>
@empty

View File

@ -20,9 +20,10 @@
<a class="flex flex-col flex-1 mx-6 hover:no-underline"
href="{{ route('project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
<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>
</a>
<div class="flex items-center">
<a class="mx-4 rounded group-hover:text-white"
href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon hover:text-warning" viewBox="0 0 24 24"
@ -35,6 +36,7 @@
</svg>
</a>
</div>
</div>
@empty
<div>
<div>No project found.</div>

View File

@ -1,5 +1,5 @@
# 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:
babybuddy:

View File

@ -12,7 +12,7 @@
},
"babybuddy": {
"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="
},
"code-server": {