fix css here and there

This commit is contained in:
Andras Bacsai 2024-05-06 13:58:19 +02:00
parent ef37bf9b1a
commit 848e6102a1
15 changed files with 34 additions and 35 deletions

View File

@ -4,7 +4,6 @@
use App\Actions\Application\StopApplication; use App\Actions\Application\StopApplication;
use App\Events\ApplicationStatusChanged; use App\Events\ApplicationStatusChanged;
use App\Jobs\ComplexContainerStatusJob;
use App\Jobs\ContainerStatusJob; use App\Jobs\ContainerStatusJob;
use App\Jobs\ServerStatusJob; use App\Jobs\ServerStatusJob;
use App\Models\Application; use App\Models\Application;

View File

@ -157,7 +157,7 @@ .menu {
} }
.menu-item { .menu-item {
@apply flex items-center text-sm w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300; @apply flex items-center w-full gap-3 px-2 py-1 text-sm sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 min-w-fit sm:min-w-64;
} }
.menu-item-active { .menu-item-active {
@ -185,7 +185,7 @@ .custom-modal {
} }
.navbar-main { .navbar-main {
@apply flex h-fit flex-col md:flex-row justify-items-start sm:justify-between gap-4 pb-2 border-b-2 border-solid dark:border-coolgray-200 md:items-center; @apply flex flex-col gap-4 pb-2 border-b-2 border-solid h-fit md:flex-row justify-items-start sm:justify-between dark:border-coolgray-200 md:items-center;
} }
.loading { .loading {

View File

@ -84,7 +84,7 @@
<livewire:switch-team /> <livewire:switch-team />
</div> </div>
<ul role="list" class="flex flex-col flex-1 gap-y-7"> <ul role="list" class="flex flex-col flex-1 gap-y-7">
<li class="flex-1 "> <li class="flex-1 overflow-x-hidden">
<ul role="list" class="flex flex-col h-full space-y-1.5"> <ul role="list" class="flex flex-col h-full space-y-1.5">
@if (isSubscribed() || !isCloud()) @if (isSubscribed() || !isCloud())
<li> <li>

View File

@ -2,7 +2,7 @@
<h1>Notifications</h1> <h1>Notifications</h1>
<div class="subtitle">Get notified about your infrastructure.</div> <div class="subtitle">Get notified about your infrastructure.</div>
<div class="navbar-main"> <div class="navbar-main">
<nav class="flex gap-4 overflow-x-scroll items-center min-h-10"> <nav class="flex items-center gap-6 min-h-10">
<a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}" <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
href="{{ route('notifications.email') }}"> href="{{ route('notifications.email') }}">
<button>Email</button> <button>Email</button>

View File

@ -2,7 +2,7 @@
<h1>Security</h1> <h1>Security</h1>
<div class="subtitle">Security related settings.</div> <div class="subtitle">Security related settings.</div>
<div class="navbar-main"> <div class="navbar-main">
<nav class="flex gap-4 overflow-x-scroll items-center min-h-10"> <nav class="flex items-center gap-6 scrollbar min-h-10">
<a href="{{ route('security.private-key.index') }}"> <a href="{{ route('security.private-key.index') }}">
<button>Private Keys</button> <button>Private Keys</button>
</a> </a>

View File

@ -6,7 +6,7 @@
</div> </div>
<div class="subtitle">{{ data_get($server, 'name') }}.</div> <div class="subtitle">{{ data_get($server, 'name') }}.</div>
<div class="navbar-main"> <div class="navbar-main">
<nav class="flex gap-4 overflow-x-scroll items-center min-h-10"> <nav class="flex items-center gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap">
<a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}" <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
href="{{ route('server.show', [ href="{{ route('server.show', [
'server_uuid' => data_get($parameters, 'server_uuid'), 'server_uuid' => data_get($parameters, 'server_uuid'),

View File

@ -2,7 +2,7 @@
<h1>Settings</h1> <h1>Settings</h1>
<div class="subtitle">Instance wide settings for Coolify.</div> <div class="subtitle">Instance wide settings for Coolify.</div>
<div class="navbar-main"> <div class="navbar-main">
<nav class="flex gap-4 overflow-x-scroll items-center min-h-10"> <nav class="flex items-center gap-6 min-h-10 whitespace-nowrap">
<a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}" <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
href="{{ route('settings.index') }}"> href="{{ route('settings.index') }}">
<button>Configuration</button> <button>Configuration</button>

View File

@ -7,7 +7,7 @@
</div> </div>
<div class="subtitle">Team wide configurations.</div> <div class="subtitle">Team wide configurations.</div>
<div class="navbar-main"> <div class="navbar-main">
<nav class="flex gap-4 overflow-x-scroll items-center min-h-10"> <nav class="flex items-center gap-6 min-h-10">
<a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}"> <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
<button>General</button> <button>General</button>
</a> </a>

View File

@ -2,8 +2,8 @@
<h1>Configuration</h1> <h1>Configuration</h1>
<livewire:project.shared.configuration-checker :resource="$application" /> <livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" /> <livewire:project.application.heading :application="$application" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8"> <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
<div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll"> <div class="flex gap-4 overflow-x-scroll sm:gap-2 sm:flex-col sm:overflow-x-hidden scrollbar whitespace-nowrap">
<a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'" <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a> @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
@if ($application->destination->server->isSwarm()) @if ($application->destination->server->isSwarm())

View File

@ -1,7 +1,7 @@
<nav wire:poll.5000ms="check_status"> <nav wire:poll.5000ms="check_status">
<x-resources.breadcrumbs :resource="$application" :parameters="$parameters" /> <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" />
<div class="navbar-main"> <div class="navbar-main">
<nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0"> <nav class="flex items-center flex-shrink-0 gap-6 scrollbar min-h-10 whitespace-nowrap">
<a href="{{ route('project.application.configuration', $parameters) }}"> <a href="{{ route('project.application.configuration', $parameters) }}">
Configuration Configuration
</a> </a>
@ -18,16 +18,16 @@
@endif @endif
<x-applications.links :application="$application" /> <x-applications.links :application="$application" />
</nav> </nav>
<div class="flex items-center gap-2 order-first md:order-last flex-wrap md:flex-nowrap"> <div class="flex flex-wrap items-center gap-2">
@if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)) @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
<div>Please load a Compose file.</div> <div>Please load a Compose file.</div>
@else @else
@if (!$application->destination->server->isSwarm()) @if (!$application->destination->server->isSwarm())
<div class="md:order-first order-last"> <div>
<x-applications.advanced :application="$application" /> <x-applications.advanced :application="$application" />
</div> </div>
@endif @endif
<div class="flex gap-2 flex-wrap"> <div class="flex flex-wrap gap-2">
@if (!str($application->status)->startsWith('exited')) @if (!str($application->status)->startsWith('exited'))
@if (!$application->destination->server->isSwarm()) @if (!$application->destination->server->isSwarm())
<x-forms.button title="With rolling update if possible" wire:click='deploy'> <x-forms.button title="With rolling update if possible" wire:click='deploy'>

View File

@ -2,8 +2,8 @@
<h1>Configuration</h1> <h1>Configuration</h1>
<livewire:project.shared.configuration-checker :resource="$database" /> <livewire:project.shared.configuration-checker :resource="$database" />
<livewire:project.database.heading :database="$database" /> <livewire:project.database.heading :database="$database" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8"> <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
<div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll"> <div class="flex gap-4 overflow-x-scroll sm:gap-2 sm:flex-col sm:overflow-x-hidden scrollbar whitespace-nowrap">
<a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'" <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
@click.prevent="activeTab = 'general'; @click.prevent="activeTab = 'general';
window.location.hash = 'general'" window.location.hash = 'general'"

View File

@ -7,7 +7,7 @@
</x-slot:content> </x-slot:content>
</x-slide-over> </x-slide-over>
<div class="navbar-main"> <div class="navbar-main">
<nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0"> <nav class="flex items-center flex-shrink-0 gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap">
<a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}" <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.configuration', $parameters) }}"> href="{{ route('project.database.configuration', $parameters) }}">
<button>Configuration</button> <button>Configuration</button>
@ -31,7 +31,7 @@
</a> </a>
@endif @endif
</nav> </nav>
<div class="flex items-center gap-2 order-first sm:order-last flex-wrap"> <div class="flex flex-wrap items-center gap-2">
@if (!str($database->status)->startsWith('exited')) @if (!str($database->status)->startsWith('exited'))
<x-modal-confirmation @click="$wire.dispatch('stopEvent')"> <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
<x-slot:button-title> <x-slot:button-title>

