diff options
| author | Fuwn <[email protected]> | 2024-04-26 17:00:07 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-26 17:00:07 -0700 |
| commit | 416127fa5af2b627373f6f5577195007a6b48354 (patch) | |
| tree | 1bba4731f4fe28d522e0a0019f3f4a28dfff158c /src | |
| parent | feat(schedule): use grid (diff) | |
| download | due.moe-416127fa5af2b627373f6f5577195007a6b48354.tar.xz due.moe-416127fa5af2b627373f6f5577195007a6b48354.zip | |
feat(schedule): better tooltip
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Schedule/Days.svelte | 93 | ||||
| -rw-r--r-- | src/routes/schedule/+page.svelte | 6 |
2 files changed, 65 insertions, 34 deletions
diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte index de749d8c..c0cacb0e 100644 --- a/src/lib/Schedule/Days.svelte +++ b/src/lib/Schedule/Days.svelte @@ -9,6 +9,7 @@ import CoverBypass from './CoverBypass.svelte'; import '$lib/List/covers.css'; import ParallaxImage from '$lib/Image/ParallaxImage.svelte'; + import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte'; export let subsPlease: SubsPlease; export let scheduledMedia: Partial<Media[]>; @@ -69,7 +70,7 @@ }; </script> -{#each Object.entries(shiftSubsPleaseSchedule(subsPlease.schedule)) as [day, scheduleEntry]} +{#each Object.entries(shiftSubsPleaseSchedule(subsPlease.schedule)) as [day, scheduleEntry], dayIndex} <details open class="list" @@ -79,42 +80,50 @@ {#if !$settings.displayScheduleListMode && !forceListMode} <div class="covers"> - {#each Object.values(scheduleEntry) as entry} + {#each Object.values(scheduleEntry) as entry, entryIndex} {@const media = associateMedia(scheduledMedia, entry.title)} - <div class="cover-card"> - <a - href={outboundLink( - media ? media : null, - 'anime', - $settings.displayOutboundLinksTo, - media === null, - entry.title - )} - target="_blank" + <div class="cover-card" id={`cover-${dayIndex}-${entryIndex}`}> + <LinkedTooltip + content={media ? media.title.english || media.title.romaji : entry.title} + pin={`cover-${dayIndex}-${entryIndex}`} > - <div class="cover-card-image"> - <ParallaxImage - source={media - ? media.coverImage.extraLarge - : `https://subsplease.org${entry.image_url}`} - limit={12.5} - alternativeText="Cover" - /> + <a + href={outboundLink( + media ? media : null, + 'anime', + $settings.displayOutboundLinksTo, + media === null, + entry.title + )} + target="_blank" + > + <div class="cover-card-image"> + <ParallaxImage + source={media + ? media.coverImage.extraLarge + : `https://subsplease.org${entry.image_url}`} + limit={12.5} + alternativeText="Cover" + /> + </div> + </a> + + <div class="cover-title"> + <div class="cover-title-element"> + <CoverBypass {media} {entry} cover={false} showTooltip={false} /> + </div> + + <span class:countdown={$settings.displayCountdownRightAligned}> + {#if media && media.nextAiringEpisode} + <span class="opaque"> + {episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at + </span> + {/if} + {entry.time} + </span> </div> - </a> - - <div class="cover-title"> - <CoverBypass {media} {entry} cover={false} showTooltip={false} /> - <span class:countdown={$settings.displayCountdownRightAligned}> - {#if media && media.nextAiringEpisode} - <span class="opaque"> - {episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at - </span> - {/if} - {entry.time} - </span> - </div> + </LinkedTooltip> </div> {/each} </div> @@ -145,7 +154,7 @@ <style> .covers { - grid-template-columns: repeat(auto-fill, minmax(11.5%, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(12%, 1fr)); } .countdown { @@ -162,4 +171,20 @@ break-inside: avoid-column; page-break-inside: avoid; } + + @media (max-width: 800px) { + .cover-title { + display: none; + } + + .cover-card-image { + margin-bottom: 0em; + } + } + + @media (max-width: 1600px) { + .cover-title { + display: none; + } + } </style> diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte index 0617f472..c1447e5f 100644 --- a/src/routes/schedule/+page.svelte +++ b/src/routes/schedule/+page.svelte @@ -82,4 +82,10 @@ grid-template-columns: repeat(auto-fill, minmax(35%, 1fr)); gap: 0.5em; } + + @media (max-width: 800px) { + .schedule-container { + grid-template-columns: 1fr !important; + } + } </style> |