Style PostgreSQL type docs links to match service list pattern
Replace text "Documentation" links with SVG icons positioned in top-right corner, matching the established design pattern used in the service list. Update all four PostgreSQL type options: PostgreSQL 17, Supabase, PostGIS, and PGVector.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
parent
d6bd0941e7
commit
ddb7437a63
1 changed files with 44 additions and 38 deletions
|
|
@ -450,7 +450,7 @@ function searchResources() {
|
||||||
PostgreSQL
|
PostgreSQL
|
||||||
17 (default).</div>
|
17 (default).</div>
|
||||||
<div class="flex flex-col gap-6 pt-8">
|
<div class="flex flex-col gap-6 pt-8">
|
||||||
<div class="gap-2 coolbox group flex"
|
<div class="gap-2 coolbox group flex relative"
|
||||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
|
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
|
||||||
x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:17-alpine'))"
|
x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgres:17-alpine'))"
|
||||||
:disabled="selecting">
|
:disabled="selecting">
|
||||||
|
|
@ -460,17 +460,18 @@ function searchResources() {
|
||||||
PostgreSQL is a powerful, open-source object-relational database system (no extensions).
|
PostgreSQL is a powerful, open-source object-relational database system (no extensions).
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1"></div>
|
<a href="https://hub.docker.com/_/postgres/" target="_blank"
|
||||||
|
@click.stop
|
||||||
<div class="flex items-center px-2" title="Read the documentation.">
|
class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
|
||||||
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-6000"
|
title="View documentation">
|
||||||
onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/"
|
<svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
|
||||||
target="_blank">
|
stroke="currentColor" viewBox="0 0 24 24">
|
||||||
Documentation
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
</a>
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
</div>
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="gap-2 coolbox group flex"
|
<div class="gap-2 coolbox group flex relative"
|
||||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
|
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
|
||||||
x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('supabase/postgres:17.4.1.032'))"
|
x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('supabase/postgres:17.4.1.032'))"
|
||||||
:disabled="selecting">
|
:disabled="selecting">
|
||||||
|
|
@ -480,16 +481,18 @@ function searchResources() {
|
||||||
Supabase is a modern, open-source alternative to PostgreSQL with lots of extensions.
|
Supabase is a modern, open-source alternative to PostgreSQL with lots of extensions.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1"></div>
|
<a href="https://github.com/supabase/postgres" target="_blank"
|
||||||
<div class="flex items-center px-2" title="Read the documentation.">
|
@click.stop
|
||||||
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
|
class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
|
||||||
onclick="event.stopPropagation()" href="https://github.com/supabase/postgres"
|
title="View documentation">
|
||||||
target="_blank">
|
<svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
|
||||||
Documentation
|
stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</a>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
</div>
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="gap-2 coolbox group flex"
|
<div class="gap-2 coolbox group flex relative"
|
||||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
|
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
|
||||||
x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgis/postgis:17-3.5-alpine'))"
|
x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('postgis/postgis:17-3.5-alpine'))"
|
||||||
:disabled="selecting">
|
:disabled="selecting">
|
||||||
|
|
@ -499,16 +502,18 @@ function searchResources() {
|
||||||
PostGIS is a PostgreSQL extension for geographic objects.
|
PostGIS is a PostgreSQL extension for geographic objects.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1"></div>
|
<a href="https://github.com/postgis/docker-postgis" target="_blank"
|
||||||
<div class="flex items-center px-2" title="Read the documentation.">
|
@click.stop
|
||||||
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
|
class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
|
||||||
onclick="event.stopPropagation()" href="https://github.com/postgis/docker-postgis"
|
title="View documentation">
|
||||||
target="_blank">
|
<svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
|
||||||
Documentation
|
stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</a>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
</div>
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="gap-2 coolbox group flex"
|
<div class="gap-2 coolbox group flex relative"
|
||||||
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
|
:class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }"
|
||||||
x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('pgvector/pgvector:pg17'))"
|
x-on:click="!selecting && (selecting = true, $wire.setPostgresqlType('pgvector/pgvector:pg17'))"
|
||||||
:disabled="selecting">
|
:disabled="selecting">
|
||||||
|
|
@ -518,15 +523,16 @@ function searchResources() {
|
||||||
PGVector is a PostgreSQL extension for vector data types.
|
PGVector is a PostgreSQL extension for vector data types.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1"></div>
|
<a href="https://github.com/pgvector/pgvector" target="_blank"
|
||||||
|
@click.stop
|
||||||
<div class="flex items-center px-2" title="Read the documentation.">
|
class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
|
||||||
<a class="p-2 hover:underline dark:group-hover:text-white dark:text-white text-neutral-600"
|
title="View documentation">
|
||||||
onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector"
|
<svg class="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none"
|
||||||
target="_blank">
|
stroke="currentColor" viewBox="0 0 24 24">
|
||||||
Documentation
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
</a>
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
</div>
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue