kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 162 Wiki Activity

Ranking page: fix card wrapping, add filter bar, replace refresh buttons with pagination
Some checks failed
CI / Lint (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Build (push) Has been cancelled
Details

Browse Source 
- 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
2026-03-01 21:06:18 +05:00
parent 26a46a4d31
commit 73869f01fa
1 changed files with 100 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
scraper/internal/server/ui.go
View File

@@ -531,66 +531,71 @@ 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…"
<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" />
<p id="ranking-filter-count" class="text-xs text-zinc-500 mt-1 hidden"></p>
</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">
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-14 h-20 object-cover rounded flex-shrink-0">
<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-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 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-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">
{{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>
{{end}}
{{if .SourceURL}}
<div class="mt-3">
<div class="mt-2">
<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">
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>
@@ -599,43 +604,34 @@ const rankingTmpl = `
</div>
{{end}}
</div>
</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">
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-14 h-20 object-cover rounded flex-shrink-0">
<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-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 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-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">
{{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>
{{end}}
{{if .SourceURL}}
<div class="mt-3 flex items-center gap-2">
<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-1 rounded bg-amber-700 hover:bg-amber-600 text-white"
title="Scrape full content">
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"
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">
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>
@@ -645,10 +641,9 @@ const rankingTmpl = `
{{end}}
</div>
</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},
}
@@ -731,11 +728,11 @@ func (s *Server) handleRanking(w http.ResponseWriter, r *http.Request) {
_ = t.Execute(&buf, struct {
Books interface{}
CachedAt string
RefreshPages []refreshPage
Pages []refreshPage
}{
Books: toRankingViewItems(rankingItems, s.writer.LocalSlugs()),
CachedAt: cachedAt,
RefreshPages: rankingRefreshPages,
Pages: rankingRefreshPages,
})
s.respond(w, r, "Rankings", buf.String())
}