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

style: cleanup anime details and sidebar

Browse Source
This commit is contained in:
mkelvers
2026-05-04 20:00:15 +02:00
parent 6905257928
commit 702557edb9
1 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
templates/anime.gohtml
View File

@@ -43,13 +43,11 @@
{{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status}} {{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status}}
<div class="mt-8 flex flex-col gap-12 lg:flex-row"> <div class="mt-12 flex flex-col gap-12 lg:flex-row">
<div class="grow lg:max-w-3xl"> <div class="grow lg:max-w-3xl">
<section> <section>
<h2 class="mb-4 text-xs font-normal text-neutral-500 uppercase tracking-widest">Synopsis</h2> <h2 class="mb-4 text-lg font-normal text-neutral-300">Synopsis</h2>
<p id="synopsis-container" class="text-neutral-300 text-base leading-relaxed whitespace-pre-line line-clamp-6 md:line-clamp-none"> <p id="synopsis-container" class="text-neutral-400 text-base leading-relaxed line-clamp-6 md:line-clamp-none">{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}</p>
{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}
</p>
{{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}} {{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}}
<button id="synopsis-toggle" class="mt-2 text-sm font-normal text-neutral-400 transition-colors hover:text-white md:hidden" onclick=" <button id="synopsis-toggle" class="mt-2 text-sm font-normal text-neutral-400 transition-colors hover:text-white md:hidden" onclick="
const container = document.getElementById('synopsis-container'); const container = document.getElementById('synopsis-container');
@@ -68,50 +66,50 @@
</section> </section>
{{if $anime.Genres}} {{if $anime.Genres}}
<div class="mt-8 flex flex-wrap gap-2"> <div class="mt-10 flex flex-wrap gap-2">
{{range $anime.Genres}} {{range $anime.Genres}}
<span class="bg-neutral-900 px-3 py-1 text-xs font-normal text-neutral-400 ring-1 ring-white/5 transition-colors hover:text-neutral-300 hover:ring-white/10">{{.Name}}</span> <span class="bg-neutral-900/50 px-3 py-1 text-xs font-normal text-neutral-400 ring-1 ring-white/5 transition-colors hover:text-neutral-300 hover:ring-white/10">{{.Name}}</span>
{{end}} {{end}}
</div> </div>
{{end}} {{end}}
</div> </div>
<aside class="flex shrink-0 flex-col gap-10 lg:w-64"> <aside class="flex shrink-0 flex-col lg:w-72">
<section> <div class="bg-white/5 p-6 ring-1 ring-white/10">
<h3 class="mb-6 text-xs font-normal uppercase tracking-widest text-neutral-500">Information</h3> <h3 class="mb-6 text-base font-normal text-neutral-300">Information</h3>
<div class="flex flex-col gap-6 text-sm"> <div class="flex flex-col gap-6 text-sm">
{{if $anime.Studios}} {{if $anime.Studios}}
<div> <div>
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Studios</dt> <dt class="mb-1 text-xs font-normal text-neutral-500">Studios</dt>
<dd class="text-neutral-300">{{range $i, $s := $anime.Studios}}{{if $i}}, {{end}}{{$s.Name}}{{end}}</dd> <dd class="text-neutral-300">{{range $i, $s := $anime.Studios}}{{if $i}}, {{end}}{{$s.Name}}{{end}}</dd>
</div> </div>
{{end}} {{end}}
{{if $anime.Producers}} {{if $anime.Producers}}
<div> <div>
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Producers</dt> <dt class="mb-1 text-xs font-normal text-neutral-500">Producers</dt>
<dd class="text-neutral-400 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd> <dd class="text-neutral-400 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
</div> </div>
{{end}} {{end}}
{{if $anime.Duration}} {{if $anime.Duration}}
<div> <div>
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Duration</dt> <dt class="mb-1 text-xs font-normal text-neutral-500">Duration</dt>
<dd class="text-neutral-300">{{$anime.Duration}}</dd> <dd class="text-neutral-300">{{$anime.Duration}}</dd>
</div> </div>
{{end}} {{end}}
{{if $anime.Rank}} {{if $anime.Rank}}
<div> <div>
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Rank</dt> <dt class="mb-1 text-xs font-normal text-neutral-500">Rank</dt>
<dd class="text-neutral-300">#{{$anime.Rank}}</dd> <dd class="text-neutral-300">#{{$anime.Rank}}</dd>
</div> </div>
{{end}} {{end}}
{{if $anime.ScoredByFormatted}} {{if $anime.ScoredByFormatted}}
<div> <div>
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Scored By</dt> <dt class="mb-1 text-xs font-normal text-neutral-500">Scored By</dt>
<dd class="text-neutral-300">{{$anime.ScoredByFormatted}} users</dd> <dd class="text-neutral-300">{{$anime.ScoredByFormatted}} users</dd>
</div> </div>
{{end}} {{end}}
</div> </div>
</section> </div>
</aside> </aside>
</div> </div>
</div> </div>