fix: standardize anime detail page and review styles
This commit is contained in:
@@ -98,7 +98,7 @@
|
||||
<div class="flex w-full flex-col gap-10 lg:pr-80">
|
||||
<div class="flex flex-col gap-8 md:flex-row lg:gap-12">
|
||||
<div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
|
||||
<div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-[var(--shadow-card)]">
|
||||
<div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-[var(--shadow-card)] ring-1 ring-black/10">
|
||||
{{$imageUrl := "https://placehold.co/400x600?text=No+Image"}}
|
||||
{{if $anime.Images.Webp.LargeImageURL}}
|
||||
{{$imageUrl = $anime.Images.Webp.LargeImageURL}}
|
||||
@@ -111,7 +111,7 @@
|
||||
|
||||
<div class="flex grow flex-col">
|
||||
<div class="mb-4">
|
||||
<h1 class="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-2xl font-normal text-foreground md:text-4xl">
|
||||
<h1 class="text-2xl font-normal tracking-[-0.02em] leading-[1.15] text-foreground md:text-4xl">
|
||||
{{$anime.DisplayTitle}}
|
||||
</h1>
|
||||
{{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
|
||||
@@ -122,7 +122,7 @@
|
||||
<div class="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-foreground-muted">
|
||||
{{if $anime.Score}}
|
||||
<div class="flex items-center gap-1.5 font-medium text-foreground">
|
||||
<svg class="h-3.5 w-3.5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="h-3.5 w-3.5 fill-current text-accent" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
{{$anime.Score}}
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -137,12 +137,14 @@
|
||||
{{if $anime.ShortRating}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.ShortRating}}</span>{{end}}
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
{{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status "ContinueWatchingEp" .ContinueWatchingEp "ContinueWatchingTime" .ContinueWatchingTime}}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-12 lg:flex-row">
|
||||
<div class="grow lg:max-w-4xl">
|
||||
<section>
|
||||
<h2 class="mb-4 mt-2 text-lg font-normal text-foreground">Synopsis</h2>
|
||||
<h2 class="mb-4 mt-2 text-base font-normal text-foreground">Synopsis</h2>
|
||||
<p id="synopsis-container" class="text-foreground-muted text-base leading-relaxed line-clamp-6 md:line-clamp-none whitespace-pre-line">{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}</p>
|
||||
{{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}}
|
||||
<button id="synopsis-toggle" class="mt-2 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground md:hidden" onclick="
|
||||
@@ -161,11 +163,11 @@
|
||||
{{end}}
|
||||
</section>
|
||||
</div>
|
||||
<aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto bg-background-sidebar p-10 lg:flex">
|
||||
<div class="flex flex-col gap-10">
|
||||
<aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto bg-background-sidebar p-8 lg:flex">
|
||||
<div class="flex flex-col gap-8">
|
||||
<section>
|
||||
<h3 class="mb-8 text-lg font-normal text-foreground">Information</h3>
|
||||
<dl class="flex flex-col gap-8 text-sm">
|
||||
<h3 class="mb-6 text-base font-normal text-foreground">Information</h3>
|
||||
<dl class="flex flex-col gap-6 text-sm">
|
||||
{{if $anime.Studios}}
|
||||
<div>
|
||||
<dt class="mb-1 text-xs font-normal text-foreground-muted">Studios</dt>
|
||||
@@ -266,7 +268,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="mb-4 text-lg font-normal text-foreground">Statistics</h3>
|
||||
<h3 class="mb-4 text-base font-normal text-foreground">Statistics</h3>
|
||||
<div hx-get="/anime/{{$anime.MalID}}?section=statistics" hx-trigger="load" hx-swap="innerHTML">
|
||||
<div class="flex flex-col gap-3 pt-1 animate-pulse">
|
||||
{{range (seq 5)}}
|
||||
@@ -277,7 +279,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="mb-4 text-lg font-normal text-foreground">More</h3>
|
||||
<h3 class="mb-4 text-base font-normal text-foreground">More</h3>
|
||||
<div class="flex flex-col gap-3">
|
||||
{{if $anime.External}}
|
||||
<div>
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
|
||||
{{define "reviews_content"}}
|
||||
<div class="flex w-full flex-col gap-6">
|
||||
<a href="/anime/{{.AnimeID}}" class="text-sm text-foreground-muted transition-colors hover:text-foreground">← Back to anime</a>
|
||||
<a href="/anime/{{.AnimeID}}" class="text-sm text-foreground-muted transition-colors hover:text-foreground">Back to anime</a>
|
||||
<h1 class="text-xl font-normal text-foreground">Reviews</h1>
|
||||
|
||||
{{if eq (len .Reviews) 0}}
|
||||
<div class="flex h-64 flex-col items-center justify-center gap-4 text-foreground-muted">
|
||||
<p class="text-foreground">No reviews yet</p>
|
||||
<div class="flex h-64 flex-col items-center justify-center gap-3 text-foreground-muted">
|
||||
<p class="text-sm text-foreground">No reviews yet</p>
|
||||
</div>
|
||||
{{else}}
|
||||
<div id="reviews-list" class="flex flex-col gap-6">
|
||||
@@ -22,10 +22,10 @@
|
||||
|
||||
{{define "review_cards"}}
|
||||
{{range .Reviews}}
|
||||
<div class="flex flex-col gap-4 bg-background-surface p-6">
|
||||
<div class="flex flex-col gap-4 bg-background-surface p-5 ring-1 ring-black/10">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-10 w-10 shrink-0 overflow-hidden rounded-full bg-background-surface">
|
||||
<div class="h-10 w-10 shrink-0 overflow-hidden rounded-full bg-background-surface ring-1 ring-black/10">
|
||||
<img src="{{.User.Images.Jpg.ImageURL}}" alt="{{.User.Username}}" class="h-full w-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
|
||||
Reference in New Issue
Block a user