From d0951bf7c1729973c5c422d0ab88baefe6b74e87 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 26 Feb 2025 14:57:17 +0100
Subject: frontend: Show URL in a textual representation in the details sidebar
Instead of hiding the URL behind a button with an icon, make it more
prominent as a full item in the details grid. The user can then interact
with it more directly.
---
frontend/src/lib/tabs/ComicDetails.svelte | 24 +++++++++++-------------
1 file changed, 11 insertions(+), 13 deletions(-)
(limited to 'frontend/src/lib')
diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte
index 887b7a5..89eb053 100644
--- a/frontend/src/lib/tabs/ComicDetails.svelte
+++ b/frontend/src/lib/tabs/ComicDetails.svelte
@@ -1,5 +1,5 @@
<script lang="ts">
- import type { ComicFilter, FullComicFragment } from '$gql/graphql';
+ import { type ComicFilter, type FullComicFragment } from '$gql/graphql';
import { CategoryLabel, CensorshipLabel, LanguageLabel, RatingLabel } from '$lib/Enums';
import { href } from '$lib/Navigation';
import { formatListSize, joinText } from '$lib/Utils';
@@ -27,18 +27,6 @@
<div class="flex flex-col gap-4 text-sm">
<Header {title}>
- {#if comic.url}
- <a
- href={comic.url}
- target="_blank"
- rel="noreferrer"
- class="btn-slate"
- title="Open URL"
- aria-label="Open URL"
- >
- <span class="icon-base icon-[material-symbols--link]"></span>
- </a>
- {/if}
<a
href={`/archives/${comic.archive.id}`}
class="btn-slate"
@@ -85,6 +73,16 @@
</Section>
</div>
+ {#if comic.url}
+ <Section title="URL">
+ <a
+ class="ellipsis-nowrap transition-colors hover:text-white hover:underline"
+ rel="noreferrer"
+ href={comic.url}>{comic.url}</a
+ >
+ </Section>
+ {/if}
+
{#if comic.artists.length}
<Section title="Artists">
{#each comic.artists as { id, name } (id)}
--
cgit v1.2.3-2-gb3c3