fran/hxbooks
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix #2: Focus jumps to genre after status change
All checks were successful
CI / quality-checks (push) Successful in 43s
Details

Browse Source 
No idea why this is happening, but I solved it by making htmx swap only
the user status containers instead of the whole page. This keeps the
toggle status intact and prevents the jump.
This commit is contained in:
Francisco Penedo Alvarez
2026-04-01 11:37:27 +02:00
parent 206b2a9d5b
commit 9429d203bd
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/hxbooks/templates/book/detail.html.j2
View File

@@ -23,7 +23,7 @@
{% import 'components/user_book_vars.html.j2' as vars with context %} {% import 'components/user_book_vars.html.j2' as vars with context %}
<div class="col-12 d-lg-none mb-3"> <div class="col-12 d-lg-none mb-3">
<input type="checkbox" id="status-toggle" class="status-toggle-checkbox" hidden> <input type="checkbox" id="status-toggle" class="status-toggle-checkbox" hidden>
<div class="user-status-card"> <div class="user-status-card" id="user-status-card">
<label for="status-toggle" class="status-bar"> <label for="status-toggle" class="status-bar">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
@@ -110,7 +110,7 @@
<div class="card-header"> <div class="card-header">
<h6 class="mb-0">{{ session.get('viewing_as_user').title() }}'s Data</h6> <h6 class="mb-0">{{ session.get('viewing_as_user').title() }}'s Data</h6>
</div> </div>
<div class="card-body"> <div class="card-body" id="user-status">
{% include 'components/reading_status.html.j2' %} {% include 'components/reading_status.html.j2' %}
{% include 'components/wishlist_status.html.j2' %} {% include 'components/wishlist_status.html.j2' %}
</div> </div>

4
src/hxbooks/templates/components/reading_status.html.j2
View File

@@ -6,7 +6,7 @@
<h6 class="text-muted mb-2">📖 Reading Status</h6> <h6 class="text-muted mb-2">📖 Reading Status</h6>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="mb-3"> <div class="mb-3" hx-select-oob="#flash-messages-container,#user-status-card,#user-status" hx-swap="none show:none">
{% if vars.current_reading %} {% if vars.current_reading %}
<form action="/book/{{ book.id }}/reading/finish" method="POST" class="d-inline"> <form action="/book/{{ book.id }}/reading/finish" method="POST" class="d-inline">
<button type="submit" class="btn btn-success btn-sm me-2">✓ Finish Reading</button> <button type="submit" class="btn btn-success btn-sm me-2">✓ Finish Reading</button>
@@ -29,7 +29,7 @@
<div class="alert alert-light border py-2 mb-3"> <div class="alert alert-light border py-2 mb-3">
<form action="/book/{{ book.id }}/reading/{{ vars.completed_readings[0].id }}/update" method="POST" <form action="/book/{{ book.id }}/reading/{{ vars.completed_readings[0].id }}/update" method="POST"
class="row align-items-center g-2" hx-trigger="change,submit" hx-swap="none show:none" class="row align-items-center g-2" hx-trigger="change,submit" hx-swap="none show:none"
hx-select-oob="#flash-messages-container:outerHTML" hx-target="this"> hx-select-oob="#flash-messages-container" hx-target="this">
<!-- Hidden fields to preserve other reading data --> <!-- Hidden fields to preserve other reading data -->
<input type="hidden" name="start_date" value="{{ vars.completed_readings[0].start_date.strftime('%Y-%m-%d') }}"> <input type="hidden" name="start_date" value="{{ vars.completed_readings[0].start_date.strftime('%Y-%m-%d') }}">
<input type="hidden" name="end_date" <input type="hidden" name="end_date"