diff options
| author | Fuwn <[email protected]> | 2024-01-04 10:48:00 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-04 10:48:00 -0800 |
| commit | e5c1064fff4046c7f6fc63ae959dbf3c71ddb368 (patch) | |
| tree | 2001f3499c98534f4b6ffa829b9baef38e020733 /src/lib/Tools | |
| parent | fix(schedule): remove empty days (diff) | |
| download | due.moe-e5c1064fff4046c7f6fc63ae959dbf3c71ddb368.tar.xz due.moe-e5c1064fff4046c7f6fc63ae959dbf3c71ddb368.zip | |
feat(schedule): better crunchyroll schedule
Diffstat (limited to 'src/lib/Tools')
| -rw-r--r-- | src/lib/Tools/Schedule/Crunchyroll.svelte | 82 | ||||
| -rw-r--r-- | src/lib/Tools/Schedule/Tool.svelte | 7 |
2 files changed, 49 insertions, 40 deletions
diff --git a/src/lib/Tools/Schedule/Crunchyroll.svelte b/src/lib/Tools/Schedule/Crunchyroll.svelte index efa10a2e..5c6d01ab 100644 --- a/src/lib/Tools/Schedule/Crunchyroll.svelte +++ b/src/lib/Tools/Schedule/Crunchyroll.svelte @@ -28,6 +28,8 @@ (media) => media.day === 'soon' ); + $: columnCount = Math.ceil(Object.keys(days).length / 2); + const ordinalSuffix = (i: number) => { const j = i % 10; const k = i % 100; @@ -40,42 +42,54 @@ }; </script> -<ol> +<p /> + +<p>Crunchyroll Releases Calender</p> + +<div id="list-container" style={`column-count: ${columnCount};`}> {#each Object.values(days) as day} {@const date = new Date(day[0].year, day[0].month - 1, day[0].day)} - <p> - <li> - {date.toLocaleString('default', { month: 'long' })} - {ordinalSuffix(day[0].day)}, {day[0].year} - <ul> - {#each day as media} - <li>{media.title}</li> - {/each} - </ul> - </li> - </p> - {/each} - - <p> - <li> - Coming soon - <ul> - {#each soon as media} - <li>{media.title}</li> - {/each} - </ul> - </li> - </p> - - <p> - <li> - Continuing from previous season - <ul> - {#each continuing as media} + <div class="card day"> + {date.toLocaleString('default', { month: 'long' })} + {ordinalSuffix(day[0].day)}, {day[0].year} + <ol> + {#each day as media} <li>{media.title}</li> {/each} - </ul> - </li> - </p> -</ol> + </ol> + </div> + + <p /> + {/each} + + <div class="card day"> + Coming soon + <ol> + {#each soon as media} + <li>{media.title}</li> + {/each} + </ol> + </div> + + <div class="card day"> + Continuing from previous season + <ol> + {#each continuing as media} + <li>{media.title}</li> + {/each} + </ol> + </div> +</div> + +<style> + #list-container { + column-width: 250px; + /* break-inside: avoid-column; */ + } + + .day { + overflow-y: auto; + break-inside: avoid-column; + } +</style> diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte index f000bfbc..fd619fd8 100644 --- a/src/lib/Tools/Schedule/Tool.svelte +++ b/src/lib/Tools/Schedule/Tool.svelte @@ -160,7 +160,6 @@ <span class:countdown={$settings.displayCountdownRightAligned}> {#if media && media.nextAiringEpisode} <span style="opacity: 50%;"> - {media.nextAiringEpisode?.episode > 1 ? media.nextAiringEpisode?.episode - 1 : media.nextAiringEpisode?.episode}{media.episodes @@ -193,11 +192,7 @@ <p /> -<details> - <summary>Crunchyroll Simulcast Release Calender</summary> - - <Crunchyroll /> -</details> +<Crunchyroll /> <HoverCover {hoveredItem} {hoveredMedia} {imageStyle} {hovering} width={300} /> |