Merge pull request #6992 from coollabsio/andrasbacsai/service-logos-color
feat: display service logos in original colors with consistent sizing
This commit is contained in:
Andras Bacsai
GitHub
commit
7a52fd4506
3 changed files with 62 additions and 63 deletions
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,9 @@
|
|||
'hover:border-l-red-500 cursor-not-allowed' => $upgrade,
|
||||
])>
|
||||
<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="dark:text-white text-md">
|
||||
{{ $title }}
|
||||
|
|
|
|||
|
|
@ -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 }">
|
||||
<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-[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"
|
||||
:src="application.logo">
|
||||
</x-slot:logo>
|
||||
<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>
|
||||
|
|
@ -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 }">
|
||||
<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-[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 "
|
||||
:src="application.logo"></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>
|
||||
|
|
@ -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 }">
|
||||
<x-resource-view>
|
||||
<x-slot:title><span x-text="database.name"></span></x-slot>
|
||||
<x-slot:description><span x-text="database.description"></span></x-slot>
|
||||
<x-slot:logo>
|
||||
<span x-show="database.logo">
|
||||
<span x-html="database.logo"></span>
|
||||
</span>
|
||||
</x-slot>
|
||||
<x-slot:description><span x-text="database.description"></span></x-slot>
|
||||
<x-slot:logo>
|
||||
<span x-show="database.logo">
|
||||
<span x-html="database.logo"></span>
|
||||
</span>
|
||||
</x-slot>
|
||||
</x-resource-view>
|
||||
</div>
|
||||
</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">
|
||||
<span x-text="service.name"></span>
|
||||
</template>
|
||||
</x-slot>
|
||||
<x-slot:description>
|
||||
<template x-if="service.slogan">
|
||||
<span x-text="service.slogan"></span>
|
||||
</template>
|
||||
</x-slot>
|
||||
<x-slot: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"
|
||||
:src='service.logo'
|
||||
x-on:error.window="$event.target.src = service.logo_github_url"
|
||||
onerror="this.onerror=null; this.src=this.getAttribute('data-fallback');"
|
||||
x-on:error="$event.target.src = '/coolify-logo.svg'"
|
||||
:data-fallback='service.logo_github_url' />
|
||||
</template>
|
||||
</x-slot:logo>
|
||||
<x-slot:documentation>
|
||||
<template x-if="service.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"
|
||||
onclick="event.stopPropagation()" :href="service.documentation"
|
||||
target="_blank">
|
||||
Docs
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</x-slot:documentation>
|
||||
</x-slot>
|
||||
<x-slot:description>
|
||||
<template x-if="service.slogan">
|
||||
<span x-text="service.slogan"></span>
|
||||
</template>
|
||||
</x-slot>
|
||||
<x-slot:logo>
|
||||
<template x-if="service.logo">
|
||||
<img class="w-full h-full p-2 transition-all duration-200 dark:bg-white/10 bg-black/10 object-contain"
|
||||
:src='service.logo'
|
||||
x-on:error.window="$event.target.src = service.logo_github_url"
|
||||
onerror="this.onerror=null; this.src=this.getAttribute('data-fallback');"
|
||||
x-on:error="$event.target.src = '/coolify-logo.svg'"
|
||||
:data-fallback='service.logo_github_url' />
|
||||
</template>
|
||||
</x-slot:logo>
|
||||
<x-slot:documentation>
|
||||
<template x-if="service.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"
|
||||
onclick="event.stopPropagation()" :href="service.documentation"
|
||||
target="_blank">
|
||||
Docs
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</x-slot:documentation>
|
||||
</x-resource-view>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -301,14 +301,14 @@ function searchResources() {
|
|||
{{ $server->name }}
|
||||
</div>
|
||||
<div class="box-description">
|
||||
{{ $server->description }}</div>
|
||||
{{ $server->description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div>
|
||||
|
||||
<div>No validated & reachable servers found. <a class="underline dark:text-white"
|
||||
href="/servers">
|
||||
<div>No validated & reachable servers found. <a class="underline dark:text-white" href="/servers">
|
||||
Go to servers page
|
||||
</a></div>
|
||||
</div>
|
||||
|
|
@ -368,8 +368,7 @@ function searchResources() {
|
|||
|
||||
<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"
|
||||
onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/"
|
||||
target="_blank">
|
||||
onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/" target="_blank">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -387,8 +386,7 @@ function searchResources() {
|
|||
<div class="flex-1"></div>
|
||||
<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"
|
||||
onclick="event.stopPropagation()" href="https://github.com/supabase/postgres"
|
||||
target="_blank">
|
||||
onclick="event.stopPropagation()" href="https://github.com/supabase/postgres" target="_blank">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -426,8 +424,7 @@ function searchResources() {
|
|||
|
||||
<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"
|
||||
onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector"
|
||||
target="_blank">
|
||||
onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector" target="_blank">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -442,4 +439,4 @@ function searchResources() {
|
|||
<x-forms.button type="submit">Add Database</x-forms.button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue