diff options
Diffstat (limited to 'src/lib/Tools/Schedule/Crunchyroll.svelte')
| -rw-r--r-- | src/lib/Tools/Schedule/Crunchyroll.svelte | 82 |
1 files changed, 48 insertions, 34 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> |