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; @apply bg-coolgray-100 text-white font-sans;
} }
label {
@apply text-sm pb-2 font-bold tracking-wider;
}
input, input,
textarea { 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 { 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 { button {
@ -45,6 +48,10 @@ h2 {
h3 { h3 {
@apply text-lg font-bold pb-4; @apply text-lg font-bold pb-4;
} }
.box { a {
@apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 p-2; @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"> <nav class="flex gap-4 py-2">
<a target="_blank" href="{{ $gitBranchLocation }}">
<x-inputs.button>Open on Git ↗️</x-inputs.button>
</a>
<a <a
href="{{ route('project.application.configuration', [ href="{{ route('project.application.configuration', [
'project_uuid' => Route::current()->parameters()['project_uuid'], 'project_uuid' => Route::current()->parameters()['project_uuid'],
'application_uuid' => Route::current()->parameters()['application_uuid'], 'application_uuid' => Route::current()->parameters()['application_uuid'],
'environment_name' => Route::current()->parameters()['environment_name'], 'environment_name' => Route::current()->parameters()['environment_name'],
]) }}"> ]) }}">
<x-inputs.button>Configuration</x-inputs.button> Configuration
</a> </a>
<a <a
href="{{ route('project.application.deployments', [ href="{{ route('project.application.deployments', [
@ -16,7 +13,10 @@
'application_uuid' => Route::current()->parameters()['application_uuid'], 'application_uuid' => Route::current()->parameters()['application_uuid'],
'environment_name' => Route::current()->parameters()['environment_name'], '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> </a>
<livewire:project.application.deploy :applicationId="$applicationId" /> <livewire:project.application.deploy :applicationId="$applicationId" />
</nav> </nav>

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<div> <div>
@if (auth()->user()->teams->contains(0)) @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 @endif
</div> </div>

View File

@ -3,7 +3,7 @@
@if ($application->status === 'running') @if ($application->status === 'running')
<x-inputs.button wire:click='start'>Rebuild</x-inputs.button> <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='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 @else
<x-inputs.button wire:click='start'>Start</x-inputs.button> <x-inputs.button wire:click='start'>Start</x-inputs.button>
<x-inputs.button wire:click='forceRebuild'>Start (no cache)</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"> <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 noLabel noDirty id="key" label="Name" required />
<x-inputs.input noDirty id="value" label="Value" required /> <x-inputs.input noLabel noDirty id="value" label="Value" required />
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<x-inputs.input noDirty type="checkbox" id="is_build_time" label="Build Variable?" /> <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"> <div class="flex flex-col gap-2">
<h3>Environment Variables</h3> <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 }}" <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
:env="$env" /> :env="$env" />
@empty @endforeach
<p>There are no environment variables for this application.</p> <div class="pt-10">
@endforelse
<h4>Add new environment variable</h4>
<livewire:project.application.environment-variable.add /> <livewire:project.application.environment-variable.add />
</div> </div>
</div>

View File

@ -1,9 +1,9 @@
<div> <div>
<h3>General</h3> <h3>General</h3>
<form wire:submit.prevent='submit' class="flex flex-col"> <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.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.install_command" label="Install Command" />
<x-inputs.input id="application.build_command" label="Build Command" /> <x-inputs.input id="application.build_command" label="Build Command" />
<x-inputs.input id="application.start_command" label="Start Command" /> <x-inputs.input id="application.start_command" label="Start Command" />
@ -29,10 +29,9 @@
@else @else
<x-inputs.input id="application.ports_exposes" label="Ports Exposes" required /> <x-inputs.input id="application.ports_exposes" label="Ports Exposes" required />
@endif @endif
<x-inputs.input id="application.ports_mappings" label="Ports Mappings" /> <x-inputs.input id="application.ports_mappings" label="Ports Mappings" />
</div> </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 Submit
</x-inputs.button> </x-inputs.button>
</form> </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_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_custom_ssl" label="Is Custom SSL?" />
<x-inputs.input disabled instantSave type="checkbox" id="is_http2" label="Is Http2?" /> <x-inputs.input disabled instantSave type="checkbox" id="is_http2" label="Is Http2?" />
</div> </div>
</div> </div>

View File

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

View File

@ -1,4 +1,5 @@
<div x-data="{ deleteServer: false }"> <div x-data="{ deleteServer: false }">
<h3>General</h3>
<x-naked-modal show="deleteServer" message='Are you sure you would like to delete this server?' /> <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"> <form wire:submit.prevent='submit' class="flex flex-col">
<div class="flex flex-col gap-2 xl:flex-row"> <div class="flex flex-col gap-2 xl:flex-row">
@ -49,4 +50,28 @@
@endisset @endisset
</div> </div>
</form> </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> </div>

View File

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

View File

@ -1,27 +1,27 @@
<x-layout> <x-layout>
<h1>Configuration</h1>
<x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" /> <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 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"> <div class="flex flex-col min-w-fit">
<a :class="activeTab === 'general' && 'text-purple-500'" <a :class="activeTab === 'general' && 'text-coollabs-100'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a> @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'" @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
href="#">Environment href="#">Environment
Variables</a> 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> @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'" @click.prevent="activeTab = 'destination'; window.location.hash = 'destination'"
href="#">Destination href="#">Destination
</a> </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 @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
</a> </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 @click.prevent="activeTab = 'revert'; window.location.hash = 'revert'" href="#">Revert
</a> </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 @click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Previews
</a> --}} </a> --}}
</div> </div>

View File

@ -1,5 +1,5 @@
<x-layout> <x-layout>
<h1>Deployment</h1>
<x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" /> <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" /> <livewire:project.application.poll-deployment :activity="$activity" :deployment_uuid="$deployment_uuid" />
</x-layout> </x-layout>

View File

@ -1,6 +1,6 @@
<x-layout> <x-layout>
<h1>Deployments</h1>
<x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" /> <x-applications.navbar :applicationId="$application->id" :gitBranchLocation="$application->gitBranchLocation" />
<h1 class="py-10">Deployments</h1>
<div class="pt-2"> <div class="pt-2">
@forelse ($deployments as $deployment) @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')" /> <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> <x-layout>
<div class="text-3xl font-bold">Server</div> <div class="text-3xl font-bold">Server</div>
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }"> <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex pt-6">
<div class="flex gap-4"> <div class="flex flex-col gap-4 min-w-fit">
<a :class="activeTab === 'general' && 'text-purple-500'" <a :class="activeTab === 'general' && 'text-purple-500'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a> @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'" <a :class="activeTab === 'proxy' && 'text-purple-500'"
@click.prevent="activeTab = 'proxy'; window.location.hash = 'proxy'" href="#">Proxy @click.prevent="activeTab = 'proxy'; window.location.hash = 'proxy'" href="#">Proxy
</a> </a>
</div> </div>
<div class="w-full pl-8">
<div x-cloak x-show="activeTab === 'general'"> <div x-cloak x-show="activeTab === 'general'">
<h3>General Configurations</h3>
<livewire:server.form :server_id="$server->id" /> <livewire:server.form :server_id="$server->id" />
</div> </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>
<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>
@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'"> <div x-cloak x-show="activeTab === 'proxy'">
<livewire:server.proxy :server="$server" /> <livewire:server.proxy :server="$server" />
</div> </div>
</div> </div>
</div>
</x-layout> </x-layout>