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

Merge pull request #6992 from coollabsio/andrasbacsai/service-logos-color

Browse source 
feat: display service logos in original colors with consistent sizing
This commit is contained in:
Andras Bacsai 2025-10-24 14:52:26 +02:00 committed by GitHub
commit 7a52fd4506
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 62 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/Livewire/Project/New/Select.php
View file

File diff suppressed because one or more lines are too long

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

@ -4,7 +4,9 @@
'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">
{{ $logo }} <div class="w-[4.5rem] h-[4.5rem] flex items-center justify-center text-black dark:text-white shrink-0">
{{ $logo }}
</div>
<div class="flex flex-col pl-2 "> <div class="flex flex-col pl-2 ">
<div class="dark:text-white text-md"> <div class="dark:text-white text-md">
{{ $title }} {{ $title }}

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

@ -74,13 +74,13 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-1">
: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> <x-slot:description>
<span x-html="window.sanitizeHTML(application.description)"></span> <span x-html="window.sanitizeHTML(application.description)"></span>
</x-slot> </x-slot>
<x-slot:logo> <x-slot:logo>
<img class="w-[4.5rem] aspect-square h-[4.5rem] p-2 transition-all duration-200 dark:opacity-30 grayscale group-hover:grayscale-0 group-hover:opacity-100 dark:bg-white/10 bg-black/10" <img class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
:src="application.logo"> :src="application.logo">
</x-slot:logo> </x-slot:logo>
</x-resource-view> </x-resource-view>
</div> </div>
</template> </template>
@ -93,10 +93,10 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
: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-[4.5rem] aspect-square h-[4.5rem] p-2 transition-all duration-200 dark:opacity-30 grayscale group-hover:grayscale-0 group-hover:opacity-100 dark:bg-white/10 bg-black/10 " 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> </div>
</template> </template>
@ -109,12 +109,12 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
: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="database.name"></span></x-slot> <x-slot:title><span x-text="database.name"></span></x-slot>
<x-slot:description><span x-text="database.description"></span></x-slot> <x-slot:description><span x-text="database.description"></span></x-slot>
<x-slot:logo> <x-slot:logo>
<span x-show="database.logo"> <span x-show="database.logo">
<span x-html="database.logo"></span> <span x-html="database.logo"></span>
</span> </span>
</x-slot> </x-slot>
</x-resource-view> </x-resource-view>
</div> </div>
</template> </template>
@ -141,33 +141,33 @@ class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
<template x-if="service.name"> <template x-if="service.name">
<span x-text="service.name"></span> <span x-text="service.name"></span>
</template> </template>
</x-slot> </x-slot>
<x-slot:description> <x-slot:description>
<template x-if="service.slogan"> <template x-if="service.slogan">
<span x-text="service.slogan"></span> <span x-text="service.slogan"></span>
</template> </template>
</x-slot> </x-slot>
<x-slot:logo> <x-slot:logo>
<template x-if="service.logo"> <template x-if="service.logo">
<img class="w-[4.5rem] aspect-square h-[4.5rem] p-2 transition-all duration-200 dark:opacity-30 grayscale group-hover:grayscale-0 group-hover:opacity-100 dark:bg-white/10 bg-black/10" <img class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
:src='service.logo' :src='service.logo'
x-on:error.window="$event.target.src = service.logo_github_url" x-on:error.window="$event.target.src = service.logo_github_url"
onerror="this.onerror=null; this.src=this.getAttribute('data-fallback');" onerror="this.onerror=null; this.src=this.getAttribute('data-fallback');"
x-on:error="$event.target.src = '/coolify-logo.svg'" x-on:error="$event.target.src = '/coolify-logo.svg'"
:data-fallback='service.logo_github_url' /> :data-fallback='service.logo_github_url' />
</template> </template>
</x-slot:logo> </x-slot:logo>
<x-slot:documentation> <x-slot:documentation>
<template x-if="service.documentation"> <template x-if="service.documentation">
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-coolgray-200 hover:no-underline dark:group-hover:text-white text-neutral-600" <a class="p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-coolgray-200 hover:no-underline dark:group-hover:text-white text-neutral-600"
onclick="event.stopPropagation()" :href="service.documentation" onclick="event.stopPropagation()" :href="service.documentation"
target="_blank"> target="_blank">
Docs Docs
</a> </a>
</div> </div>
</template> </template>
</x-slot:documentation> </x-slot:documentation>
</x-resource-view> </x-resource-view>
</div> </div>
</template> </template>
@ -301,14 +301,14 @@ function searchResources() {
{{ $server->name }} {{ $server->name }}
</div> </div>
<div class="box-description"> <div class="box-description">
{{ $server->description }}</div> {{ $server->description }}
</div>
</div> </div>
</div> </div>
@empty @empty
<div> <div>
<div>No validated & reachable servers found. <a class="underline dark:text-white" <div>No validated & reachable servers found. <a class="underline dark:text-white" href="/servers">
href="/servers">
Go to servers page Go to servers page
</a></div> </a></div>
</div> </div>
@ -368,8 +368,7 @@ function searchResources() {
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-6000" <a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-6000"
onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/" onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/" target="_blank">
target="_blank">
Documentation Documentation
</a> </a>
</div> </div>
@ -387,8 +386,7 @@ function searchResources() {
<div class="flex-1"></div> <div class="flex-1"></div>
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600" <a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
onclick="event.stopPropagation()" href="https://github.com/supabase/postgres" onclick="event.stopPropagation()" href="https://github.com/supabase/postgres" target="_blank">
target="_blank">
Documentation Documentation
</a> </a>
</div> </div>
@ -426,8 +424,7 @@ function searchResources() {
<div class="flex items-center px-2" title="Read the documentation."> <div class="flex items-center px-2" title="Read the documentation.">
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600" <a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector" onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector" target="_blank">
target="_blank">
Documentation Documentation
</a> </a>
</div> </div>