Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix(progress): correct percentage display and add format-aware progress

Browse Source 
Fix two bugs in progress display across book detail, progress page, reader,
and sync modal templates:

1. Percentage was stored as 0.0-1.0 fraction but displayed as-if 0-100
   (showing 0.5% instead of 50%). Multiply by 100 at the data source in
   both GetAllProgress and GetAllProgressData handlers, and in the reader
   route's ReadingProgress construction.

2. Progress bar width was never evaluated — { expr } inside style=".."
   was rendered as literal text by templ, resulting in 0% width bars for
   all items. Fixed by using templ's style={ expr } attribute syntax
   which evaluates the Go expression (uses SanitizeStyleAttributeValues).

Also add format-aware progress display:
- Reader template: shows "45% · Page 89/196" for reflowable (estimated
  pages), "127/342" for comics/PDFs (actual pages)
- Progress page: shows "Page X of Y (est.)" for reflowable, "X / Y"
  for fixed layout
- Add FormatGroup and EstimatedPages to ProgressWithMedia struct
- Remove hardcoded totalPages=200 fallback in progress handler (now 0)
- Add fmt import to progress.templ for string formatting
This commit is contained in:
john-okeefe
2026-04-24 14:03:03 -04:00
parent 192c978a38
commit d38804e910
10 changed files with 477 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/progress.templ
+14 -5
View File
@@ -1,6 +1,7 @@
package templates
import "bookhoard/internal/handlers"
import "fmt"
templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessage string) {
<!DOCTYPE html>
@@ -57,15 +58,23 @@ templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessag
</div>
<div class="mb-4">
<div class="w-full bg-gray-700 rounded-full h-3">
<div class="h-3 rounded-full transition-all" style="width: { item.ProgressPercentage }%; background-color: var(--accent);"></div>
<div class="h-3 rounded-full transition-all" style={ "width: " + fmt.Sprintf("%.1f", item.ProgressPercentage) + "%; background-color: var(--accent);" }></div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div>
<p style="color: var(--text-secondary)">Current Position</p>
<p style="color: var(--text-primary)">
{ item.CurrentPage } / { item.TotalPages }
</p>
<p style="color: var(--text-secondary)">Current Position</p>
<p style="color: var(--text-primary)">
if item.FormatGroup == "reflowable" {
if item.EstimatedPages > 0 {
{ fmt.Sprintf("Page %d of %d (est.)", item.CurrentPage, item.EstimatedPages) }
} else {
{ fmt.Sprintf("%.1f%%", item.ProgressPercentage) }
}
} else {
{ fmt.Sprintf("%d / %d", item.CurrentPage, item.TotalPages) }
}
</p>
</div>
<div>
<p style="color: var(--text-secondary)">Last Updated</p>