View File

@ -1,39 +1,39 @@
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.check_status" wire:poll.5000ms="check_status"> <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.check_status" wire:poll.5000ms="check_status">
<livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" /> <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
<div class="flex h-full pt-6 sm:flex-row flex-col gap-8"> <div class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
<div class="flex flex-col items-start gap-4 min-w-fit"> <div class="flex flex-col items-start gap-2 min-w-fit">
<a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a> <a class="menu-item sm:min-w-fit" target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>
<a :class="activeTab === 'service-stack' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@click.prevent="activeTab = 'service-stack'; @click.prevent="activeTab = 'service-stack';
window.location.hash = 'service-stack'" window.location.hash = 'service-stack'"
href="#">Service Stack</a> href="#">Service Stack</a>
<a :class="activeTab === 'environment-variables' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@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 === 'storages' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@click.prevent="activeTab = 'storages'; @click.prevent="activeTab = 'storages';
window.location.hash = 'storages'" window.location.hash = 'storages'"
href="#">Storages</a> href="#">Storages</a>
<a :class="activeTab === 'execute-command' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@click.prevent="activeTab = 'execute-command'; @click.prevent="activeTab = 'execute-command';
window.location.hash = 'execute-command'" window.location.hash = 'execute-command'"
href="#">Execute Command</a> href="#">Execute Command</a>
<a :class="activeTab === 'logs' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@click.prevent="activeTab = 'logs'; @click.prevent="activeTab = 'logs';
window.location.hash = 'logs'" window.location.hash = 'logs'"
href="#">Logs</a> href="#">Logs</a>
<a :class="activeTab === 'webhooks' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
</a> </a>
<a :class="activeTab === 'resource-operations' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'" @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
href="#">Resource Operations href="#">Resource Operations
</a> </a>
<a :class="activeTab === 'tags' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
</a> </a>
<a :class="activeTab === 'danger' && 'dark:text-white'" <a class="menu-item sm:min-w-fit"
@click.prevent="activeTab = 'danger'; @click.prevent="activeTab = 'danger';
window.location.hash = 'danger'" window.location.hash = 'danger'"
href="#">Danger Zone href="#">Danger Zone

View File

@ -9,14 +9,14 @@
<h1>Configuration</h1> <h1>Configuration</h1>
<x-resources.breadcrumbs :resource="$service" :parameters="$parameters" /> <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
<div class="navbar-main" x-data> <div class="navbar-main" x-data>
<nav class="flex gap-4 overflow-x-scroll items-center min-h-10 flex-shrink-0"> <nav class="flex items-center flex-shrink-0 gap-6 scrollbar min-h-10 whitespace-nowrap">
<a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}" <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
href="{{ route('project.service.configuration', $parameters) }}"> href="{{ route('project.service.configuration', $parameters) }}">
<button>Configuration</button> <button>Configuration</button>
</a> </a>
<x-services.links :service="$service" /> <x-services.links :service="$service" />
</nav> </nav>
<div class="flex items-center gap-2 order-first sm:order-last flex-wrap"> <div class="flex flex-wrap items-center order-first gap-2 sm:order-last">
@if (str($service->status())->contains('running')) @if (str($service->status())->contains('running'))
<button @click="$wire.dispatch('restartEvent')" class="gap-2 button"> <button @click="$wire.dispatch('restartEvent')" class="gap-2 button">
<svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

View File

@ -1,7 +1,7 @@
<div> <div>
<x-settings.navbar /> <x-settings.navbar />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1 gap-8 sm:flex-row flex-col"> <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-1 sm:flex-row">
<div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll"> <div class="flex gap-6 overflow-x-scroll sm:gap-2 sm:overflow-x-hidden scrollbar sm:flex-col whitespace-nowrap">
<a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'" <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a> @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
<a class="menu-item" :class="activeTab === 'backup' && 'menu-item-active'" <a class="menu-item" :class="activeTab === 'backup' && 'menu-item-active'"