rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve new resource selection UI layout and styling

Browse source
This commit is contained in:
ShadowArcanist 2025-11-20 10:23:05 +05:30
parent 3fe5c25a64
commit 8911af0414
2 changed files with 50 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
resources/views/components/resource-view.blade.php
View file

@ -1,27 +1,23 @@
<div @class([ <div @class([
'transition-all duration-150 box-without-bg dark:bg-coolgray-100 bg-white group', 'transition-all duration-150 box-without-bg dark:bg-coolgray-100 bg-white group p-2 rounded-lg border border-neutral-200 dark:border-coolgray-400 hover:ring-2 dark:hover:ring-yellow-400 hover:ring-coollabs',
'hover:border-l-coollabs cursor-pointer' => !$upgrade, 'cursor-pointer' => !$upgrade,
'hover:border-l-red-500 cursor-not-allowed' => $upgrade, 'hover:border-l-red-500 cursor-not-allowed' => $upgrade,
])> ])>
<div class="flex items-center"> <div class="flex items-center">
<div class="w-[4.5rem] h-[4.5rem] flex items-center justify-center text-black dark:text-white shrink-0"> <div class="w-[4.5rem] h-[4.5rem] flex items-center justify-center text-black dark:text-white shrink-0 rounded-lg overflow-hidden">
{{ $logo }} {{ $logo }}
</div> </div>
<div class="flex flex-col pl-2 "> <div class="flex flex-col pl-3 space-y-1">
<div class="dark:text-white text-md"> <div class="dark:text-white text-md font-medium">
{{ $title }} {{ $title }}
</div> </div>
@if ($upgrade) @if ($upgrade)
<div>{{ $upgrade }}</div> <div>{{ $upgrade }}</div>
@else @else
<div class="text-xs font-bold dark:text-neutral-500 dark:group-hover:text-neutral-300"> <div class="text-xs dark:text-neutral-400 dark:group-hover:text-neutral-200 line-clamp-2">
{{ $description }} {{ $description }}
</div> </div>
@endif @endif
</div> </div>
</div> </div>
@isset($documentation)
<div class="flex-1"></div>
{{ $documentation }}
@endisset
</div> </div>

78
resources/views/livewire/project/new/select.blade.php
View file

@ -66,44 +66,49 @@ class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200
<div x-show="loading">Loading...</div> <div x-show="loading">Loading...</div>
<div x-show="!loading" class="flex flex-col gap-4 py-4"> <div x-show="!loading" class="flex flex-col gap-4 py-4">
<h2 x-show="filteredGitBasedApplications.length > 0">Applications</h2> <h2 x-show="filteredGitBasedApplications.length > 0">Applications</h2>
<h4 x-show="filteredGitBasedApplications.length > 0">Git Based</h4> <div x-show="filteredGitBasedApplications.length > 0 || filteredDockerBasedApplications.length > 0" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div x-show="filteredGitBasedApplications.length > 0" <div x-show="filteredGitBasedApplications.length > 0" class="space-y-4">
class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-1"> <h4>Git Based</h4>
<template x-for="application in filteredGitBasedApplications" :key="application.name"> <div class="grid justify-start grid-cols-1 gap-4 text-left">
<div x-on:click='setType(application.id)' <template x-for="application in filteredGitBasedApplications" :key="application.name">
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"> <div x-on:click='setType(application.id)'
<x-resource-view> :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
<x-slot:title><span x-text="application.name"></span></x-slot> <x-resource-view>
<x-slot:description> <x-slot:title><span x-text="application.name"></span></x-slot>
<span x-html="window.sanitizeHTML(application.description)"></span> <x-slot:description>
</x-slot> <span x-html="window.sanitizeHTML(application.description)"></span>
<x-slot:logo> </x-slot>
<img class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain" <x-slot:logo>
:src="application.logo"> <img class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
</x-slot:logo> :src="application.logo">
</x-resource-view> </x-slot:logo>
</x-resource-view>
</div>
</template>
</div> </div>
</template> </div>
</div> <div x-show="filteredDockerBasedApplications.length > 0" class="space-y-4">
<h4 x-show="filteredDockerBasedApplications.length > 0">Docker Based</h4> <h4>Docker Based</h4>
<div x-show="filteredDockerBasedApplications.length > 0" <div class="grid justify-start grid-cols-1 gap-4 text-left">
class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3"> <template x-for="application in filteredDockerBasedApplications" :key="application.name">
<template x-for="application in filteredDockerBasedApplications" :key="application.name"> <div x-on:click="setType(application.id)"
<div x-on:click="setType(application.id)" :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"> <x-resource-view>
<x-resource-view> <x-slot:title><span x-text="application.name"></span></x-slot>
<x-slot:title><span x-text="application.name"></span></x-slot> <x-slot:description><span x-text="application.description"></span></x-slot>
<x-slot:description><span x-text="application.description"></span></x-slot> <x-slot:logo> <img
<x-slot:logo> <img class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain" :src="application.logo"></x-slot>
:src="application.logo"></x-slot> </x-resource-view>
</x-resource-view> </div>
</template>
</div> </div>
</template> </div>
</div> </div>
<h2 x-show="filteredDatabases.length > 0">Databases</h2> <div x-show="filteredDatabases.length > 0" class="mt-8">
<h2 class="mb-4">Databases</h2>
<div x-show="filteredDatabases.length > 0" <div x-show="filteredDatabases.length > 0"
class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2"> class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
<template x-for="database in filteredDatabases" :key="database.id"> <template x-for="database in filteredDatabases" :key="database.id">
<div x-on:click="setType(database.id)" <div x-on:click="setType(database.id)"
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"> :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
@ -119,7 +124,8 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
</div> </div>
</template> </template>
</div> </div>
<div x-show="filteredServices.length > 0"> </div>
<div x-show="filteredServices.length > 0" class="mt-8">
<div class="flex items-center gap-4" x-init="loadResources"> <div class="flex items-center gap-4" x-init="loadResources">
<h2>Services</h2> <h2>Services</h2>
<x-forms.button x-on:click="loadResources">Reload List</x-forms.button> <x-forms.button x-on:click="loadResources">Reload List</x-forms.button>
@ -132,7 +138,7 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
href="https://coolify.io/docs/services/overview">here</a>. href="https://coolify.io/docs/services/overview">here</a>.
</div> </div>
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2"> <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
<template x-for="service in filteredServices" :key="service.name"> <template x-for="service in filteredServices" :key="service.name">
<div x-on:click="setType('one-click-service-' + service.name)" <div x-on:click="setType('one-click-service-' + service.name)"
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"> :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">