feat: improve new resource selection UI layout and styling
This commit is contained in:
ShadowArcanist
parent
3fe5c25a64
commit
8911af0414
2 changed files with 50 additions and 48 deletions
|
|
@ -1,27 +1,23 @@
|
|||
<div @class([
|
||||
'transition-all duration-150 box-without-bg dark:bg-coolgray-100 bg-white group',
|
||||
'hover:border-l-coollabs cursor-pointer' => !$upgrade,
|
||||
<div @class([
|
||||
'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',
|
||||
'cursor-pointer' => !$upgrade,
|
||||
'hover:border-l-red-500 cursor-not-allowed' => $upgrade,
|
||||
])>
|
||||
])>
|
||||
<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 }}
|
||||
</div>
|
||||
<div class="flex flex-col pl-2 ">
|
||||
<div class="dark:text-white text-md">
|
||||
<div class="flex flex-col pl-3 space-y-1">
|
||||
<div class="dark:text-white text-md font-medium">
|
||||
{{ $title }}
|
||||
</div>
|
||||
@if ($upgrade)
|
||||
<div>{{ $upgrade }}</div>
|
||||
@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 }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@isset($documentation)
|
||||
<div class="flex-1"></div>
|
||||
{{ $documentation }}
|
||||
@endisset
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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" class="flex flex-col gap-4 py-4">
|
||||
<h2 x-show="filteredGitBasedApplications.length > 0">Applications</h2>
|
||||
<h4 x-show="filteredGitBasedApplications.length > 0">Git Based</h4>
|
||||
<div x-show="filteredGitBasedApplications.length > 0"
|
||||
class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-1">
|
||||
<template x-for="application in filteredGitBasedApplications" :key="application.name">
|
||||
<div x-on:click='setType(application.id)'
|
||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
|
||||
<x-resource-view>
|
||||
<x-slot:title><span x-text="application.name"></span></x-slot>
|
||||
<x-slot:description>
|
||||
<span x-html="window.sanitizeHTML(application.description)"></span>
|
||||
</x-slot>
|
||||
<x-slot:logo>
|
||||
<img 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:logo>
|
||||
</x-resource-view>
|
||||
<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" class="space-y-4">
|
||||
<h4>Git Based</h4>
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left">
|
||||
<template x-for="application in filteredGitBasedApplications" :key="application.name">
|
||||
<div x-on:click='setType(application.id)'
|
||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
|
||||
<x-resource-view>
|
||||
<x-slot:title><span x-text="application.name"></span></x-slot>
|
||||
<x-slot:description>
|
||||
<span x-html="window.sanitizeHTML(application.description)"></span>
|
||||
</x-slot>
|
||||
<x-slot:logo>
|
||||
<img 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:logo>
|
||||
</x-resource-view>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<h4 x-show="filteredDockerBasedApplications.length > 0">Docker Based</h4>
|
||||
<div x-show="filteredDockerBasedApplications.length > 0"
|
||||
class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
|
||||
<template x-for="application in filteredDockerBasedApplications" :key="application.name">
|
||||
<div x-on:click="setType(application.id)"
|
||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
|
||||
<x-resource-view>
|
||||
<x-slot:title><span x-text="application.name"></span></x-slot>
|
||||
<x-slot:description><span x-text="application.description"></span></x-slot>
|
||||
<x-slot:logo> <img
|
||||
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>
|
||||
</x-resource-view>
|
||||
</div>
|
||||
<div x-show="filteredDockerBasedApplications.length > 0" class="space-y-4">
|
||||
<h4>Docker Based</h4>
|
||||
<div class="grid justify-start grid-cols-1 gap-4 text-left">
|
||||
<template x-for="application in filteredDockerBasedApplications" :key="application.name">
|
||||
<div x-on:click="setType(application.id)"
|
||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
|
||||
<x-resource-view>
|
||||
<x-slot:title><span x-text="application.name"></span></x-slot>
|
||||
<x-slot:description><span x-text="application.description"></span></x-slot>
|
||||
<x-slot:logo> <img
|
||||
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>
|
||||
</x-resource-view>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</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"
|
||||
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">
|
||||
<div x-on:click="setType(database.id)"
|
||||
: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>
|
||||
</template>
|
||||
</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">
|
||||
<h2>Services</h2>
|
||||
<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>.
|
||||
</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">
|
||||
<div x-on:click="setType('one-click-service-' + service.name)"
|
||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
|
||||
|
|
|
|||
Loading…
Reference in a new issue