Ranking page: fix card wrapping, add filter bar, replace refresh buttons with pagination
- Cards now use flex layout with break-words/min-w-0 so long titles wrap instead of stretching the column; grid uses gap-3 for tighter density - Added filter bar (title/author/genre/status) with live result count, consistent with the home page filter - Replaced four big refresh buttons with compact pagination buttons (p.1, p.1-3, p.1-5, p.1-10, All) labelled with page ranges; source link points to novelfire.net/genre-all/sort-popular/status-all/all-novel - Template data field renamed from RefreshPages to Pages; pagination entries updated to reflect 100 novels per page
This commit is contained in:
Admin
@@ -531,124 +531,119 @@ const rankingTmpl = `
|
||||
class="text-sm px-3 py-1.5 rounded-lg bg-zinc-700 hover:bg-zinc-600 text-white inline-flex items-center gap-1">
|
||||
View Markdown
|
||||
</a>
|
||||
<span class="text-xs text-zinc-500 ml-1">Refresh:</span>
|
||||
{{range .RefreshPages}}
|
||||
<form hx-post="/ranking/refresh"
|
||||
hx-target="#ranking-refresh-status"
|
||||
hx-swap="innerHTML">
|
||||
<input type="hidden" name="pages" value="{{.Pages}}">
|
||||
<button type="submit"
|
||||
class="text-sm px-3 py-1.5 rounded-lg bg-amber-800 hover:bg-amber-600 text-white transition-colors">
|
||||
{{.Label}}
|
||||
</button>
|
||||
</form>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="ranking-refresh-status" class="mt-2"></div>
|
||||
|
||||
<!-- Filter bar -->
|
||||
<div class="mt-4 mb-2">
|
||||
<input id="ranking-filter" type="search" placeholder="Filter by title, genre, status…"
|
||||
autocomplete="off" spellcheck="false"
|
||||
class="w-full rounded-lg bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-amber-500 transition-colors" />
|
||||
<p id="ranking-filter-count" class="text-xs text-zinc-500 mt-1 hidden"></p>
|
||||
<div class="mt-4 mb-4 flex gap-2 items-center">
|
||||
<div class="flex-1 relative">
|
||||
<input id="ranking-filter" type="search" placeholder="Filter by title, author, genre, status…"
|
||||
autocomplete="off" spellcheck="false"
|
||||
class="w-full rounded-lg bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-amber-500 transition-colors" />
|
||||
</div>
|
||||
<p id="ranking-filter-count" class="text-xs text-zinc-500 whitespace-nowrap hidden"></p>
|
||||
</div>
|
||||
|
||||
<!-- Pagination: fetch pages from novelfire -->
|
||||
<div class="flex items-center gap-2 mb-6 flex-wrap">
|
||||
<span class="text-xs text-zinc-500">Fetch pages:</span>
|
||||
{{range .Pages}}
|
||||
<form hx-post="/ranking/refresh"
|
||||
hx-target="#ranking-refresh-status"
|
||||
hx-swap="innerHTML">
|
||||
<input type="hidden" name="pages" value="{{.Pages}}">
|
||||
<button type="submit"
|
||||
class="text-xs px-2.5 py-1 rounded-lg bg-zinc-800 hover:bg-amber-700 border border-zinc-700 hover:border-amber-600 text-zinc-300 hover:text-white transition-colors">
|
||||
{{.Label}}
|
||||
</button>
|
||||
</form>
|
||||
{{end}}
|
||||
<span class="text-xs text-zinc-600 ml-1">
|
||||
(source:
|
||||
<a href="https://novelfire.net/genre-all/sort-popular/status-all/all-novel?page=1"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
class="text-zinc-500 hover:text-amber-400 underline underline-offset-2">novelfire.net</a>)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Book grid -->
|
||||
<div id="ranking-grid" class="grid gap-4 sm:grid-cols-2 mt-4">
|
||||
<div id="ranking-grid" class="grid gap-3 sm:grid-cols-2 mt-2">
|
||||
{{range .Books}}
|
||||
{{if .Local}}
|
||||
{{/* Book is in local library — wrap entire card in a clickable link */}}
|
||||
<a href="/books/{{.Slug}}"
|
||||
hx-get="/books/{{.Slug}}"
|
||||
hx-target="#main-content"
|
||||
hx-push-url="true"
|
||||
hx-swap="innerHTML"
|
||||
data-filter="{{.Title}} {{.Author}} {{.Status}} {{range .Genres}}{{.}} {{end}}"
|
||||
class="group block rounded-xl border border-teal-700 bg-teal-950 p-4 hover:border-teal-400 transition-colors">
|
||||
<div class="flex gap-4">
|
||||
{{if .Cover}}
|
||||
<img src="{{.Cover}}" alt="cover" class="w-14 h-20 object-cover rounded flex-shrink-0">
|
||||
{{end}}
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
{{if .Rank}}<span class="text-xs font-bold text-amber-400">#{{.Rank}}</span>{{end}}
|
||||
<h2 class="font-semibold text-zinc-100 group-hover:text-teal-300 truncate">{{.Title}}</h2>
|
||||
<span class="ml-auto text-xs px-1.5 py-0.5 rounded bg-teal-800 text-teal-300 flex-shrink-0">In library</span>
|
||||
</div>
|
||||
{{if .Author}}<p class="text-sm text-zinc-400 mt-0.5">{{.Author}}</p>{{end}}
|
||||
<div class="flex gap-2 mt-2 flex-wrap">
|
||||
{{if .Status}}<span class="text-xs px-2 py-0.5 rounded-full bg-teal-900 text-teal-300">{{.Status}}</span>{{end}}
|
||||
</div>
|
||||
{{if .Genres}}
|
||||
<div class="flex gap-1 mt-2 flex-wrap">
|
||||
{{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-teal-900 text-teal-400">{{.}}</span>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .SourceURL}}
|
||||
<div class="mt-3">
|
||||
<a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
|
||||
title="View on novelfire.net"
|
||||
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
Source
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
class="group flex gap-3 rounded-xl border border-teal-700 bg-teal-950 p-3 hover:border-teal-400 transition-colors min-w-0">
|
||||
{{if .Cover}}
|
||||
<img src="{{.Cover}}" alt="cover" class="w-12 h-[4.5rem] object-cover rounded flex-shrink-0">
|
||||
{{end}}
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-start gap-1.5 flex-wrap">
|
||||
{{if .Rank}}<span class="text-xs font-bold text-amber-400 flex-shrink-0">#{{.Rank}}</span>{{end}}
|
||||
<h2 class="font-semibold text-zinc-100 group-hover:text-teal-300 break-words leading-snug flex-1 min-w-0">{{.Title}}</h2>
|
||||
<span class="text-xs px-1.5 py-0.5 rounded bg-teal-800 text-teal-300 flex-shrink-0">In library</span>
|
||||
</div>
|
||||
{{if .Author}}<p class="text-xs text-zinc-400 mt-0.5 truncate">{{.Author}}</p>{{end}}
|
||||
<div class="flex gap-1.5 mt-1.5 flex-wrap">
|
||||
{{if .Status}}<span class="text-xs px-1.5 py-0.5 rounded-full bg-teal-900 text-teal-300">{{.Status}}</span>{{end}}
|
||||
{{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-teal-900 text-teal-400">{{.}}</span>{{end}}
|
||||
</div>
|
||||
{{if .SourceURL}}
|
||||
<div class="mt-2">
|
||||
<a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
Source
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
{{/* Book not yet in local library */}}
|
||||
<div data-filter="{{.Title}} {{.Author}} {{.Status}} {{range .Genres}}{{.}} {{end}}"
|
||||
class="group block rounded-xl border border-zinc-800 bg-zinc-900 p-4 hover:border-amber-500 transition-colors">
|
||||
<div class="flex gap-4">
|
||||
{{if .Cover}}
|
||||
<img src="{{.Cover}}" alt="cover" class="w-14 h-20 object-cover rounded flex-shrink-0">
|
||||
{{end}}
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
{{if .Rank}}<span class="text-xs font-bold text-amber-400">#{{.Rank}}</span>{{end}}
|
||||
<h2 class="font-semibold text-zinc-100 group-hover:text-amber-400 truncate">{{.Title}}</h2>
|
||||
</div>
|
||||
{{if .Author}}<p class="text-sm text-zinc-400 mt-0.5">{{.Author}}</p>{{end}}
|
||||
<div class="flex gap-2 mt-2 flex-wrap">
|
||||
{{if .Status}}<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-300">{{.Status}}</span>{{end}}
|
||||
</div>
|
||||
{{if .Genres}}
|
||||
<div class="flex gap-1 mt-2 flex-wrap">
|
||||
{{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400">{{.}}</span>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .SourceURL}}
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<form hx-post="/ui/scrape/book" hx-swap="outerHTML" hx-target="closest div">
|
||||
<input type="hidden" name="url" value="{{.SourceURL}}">
|
||||
<button type="submit"
|
||||
class="text-xs px-2 py-1 rounded bg-amber-700 hover:bg-amber-600 text-white"
|
||||
title="Scrape full content">
|
||||
Scrape
|
||||
</button>
|
||||
</form>
|
||||
<a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
|
||||
title="View on novelfire.net"
|
||||
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
Source
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
class="group flex gap-3 rounded-xl border border-zinc-800 bg-zinc-900 p-3 hover:border-amber-500 transition-colors min-w-0">
|
||||
{{if .Cover}}
|
||||
<img src="{{.Cover}}" alt="cover" class="w-12 h-[4.5rem] object-cover rounded flex-shrink-0">
|
||||
{{end}}
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-start gap-1.5 flex-wrap">
|
||||
{{if .Rank}}<span class="text-xs font-bold text-amber-400 flex-shrink-0">#{{.Rank}}</span>{{end}}
|
||||
<h2 class="font-semibold text-zinc-100 group-hover:text-amber-400 break-words leading-snug flex-1 min-w-0">{{.Title}}</h2>
|
||||
</div>
|
||||
{{if .Author}}<p class="text-xs text-zinc-400 mt-0.5 truncate">{{.Author}}</p>{{end}}
|
||||
<div class="flex gap-1.5 mt-1.5 flex-wrap">
|
||||
{{if .Status}}<span class="text-xs px-1.5 py-0.5 rounded-full bg-zinc-800 text-zinc-300">{{.Status}}</span>{{end}}
|
||||
{{range .Genres}}<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400">{{.}}</span>{{end}}
|
||||
</div>
|
||||
{{if .SourceURL}}
|
||||
<div class="mt-2 flex items-center gap-2 flex-wrap">
|
||||
<form hx-post="/ui/scrape/book" hx-swap="outerHTML" hx-target="closest div">
|
||||
<input type="hidden" name="url" value="{{.SourceURL}}">
|
||||
<button type="submit"
|
||||
class="text-xs px-2 py-0.5 rounded bg-amber-700 hover:bg-amber-600 text-white">
|
||||
Scrape
|
||||
</button>
|
||||
</form>
|
||||
<a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
Source
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<p class="text-zinc-500 col-span-2">No ranking data available. Click "Refresh Rankings" to fetch from novelfire.net.</p>
|
||||
<p class="text-zinc-500 col-span-2">No ranking data. Use the page buttons above to fetch from novelfire.net.</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -704,12 +699,14 @@ type refreshPage struct {
|
||||
Pages int // 0 means "all pages"
|
||||
}
|
||||
|
||||
// rankingRefreshPages defines the ordered set of refresh buttons shown on the
|
||||
// ranking page. Pages == 0 means "fetch all pages".
|
||||
// rankingRefreshPages defines the pagination buttons shown on the ranking page.
|
||||
// Each entry fetches that many pages from novelfire.net (100 novels per page).
|
||||
// Pages == 0 means fetch all pages.
|
||||
var rankingRefreshPages = []refreshPage{
|
||||
{"Top 100", 1},
|
||||
{"Top 300", 3},
|
||||
{"Top 500", 5},
|
||||
{"p.1 (top 100)", 1},
|
||||
{"p.1–3 (top 300)", 3},
|
||||
{"p.1–5 (top 500)", 5},
|
||||
{"p.1–10 (top 1000)", 10},
|
||||
{"All", 0},
|
||||
}
|
||||
|
||||
@@ -729,13 +726,13 @@ func (s *Server) handleRanking(w http.ResponseWriter, r *http.Request) {
|
||||
t := template.Must(template.New("ranking").Parse(rankingTmpl))
|
||||
var buf bytes.Buffer
|
||||
_ = t.Execute(&buf, struct {
|
||||
Books interface{}
|
||||
CachedAt string
|
||||
RefreshPages []refreshPage
|
||||
Books interface{}
|
||||
CachedAt string
|
||||
Pages []refreshPage
|
||||
}{
|
||||
Books: toRankingViewItems(rankingItems, s.writer.LocalSlugs()),
|
||||
CachedAt: cachedAt,
|
||||
RefreshPages: rankingRefreshPages,
|
||||
Books: toRankingViewItems(rankingItems, s.writer.LocalSlugs()),
|
||||
CachedAt: cachedAt,
|
||||
Pages: rankingRefreshPages,
|
||||
})
|
||||
s.respond(w, r, "Rankings", buf.String())
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user