css sprinkle

This commit is contained in:
Andras Bacsai 2023-05-16 20:47:59 +02:00
parent 5c069d3c3c
commit 3b636ef022
17 changed files with 87 additions and 94 deletions

View File

@ -6,12 +6,15 @@ body {
@apply bg-coolgray-100 text-white font-sans;
}
label {
@apply text-sm pb-2 font-bold tracking-wider;
}
input,
textarea {
@apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:text-neutral-600 read-only:select-none outline-none;
@apply border border-solid border-coolgray-500 rounded p-2 px-4 bg-transparent text-white disabled:text-neutral-600 read-only:text-neutral-600 read-only:select-none outline-none focus:bg-coolgray-200/50 transition-all hover:bg-coolgray-200/50;
}
select {
@apply border-none p-2 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:select-none outline-none;
@apply border border-solid border-coolgray-400 rounded p-2 px-4 bg-transparent text-white disabled:text-neutral-600 read-only:select-none outline-none;
}
button {
@ -45,6 +48,10 @@ h2 {
h3 {
@apply text-lg font-bold pb-4;
}
.box {
@apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 p-2;
a {
@apply m-2 hover:text-coollabs;
}
.box {
@apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline;
}

View File

@ -1,14 +1,11 @@
<nav class="flex gap-4 py-2">
<a target="_blank" href="{{ $gitBranchLocation }}">
<x-inputs.button>Open on Git ↗️</x-inputs.button>
</a>
<a
href="{{ route('project.application.configuration', [
'project_uuid' => Route::current()->parameters()['project_uuid'],
'application_uuid' => Route::current()->parameters()['application_uuid'],
'environment_name' => Route::current()->parameters()['environment_name'],
]) }}">
<x-inputs.button>Configuration</x-inputs.button>
Configuration
</a>
<a
href="{{ route('project.application.deployments', [
@ -16,7 +13,10 @@
'application_uuid' => Route::current()->parameters()['application_uuid'],
'environment_name' => Route::current()->parameters()['environment_name'],
]) }}">
<x-inputs.button>Deployments</x-inputs.button>
Deployments
</a>
<a target="_blank" href="{{ $gitBranchLocation }}">
Open on Git ↗️
</a>
<livewire:project.application.deploy :applicationId="$applicationId" />
</nav>

View File

@ -3,7 +3,7 @@
'isBold' => false,
'disabled' => null,
'defaultClass' => 'text-white hover:bg-coollabs h-10 rounded transition-colors',
'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-10 rounded',
'defaultWarningClass' => 'text-red-500 hover:text-white hover:bg-red-600 h-10 rounded',
'disabledClass' => 'text-neutral-400 h-10 rounded',
'loadingClass' => 'text-black bg-green-500 h-10 rounded',
'confirm' => null,

View File

@ -22,7 +22,7 @@
@livewireStyles
</head>
<body>
<body class="antialiased">
@livewireScripts

View File

@ -3,20 +3,20 @@
<div class="flex px-2 py-1">
<div class="flex gap-2 text-sm">
<a href="/">
<x-inputs.button>Home</x-inputs.button>
Home
</a>
<a href="/command-center">
<x-inputs.button>Command Center</x-inputs.button>
Command Center
</a>
<a href="/profile">
<x-inputs.button>Profile</x-inputs.button>
Profile
</a>
<a href="/profile/team">
<x-inputs.button>Team</x-inputs.button>
Team
</a>
@if (auth()->user()->isRoot())
<a href="/settings">
<x-inputs.button>Settings</x-inputs.button>
Settings
</a>
@endif
</div>
@ -28,7 +28,7 @@
<livewire:force-upgrade />
<form action="/logout" method="POST">
@csrf
<x-inputs.button type="submit">Logout</x-inputs.button>
<button class="m-1 hover:underline" type="submit">Logout</button>
</form>
</div>
</div>

View File

@ -1,5 +1,5 @@
<div>
@if (auth()->user()->teams->contains(0))
<x-inputs.button wire:click='upgrade'>Force Upgrade</x-inputs.button>
<button wire:click='upgrade' class="m-1 hover:underline">Force Upgrade</button>
@endif
</div>

View File

@ -3,7 +3,7 @@
@if ($application->status === 'running')
<x-inputs.button wire:click='start'>Rebuild</x-inputs.button>
<x-inputs.button wire:click='forceRebuild'>Force Rebuild</x-inputs.button>
<x-inputs.button wire:click='stop'>Stop</x-inputs.button>
<x-inputs.button isWarning wire:click='stop'>Stop</x-inputs.button>
@else
<x-inputs.button wire:click='start'>Start</x-inputs.button>
<x-inputs.button wire:click='forceRebuild'>Start (no cache)</x-inputs.button>

View File

