melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: widen watch page layout

Browse Source
This commit is contained in:
mkelvers
2026-04-18 18:43:55 +02:00
parent a629e81dd8
commit c74c85b940
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
internal/templates/watch.templ
View File

@@ -45,9 +45,10 @@ type SkipSegment struct {
templ WatchPage(anime jikan.Anime, data WatchPageData) { templ WatchPage(anime jikan.Anime, data WatchPageData) {
@Layout(fmt.Sprintf("%s - episode %s", anime.DisplayTitle(), data.CurrentEpisode), true) { @Layout(fmt.Sprintf("%s - episode %s", anime.DisplayTitle(), data.CurrentEpisode), true) {
<div class="flex flex-col lg:flex-row gap-5 max-w-full"> <div class="relative left-1/2 w-screen max-w-none -translate-x-1/2 px-4 lg:px-6 2xl:px-8">
<div class="mx-auto grid w-full max-w-[1850px] gap-5 lg:grid-cols-[280px_minmax(0,1fr)] 2xl:grid-cols-[300px_minmax(0,1fr)_300px]">
<!-- Left sidebar: Episodes --> <!-- Left sidebar: Episodes -->
<aside class="w-full lg:w-[320px] shrink-0"> <aside class="w-full shrink-0">
<div class="flex flex-col h-full lg:max-h-[800px]"> <div class="flex flex-col h-full lg:max-h-[800px]">
<div class="p-3 flex items-center justify-between"> <div class="p-3 flex items-center justify-between">
<h3 class="text-sm font-semibold tracking-wide text-(--text)">Episodes</h3> <h3 class="text-sm font-semibold tracking-wide text-(--text)">Episodes</h3>
@@ -97,7 +98,7 @@ templ WatchPage(anime jikan.Anime, data WatchPageData) {
</div> </div>
<!-- Right sidebar: Anime Info --> <!-- Right sidebar: Anime Info -->
<aside class="w-full lg:w-[320px] shrink-0 flex flex-col gap-4"> <aside class="w-full shrink-0 flex flex-col gap-4 lg:col-span-2 lg:max-w-xl 2xl:col-span-1 2xl:max-w-none">
<img src={ anime.Images.Webp.LargeImageURL } alt={ anime.Title } class="w-full object-cover shadow-lg" /> <img src={ anime.Images.Webp.LargeImageURL } alt={ anime.Title } class="w-full object-cover shadow-lg" />
<div> <div>
<h2 class="text-xl font-bold text-(--text)">{ anime.DisplayTitle() }</h2> <h2 class="text-xl font-bold text-(--text)">{ anime.DisplayTitle() }</h2>
@@ -128,6 +129,7 @@ templ WatchPage(anime jikan.Anime, data WatchPageData) {
</a> </a>
</aside> </aside>
</div> </div>
</div>
} }
} }