Update UI styles in resource-view.blade.php, docker-image.blade.php, select.blade.php, and public-git-repository.blade.php

This commit is contained in:
Andras Bacsai 2024-04-16 10:10:08 +02:00
parent b16109ca56
commit 00db5b69ab
6 changed files with 32 additions and 43 deletions

View File

@ -12,7 +12,7 @@
@if ($upgrade) @if ($upgrade)
<div>{{ $upgrade }}</div> <div>{{ $upgrade }}</div>
@else @else
<div class="text-xs dark:text-neutral-500 group-hover:dark:text-neutral-300"> <div class="text-xs font-bold dark:text-neutral-500 group-hover:dark:text-neutral-300">
{{ $description }} {{ $description }}
</div> </div>
@endif @endif

View File

@ -2,7 +2,7 @@
<h1>Create a new Application</h1> <h1>Create a new Application</h1>
<div class="pb-4">You can deploy an existing Docker Image from any Registry.</div> <div class="pb-4">You can deploy an existing Docker Image from any Registry.</div>
<form wire:submit="submit"> <form wire:submit="submit">
<div class="flex gap-2 pb-1"> <div class="flex gap-2 pt-4 pb-1">
<h2>Docker Image</h2> <h2>Docker Image</h2>
<x-forms.button type="submit">Save</x-forms.button> <x-forms.button type="submit">Save</x-forms.button>
</div> </div>

View File

@ -1,32 +1,33 @@
<div> <div>
<h1>Create a new Application</h1> <h1>Create a new Application</h1>
<div class="pb-4">Deploy any public or private Git repositories through a Deploy Key.</div> <div class="pb-4">Deploy any public or private Git repositories through a Deploy Key.</div>
<div class="flex flex-col pt-10"> <div class="flex flex-col pt-4">
@if ($current_step === 'private_keys') @if ($current_step === 'private_keys')
<ul class="pb-10 steps"> <h2 class="pb-4">Select a private key</h2>
<li class="step step-secondary">Select a Private Key</li> <div class="flex flex-col justify-center gap-2 text-left ">
<li class="step">Select a Repository, Branch & Save</li>
</ul>
<div class="flex flex-col justify-center gap-2 text-left xl:flex-row">
@forelse ($private_keys as $key) @forelse ($private_keys as $key)
@if ($private_key_id == $key->id) @if ($private_key_id == $key->id)
<div class="gap-2 py-4 cursor-pointer group hover:bg-coollabs bg-coolgray-200" <div class="gap-2 py-4 cursor-pointer group hover:bg-coollabs bg-coolgray-200 box"
wire:click.defer="setPrivateKey('{{ $key->id }}')" wire:key="{{ $key->id }}"> wire:click.defer="setPrivateKey('{{ $key->id }}')" wire:key="{{ $key->id }}">
<div class="flex gap-4 mx-6"> <div class="flex flex-col mx-6">
<div class="group-hover:dark:text-white"> <div class="box-title">
{{ $key->name }} {{ $key->name }}
</div> </div>
<div class="box-description">
{{ $key->description }}</div>
<span wire:target="loadRepositories" wire:loading.delay <span wire:target="loadRepositories" wire:loading.delay
class="loading loading-xs dark:text-warning loading-spinner"></span> class="loading loading-xs dark:text-warning loading-spinner"></span>
</div> </div>
</div> </div>
@else @else
<div class="gap-2 py-4 cursor-pointer group hover:bg-coollabs bg-coolgray-200" <div class="gap-2 py-4 cursor-pointer group hover:bg-coollabs bg-coolgray-200 box"
wire:click.defer="setPrivateKey('{{ $key->id }}')" wire:key="{{ $key->id }}"> wire:click.defer="setPrivateKey('{{ $key->id }}')" wire:key="{{ $key->id }}">
<div class="flex gap-4 mx-6"> <div class="flex flex-col mx-6">
<div class="group-hover:dark:text-white"> <div class="box-title">
{{ $key->name }} {{ $key->name }}
</div> </div>
<div class="box-description">
{{ $key->description }}</div>
<span wire:target="loadRepositories" wire:loading.delay <span wire:target="loadRepositories" wire:loading.delay
class="loading loading-xs dark:text-warning loading-spinner"></span> class="loading loading-xs dark:text-warning loading-spinner"></span>
</div> </div>
@ -45,12 +46,10 @@ class="loading loading-xs dark:text-warning loading-spinner"></span>
</div> </div>
@endif @endif
@if ($current_step === 'repository') @if ($current_step === 'repository')
<ul class="pb-10 steps"> <h2 class="pb-4">Select a repository</h2>
<li class="step step-secondary">Select a Private Key</li>
<li class="step step-secondary">Select a Repository, Branch & Save</li>
</ul>
<form class="flex flex-col gap-2 pt-2" wire:submit='submit'> <form class="flex flex-col gap-2 pt-2" wire:submit='submit'>
<x-forms.input id="repository_url" required label="Repository Url" helper="{!! __('repository.url') !!}" /> <x-forms.input id="repository_url" required label="Repository Url (https:// or git@)"
helper="{!! __('repository.url') !!}" />
<div class="flex gap-2"> <div class="flex gap-2">
<x-forms.input id="branch" required label="Branch" /> <x-forms.input id="branch" required label="Branch" />
<x-forms.select wire:model.live="build_pack" label="Build Pack" required> <x-forms.select wire:model.live="build_pack" label="Build Pack" required>

View File

