diff options
| -rw-r--r-- | src/app.css | 4 | ||||
| -rw-r--r-- | src/lib/Tools/Schedule/Crunchyroll.svelte | 82 | ||||
| -rw-r--r-- | src/lib/Tools/Schedule/Tool.svelte | 7 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 8 |
4 files changed, 53 insertions, 48 deletions
diff --git a/src/app.css b/src/app.css index 46e37670..07c1c780 100644 --- a/src/app.css +++ b/src/app.css @@ -151,3 +151,7 @@ code { .card-small { padding: 0.5rem; } + +.card-clear { + background-color: transparent; +} 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} /> diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2f0f6140..738c81f7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -110,10 +110,6 @@ width: 100%; } - #separator { - display: none; - } - @media (max-width: 640px) { #hover-header { opacity: 1; @@ -121,10 +117,6 @@ padding: 0; /* font-size: 5vw; */ } - - #separator { - display: block; - } } #hover-header:hover { |