@ -1,6 +1,6 @@
<form wire:submit.prevent='submit' class="flex items-end gap-2 px-2">
<x-inputs.input noDirty id="key" label="Name" required />
<x-inputs.input noDirty id="value" label="Value" required />
<x-inputs.input noLabel noDirty id="key" label="Name" required />
<x-inputs.input noLabel noDirty id="value" label="Value" required />
<div class="flex flex-col">
<div class="flex items-center gap-2">
<x-inputs.input noDirty type="checkbox" id="is_build_time" label="Build Variable?" />

View File

@ -1,11 +1,10 @@
<div class="flex flex-col gap-2">
<h3>Environment Variables</h3>
@forelse ($application->environment_variables as $env)
@foreach ($application->environment_variables as $env)
<livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
:env="$env" />
@empty
<p>There are no environment variables for this application.</p>
@endforelse
<h4>Add new environment variable</h4>
<livewire:project.application.environment-variable.add />
@endforeach
<div class="pt-10">
<livewire:project.application.environment-variable.add />
</div>
</div>

View File

@ -1,9 +1,9 @@
<div>
<h3>General</h3>
<form wire:submit.prevent='submit' class="flex flex-col">
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 pb-4">
<x-inputs.input id="application.name" label="Name" required />
<x-inputs.input id="application.fqdn" label="FQDN" />
<x-inputs.input id="application.fqdn" label="Domains" />
<x-inputs.input id="application.install_command" label="Install Command" />
<x-inputs.input id="application.build_command" label="Build Command" />
<x-inputs.input id="application.start_command" label="Start Command" />
@ -29,10 +29,9 @@
@else
<x-inputs.input id="application.ports_exposes" label="Ports Exposes" required />
@endif
<x-inputs.input id="application.ports_mappings" label="Ports Mappings" />
</div>
<x-inputs.button class="mx-auto mt-4 text-white bg-neutral-800 hover:bg-violet-600" type="submit">
<x-inputs.button isBold type="submit">
Submit
</x-inputs.button>
</form>
@ -47,6 +46,5 @@
<x-inputs.input disabled instantSave type="checkbox" id="is_dual_cert" label="Dual Certs?" />
<x-inputs.input disabled instantSave type="checkbox" id="is_custom_ssl" label="Is Custom SSL?" />
<x-inputs.input disabled instantSave type="checkbox" id="is_http2" label="Is Http2?" />
</div>
</div>

View File

@ -1,6 +1,4 @@
<div>
<pre
style="width: 100%;overflow-y: scroll;"
@if ($isKeepAliveOn) wire:poll.750ms="polling" @endif
>{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($activity) }}</pre>
<div
class="flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4">
<pre @if ($isKeepAliveOn) wire:poll.750ms="polling" @endif>{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($activity) }}</pre>
</div>

View File

@ -1,4 +1,5 @@
<div x-data="{ deleteServer: false }">
<h3>General</h3>
<x-naked-modal show="deleteServer" message='Are you sure you would like to delete this server?' />
<form wire:submit.prevent='submit' class="flex flex-col">
<div class="flex flex-col gap-2 xl:flex-row">
@ -49,4 +50,28 @@
@endisset
</div>
</form>
<div class="flex items-center gap-2 py-4">
<div class="font-bold">Private Key</div>
<a class="px-2"
href="{{ route('private-key.show', ['private_key_uuid' => data_get($server, 'privateKey.uuid')]) }}">
{{ data_get($server, 'privateKey.uuid') }}
</a>
<a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
<x-inputs.button isBold>Change</x-inputs.button>
</a>
</div>
<div class="flex items-center gap-2 py-4">
<div class="font-bold">Destinations</div>
<div>
@foreach ($server->standaloneDockers as $docker)
<a class="px-2"
href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
{{ data_get($docker, 'network') }}
</a>
@endforeach
</div>
<a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
<x-inputs.button isBold>Add</x-inputs.button>
</a>
</div>
</div>

View File

@ -2,8 +2,8 @@
<x-naked-modal show="stopProxy" action="stopProxy"
message='Are you sure you would like to stop the proxy? All resources will be unavailable.' />
@if ($server->settings->is_validated)
<div class="flex items-center gap-2">
<h3>Proxy</h3>
<div class="flex items-center gap-2 mb-4">
<h3 class="pb-0">Proxy</h3>
<div>{{ $server->extra_attributes->proxy_status }}</div>
</div>
@ -35,15 +35,15 @@
@isset($proxy_settings)
<h3>Configuration</h3>
@if ($selectedProxy->value === 'TRAEFIK_V2')
<h4>traefik.conf</h4>
<form wire:submit.prevent='saveConfiguration'>
<x-inputs.input noDirty type="textarea" wire:model.defer="proxy_settings" rows="30" />
<div class="pt-2">
<div class="py-2 pb-8">
<x-inputs.button isBold>Save</x-inputs.button>
<x-inputs.button wire:click.prevent="resetProxy">
Reset Configuration
</x-inputs.button>
</div>
<h4>traefik.conf</h4>
<x-inputs.input noDirty type="textarea" wire:model.defer="proxy_settings" rows="30" />
</form>
@endif
@endisset

