Bug 40060 - Update structure of popup windows in the OPAC
Summary: Update structure of popup windows in the OPAC
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2025-06-03 15:09 UTC by Owen Leonard
Modified: 2025-09-05 14:50 UTC (History)
1 user (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Screenshot showing the proposed change (404.47 KB, image/png)
2025-06-03 15:09 UTC, Owen Leonard
Details
Bug 40060: Update structure of popup windows in the OPAC (26.10 KB, patch)
2025-06-10 15:33 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40060: Update structure of popup windows in the OPAC (26.10 KB, patch)
2025-06-24 19:21 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40060: Update structure of popup windows in the OPAC (26.10 KB, patch)
2025-06-24 19:27 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40060: Update structure of popup windows in the OPAC (26.10 KB, patch)
2025-07-21 18:52 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40060: Update structure of popup windows in the OPAC (26.10 KB, patch)
2025-07-31 17:40 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40060: Update structure of popup windows in the OPAC (26.16 KB, patch)
2025-09-05 14:47 UTC, Lin Wei
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2025-06-03 15:09:51 UTC
Created attachment 182923 [details]
Screenshot showing the proposed change

I propose to update popup windows in the OPAC so that the main heading of the page is in a fixed navbar at the top of the window, along with an "X" to close the window (similar to Bootstrap modals).
Comment 1 Owen Leonard 2025-06-10 15:33:09 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2025-06-24 19:21:17 UTC Comment hidden (obsolete)
Comment 3 Owen Leonard 2025-06-24 19:27:45 UTC Comment hidden (obsolete)
Comment 4 Owen Leonard 2025-07-21 18:52:41 UTC
Created attachment 184454 [details] [review]
Bug 40060: Update structure of popup windows in the OPAC

This patch updates templates for OPAC popup windows to add a
fixed "navbar" element at the top of the window with the main heading at
an "X" button which closes the window.

To test, apply the patch and rebuild the OPAC CSS. On each page, test
that the pop-up window looks correct. Confirm that the "X" in the upper
right works to close the window.

- Clear your browser cache if necessary.
- Make sure the opacbookbag, virtualshelves, and OPACComments system
  preferences are enabled.
- Log in to the OPAC and perform a catalog search which will return
  multiple results.
- Select multiple results and choose Add to list -> New list.
  - Test Add to list -> More lists
  - Test Add to list -> (existing list)
- View the contents of a list.
  - Click "Send list" and test the process of sending a list.
- Return to your catalog search results and add multiple items to the
  cart.
  - View the cart
  - Test the "Send" option
- With the OPACComments system preferenc enabled, view the detail page
  for a bibliographic record.
  - Under the comments tab, click "Post your comments..."

Sponsored-by: Athens County Public Libraries
Comment 5 Owen Leonard 2025-07-31 17:40:48 UTC
Created attachment 184942 [details] [review]
Bug 40060: Update structure of popup windows in the OPAC

This patch updates templates for OPAC popup windows to add a
fixed "navbar" element at the top of the window with the main heading at
an "X" button which closes the window.

To test, apply the patch and rebuild the OPAC CSS. On each page, test
that the pop-up window looks correct. Confirm that the "X" in the upper
right works to close the window.

- Clear your browser cache if necessary.
- Make sure the opacbookbag, virtualshelves, and OPACComments system
  preferences are enabled.
- Log in to the OPAC and perform a catalog search which will return
  multiple results.
- Select multiple results and choose Add to list -> New list.
  - Test Add to list -> More lists
  - Test Add to list -> (existing list)
- View the contents of a list.
  - Click "Send list" and test the process of sending a list.
- Return to your catalog search results and add multiple items to the
  cart.
  - View the cart
  - Test the "Send" option
- With the OPACComments system preferenc enabled, view the detail page
  for a bibliographic record.
  - Under the comments tab, click "Post your comments..."

Sponsored-by: Athens County Public Libraries
Comment 6 Ludovic 2025-09-05 14:38:59 UTC
Thanks for the patch! I tested it and overall it's a great improvement in terms of user experience, the addition of the fixed navbar and the "X" close button really modernizes the popups.

That said, I noticed a few layout issues that need to be addressed before we can move forward:

- Comments popup: The h1 and h2 elements are overlapping, making the header unreadable. The fixed navbar may be interfering with the default layout.

- Cart popup: Visually this one works very well — the "X" button is intuitive and UI-friendly. However, the lack of top padding makes the content feel a bit cramped. It would be ideal to restore or add some padding/margin above the content.

- "Add to a new list" popup: I really like the addition of the "X" and the improved styling of the <select> element — it’s much cleaner. However, just like in the comments popup, the h1 and the <ul> list of options are overlapping.

- I believe that with a few adjustments to spacing and header placement, this patch will be a solid step forward for OPAC usability.

Keep up the great work! Looking forward to the next version of the patch
Comment 7 Lin Wei 2025-09-05 14:47:17 UTC
Created attachment 186228 [details] [review]
Bug 40060: Update structure of popup windows in the OPAC

This patch updates templates for OPAC popup windows to add a
fixed "navbar" element at the top of the window with the main heading at
an "X" button which closes the window.

To test, apply the patch and rebuild the OPAC CSS. On each page, test
that the pop-up window looks correct. Confirm that the "X" in the upper
right works to close the window.

- Clear your browser cache if necessary.
- Make sure the opacbookbag, virtualshelves, and OPACComments system
  preferences are enabled.
- Log in to the OPAC and perform a catalog search which will return
  multiple results.
- Select multiple results and choose Add to list -> New list.
  - Test Add to list -> More lists
  - Test Add to list -> (existing list)
- View the contents of a list.
  - Click "Send list" and test the process of sending a list.
- Return to your catalog search results and add multiple items to the
  cart.
  - View the cart
  - Test the "Send" option
- With the OPACComments system preferenc enabled, view the detail page
  for a bibliographic record.
  - Under the comments tab, click "Post your comments..."

Sponsored-by: Athens County Public Libraries
Signed-off-by: Ludovic Julien <ludovic.julien@inLibro.com>
Comment 8 Ludovic 2025-09-05 14:50:41 UTC
Just a quick follow-up to my previous comment:

It turns out my OPAC build had failed, so the UI didn’t load properly when I tested the patch. I didn't notice at the time and posted my feedback too early... sorry about that!

Now that I've rebuilt everything correctly, I can really appreciate the improvements. The updated UI is a big step forward, the fixed header with the close button greatly improves usability, and the overall user experience is much smoother and more modern.

Great job on this — UX enhancements like this make a real difference! Looking forward to seeing it move forward. :)