@ -14,24 +14,23 @@
@endif @endif
</div> </div>
<div class="pb-4">Deploy any public or private Git repositories through a GitHub App.</div> <div class="pb-4">Deploy any public or private Git repositories through a GitHub App.</div>
@if ($github_apps->count() !== 0) @if ($github_apps->count() !== 0)
<div class="flex flex-col gap-2 pt-10"> <h2 class="pt-4 pb-4">Select a Github App</h2>
<div class="flex flex-col gap-2">
@if ($current_step === 'github_apps') @if ($current_step === 'github_apps')
<div class="flex flex-col justify-center gap-2 text-left xl:flex-row"> <div class="flex flex-row justify-center gap-2 text-left">
@foreach ($github_apps as $ghapp) @foreach ($github_apps as $ghapp)
<div class="gap-2 py-4 bg-white cursor-pointer group hover:bg-coollabs dark:bg-coolgray-200" <div class="w-full gap-2 py-4 bg-white cursor-pointer group hover:bg-coollabs dark:bg-coolgray-200 box"
wire:click.prevent="loadRepositories({{ $ghapp->id }})" wire:key="{{ $ghapp->id }}"> wire:click.prevent="loadRepositories({{ $ghapp->id }})" wire:key="{{ $ghapp->id }}">
<div class="flex mr-4"> <div class="flex mr-4">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="group-hover:dark:text-white"> <div class="box-title">
{{ data_get($ghapp, 'name') }} {{ data_get($ghapp, 'name') }}
</div> </div>
<div class="text-xs text-black dark:text-gray-400 group-hover:dark:text-white"> <div class="box-description">
{{ data_get($ghapp, 'html_url') }}</div> {{ data_get($ghapp, 'html_url') }}</div>
</div> </div>
<span wire:target="loadRepositories({{ $ghapp->id }})" wire:loading.delay
class="loading loading-xs dark:text-warning loading-spinner"></span>
</div> </div>
</div> </div>
@endforeach @endforeach
@ -40,7 +39,7 @@ class="loading loading-xs dark:text-warning loading-spinner"></span>
@if ($current_step === 'repository') @if ($current_step === 'repository')
@if ($repositories->count() > 0) @if ($repositories->count() > 0)
<div class="flex items-end gap-2"> <div class="flex items-end gap-2">
<x-forms.select class="w-full" label="Repository URL" helper="{!! __('repository.url') !!}" <x-forms.select class="w-full" label="Repository"
wire:model="selected_repository_id"> wire:model="selected_repository_id">
@foreach ($repositories as $repo) @foreach ($repositories as $repo)
@if ($loop->first) @if ($loop->first)
@ -54,7 +53,6 @@ class="loading loading-xs dark:text-warning loading-spinner"></span>
@endforeach @endforeach
</x-forms.select> </x-forms.select>
<x-forms.button wire:click.prevent="loadBranches"> Load Repository </x-forms.button> <x-forms.button wire:click.prevent="loadBranches"> Load Repository </x-forms.button>
</div> </div>
@else @else
<div>No repositories found. Check your GitHub App configuration.</div> <div>No repositories found. Check your GitHub App configuration.</div>

View File

@ -5,27 +5,19 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex items-end gap-2"> <div class="flex items-end gap-2">
<x-forms.input required id="repository_url" label="Repository URL" helper="{!! __('repository.url') !!}" /> <x-forms.input required id="repository_url" label="Repository URL (https://)" helper="{!! __('repository.url') !!}" />
<x-forms.button type="submit"> <x-forms.button type="submit">
Check repository Check repository
</x-forms.button> </x-forms.button>
</div> </div>
@if (!$branch_found) @if (!$branch_found)
<div class="px-2 pt-4"> <div class="px-2 pt-4">
<div class="flex gap-1">
<div>Public:</div>
<div class='text-helper'>https://..</div>
</div>
<div class="flex gap-1">
<div>Private:</div>
<div class='text-helper'>git@..</div>
</div>
<div class="flex gap-1"> <div class="flex gap-1">
<div>Preselect branch (eg: main):</div> <div>Preselect branch (eg: main):</div>
<div class='text-helper'>https://github.com/coollabsio/coolify-examples/tree/main</div> <div class='text-helper'>https://github.com/coollabsio/coolify-examples/tree/main</div>
</div> </div>
<div> <div>
For example application deployments, checkout <a class="dark:text-white underline" For example application deployments, checkout <a class="underline dark:text-white"
href="https://github.com/coollabsio/coolify-examples/" target="_blank">Coolify href="https://github.com/coollabsio/coolify-examples/" target="_blank">Coolify
Examples</a>. Examples</a>.
</div> </div>

View File

@ -587,10 +587,10 @@ class="w-[4.5rem]
@forelse($servers as $server) @forelse($servers as $server)
<div class="w-full box group" wire:click="setServer({{ $server }})"> <div class="w-full box group" wire:click="setServer({{ $server }})">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold group-hover:dark:text-white"> <div class="box-title">
{{ $server->name }} {{ $server->name }}
</div> </div>
<div class="text-xs group-hover:dark:text-white"> <div class="box-description">
{{ $server->description }}</div> {{ $server->description }}</div>
</div> </div>
</div> </div>
@ -626,10 +626,10 @@ class="w-[4.5rem]
@foreach ($standaloneDockers as $standaloneDocker) @foreach ($standaloneDockers as $standaloneDocker)
<div class="w-full box group" wire:click="setDestination('{{ $standaloneDocker->uuid }}')"> <div class="w-full box group" wire:click="setDestination('{{ $standaloneDocker->uuid }}')">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold group-hover:dark:text-white"> <div class="box-title">
Standalone Docker <span class="text-xs">({{ $standaloneDocker->name }})</span> Standalone Docker <span class="text-xs">({{ $standaloneDocker->name }})</span>
</div> </div>
<div class="text-xs group-hover:dark:text-white"> <div class="box-description">
Network: {{ $standaloneDocker->network }}</div> Network: {{ $standaloneDocker->network }}</div>
</div> </div>
</div> </div>