ui: updates
This commit is contained in:
parent
11bd46b200
commit
f470ebbbe0
@ -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);
|
||||
}
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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:
|
||||
|
@ -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": {
|
||||
|
Loading…
Reference in New Issue
Block a user