diff options
| author | Fuwn <[email protected]> | 2024-04-16 20:04:28 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-16 20:04:28 -0700 |
| commit | f69452edf7f0491adbf6a8cde5415cce8c09bb5d (patch) | |
| tree | 34a7ddab31ff7f16ee7253fce5b7d6423747332d /src | |
| parent | feat(anime): use sliding tooltip for list mode (diff) | |
| download | due.moe-f69452edf7f0491adbf6a8cde5415cce8c09bb5d.tar.xz due.moe-f69452edf7f0491adbf6a8cde5415cce8c09bb5d.zip | |
feat(tooltip): better list implementation
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 21 | ||||
| -rw-r--r-- | src/lib/List/Anime/Tooltip.svelte | 40 | ||||
| -rw-r--r-- | src/lib/List/Manga/CleanMangaList.svelte | 1 |
3 files changed, 37 insertions, 25 deletions
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte index 8e273667..426fc4da 100644 --- a/src/lib/List/Anime/CleanAnimeList.svelte +++ b/src/lib/List/Anime/CleanAnimeList.svelte @@ -149,13 +149,14 @@ {@const progress = (anime.mediaListEntry || { progress: 0 }).progress} {#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1} - <Tooltip - content={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`} - id={`anime-${anime.id}`} - pin={`anime-${anime.id}`} - > - <li class="entry"> - <span class="content"> + <li class="entry"> + <span class="content"> + <Tooltip + content={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`} + id={`anime-${anime.id}`} + pin={`anime-${anime.id}`} + pinPosition="right" + > <a href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)} target="_blank" @@ -216,9 +217,9 @@ <AiringTime originalAnime={anime} {subsPlease} upcoming={true} /> </span> {/if} - </span> - </li> - </Tooltip> + </Tooltip> + </span> + </li> {/if} {/each} </ul> diff --git a/src/lib/List/Anime/Tooltip.svelte b/src/lib/List/Anime/Tooltip.svelte index ae5cd410..b9884965 100644 --- a/src/lib/List/Anime/Tooltip.svelte +++ b/src/lib/List/Anime/Tooltip.svelte @@ -45,25 +45,35 @@ let top = rect.top - tooltipHeight - offset; let left = rect.left + rect.width / 2 - tooltipWidth / 2; - // pin pos - if (pinPosition === 'top') { - top = rect.top - tooltipHeight - offset; - left = rect.left + rect.width / 2 - tooltipWidth / 2; - } else if (pinPosition === 'bottom') { - top = rect.top + rect.height + offset; - left = rect.left + rect.width / 2 - tooltipWidth / 2; - } else if (pinPosition === 'left') { - top = rect.top + rect.height / 2 - tooltipHeight / 2; - left = rect.left - tooltipWidth - offset; - } else if (pinPosition === 'right') { - top = rect.top + rect.height / 2 - tooltipHeight / 2; - left = rect.left + rect.width + offset; + switch (pinPosition) { + case 'top': + top = rect.top - tooltipHeight - offset; + left = rect.left + rect.width / 2 - tooltipWidth / 2; + + break; + case 'bottom': + top = rect.top + rect.height + offset; + left = rect.left + rect.width / 2 - tooltipWidth / 2; + + break; + case 'left': + top = rect.top + rect.height / 2 - tooltipHeight / 2; + left = rect.left - tooltipWidth - offset; + + break; + case 'right': + top = rect.top + rect.height / 2 - tooltipHeight / 2; + left = rect.left + rect.width + offset; + + break; } if (left < 0) left = offset; if (left + tooltipWidth > window.innerWidth) left = window.innerWidth - tooltipWidth - offset; if (top < 0) top = rect.top + rect.height + offset; + if (top + tooltipHeight > window.innerHeight) + top = window.innerHeight - tooltipHeight - offset; tooltipPosition.set({ x: left, @@ -152,7 +162,7 @@ }; </script> -<div +<span {id} data-tooltippin={pin} on:mouseenter={handleMouseEnter} @@ -161,7 +171,7 @@ role="tooltip" > <slot /> -</div> +</span> {#if tooltipDiv} <div diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte index 4fd18bf4..99747e32 100644 --- a/src/lib/List/Manga/CleanMangaList.svelte +++ b/src/lib/List/Manga/CleanMangaList.svelte @@ -108,6 +108,7 @@ id={`manga-${manga.id}`} content={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`} pin={`manga-${manga.id}`} + pinPosition="left" > <a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank"> <span |