View File

@ -1,27 +1,27 @@
<x-layout>
<h1>Configuration</h1>
<x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
<h1 class="py-10">Configuration</h1>
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex pt-6">
<div class="flex flex-col gap-4 min-w-fit">
<a :class="activeTab === 'general' && 'text-purple-500'"
<div class="flex flex-col min-w-fit">
<a :class="activeTab === 'general' && 'text-coollabs-100'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
<a :class="activeTab === 'environment-variables' && 'text-purple-500'"
<a :class="activeTab === 'environment-variables' && 'text-coollabs-100'"
@click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
href="#">Environment
Variables</a>
<a :class="activeTab === 'source' && 'text-purple-500'"
<a :class="activeTab === 'source' && 'text-coollabs-100'"
@click.prevent="activeTab = 'source'; window.location.hash = 'source'" href="#">Source</a>
<a :class="activeTab === 'destination' && 'text-purple-500'"
<a :class="activeTab === 'destination' && 'text-coollabs-100'"
@click.prevent="activeTab = 'destination'; window.location.hash = 'destination'"
href="#">Destination
</a>
<a :class="activeTab === 'storages' && 'text-purple-500'"
<a :class="activeTab === 'storages' && 'text-coollabs-100'"
@click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
</a>
<a :class="activeTab === 'revert' && 'text-purple-500'"
<a :class="activeTab === 'revert' && 'text-coollabs-100'"
@click.prevent="activeTab = 'revert'; window.location.hash = 'revert'" href="#">Revert
</a>
{{-- <a :class="activeTab === 'previews' && 'text-purple-500'"
{{-- <a :class="activeTab === 'previews' && 'text-coollabs-100'"
@click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Previews
</a> --}}
</div>

View File

@ -1,5 +1,5 @@
<x-layout>
<h1>Deployment</h1>
<x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
<h1 class="py-10">Deployment</h1>
<livewire:project.application.poll-deployment :activity="$activity" :deployment_uuid="$deployment_uuid" />
</x-layout>

View File

@ -1,6 +1,6 @@
<x-layout>
<h1>Deployments</h1>
<x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
<h1 class="py-10">Deployments</h1>
<div class="pt-2">
@forelse ($deployments as $deployment)
<livewire:project.application.get-deployments :deployment_uuid="data_get($deployment->properties, 'type_uuid')" :created_at="data_get($deployment, 'created_at')" :status="data_get($deployment->properties, 'status')" />

View File

@ -1,54 +1,20 @@
<x-layout>
<div class="text-3xl font-bold">Server</div>
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }">
<div class="flex gap-4">
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex pt-6">
<div class="flex flex-col gap-4 min-w-fit">
<a :class="activeTab === 'general' && 'text-purple-500'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
<a :class="activeTab === 'private-key' && 'text-purple-500'"
@click.prevent="activeTab = 'private-key'; window.location.hash = 'private-key'" href="#">Private
Key</a>
<a :class="activeTab === 'destinations' && 'text-purple-500'"
@click.prevent="activeTab = 'destinations'; window.location.hash = 'destinations'"
href="#">Destinations
</a>
<a :class="activeTab === 'proxy' && 'text-purple-500'"
@click.prevent="activeTab = 'proxy'; window.location.hash = 'proxy'" href="#">Proxy
</a>
</div>
<div x-cloak x-show="activeTab === 'general'">
<h3>General Configurations</h3>
<livewire:server.form :server_id="$server->id" />
</div>
<div x-cloak x-show="activeTab === 'private-key'">
<div class="flex items-center gap-2">
<h3>Private Keys</h3>
<a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
<x-inputs.button>Change</x-inputs.button>
</a>
<div class="w-full pl-8">
<div x-cloak x-show="activeTab === 'general'">
<livewire:server.form :server_id="$server->id" />
</div>
<a href="{{ route('private-key.show', ['private_key_uuid' => data_get($server, 'privateKey.uuid')]) }}">
<x-inputs.button>{{ data_get($server, 'privateKey.uuid') }}</x-inputs.button>
</a>
</div>
<div x-cloak x-show="activeTab === 'destinations'">
<div class="flex items-center gap-2">
<h3>Destinations</h3>
<a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
<x-inputs.button>Add a new</x-inputs.button>
</a>
<div x-cloak x-show="activeTab === 'proxy'">
<livewire:server.proxy :server="$server" />
</div>
@if ($server->standaloneDockers->count() > 0)
@foreach ($server->standaloneDockers as $docker)
<a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
<x-inputs.button>{{ data_get($docker, 'network') }}</x-inputs.button>
</a>
@endforeach
@else
<p>No destinations found</p>
@endif
</div>
<div x-cloak x-show="activeTab === 'proxy'">
<livewire:server.proxy :server="$server" />
</div>
</div>
</x-layout>