From 9d9635957c5842ac30cd60851c80c8b84f0b0d55 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 3 Jun 2025 14:57:17 +0000 Subject: [PATCH] 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 Signed-off-by: Kyle M Hall --- .../opac-tmpl/bootstrap/css/src/opac.scss | 40 ++++- .../en/modules/opac-addbybiblionumber.tt | 156 ++++++++++++------ .../bootstrap/en/modules/opac-basket.tt | 55 ++++-- .../bootstrap/en/modules/opac-downloadcart.tt | 7 + .../bootstrap/en/modules/opac-review.tt | 17 +- .../en/modules/opac-sendbasketform.tt | 21 ++- .../en/modules/opac-sendshelfform.tt | 23 ++- koha-tmpl/opac-tmpl/bootstrap/js/basket.js | 2 +- koha-tmpl/opac-tmpl/bootstrap/js/global.js | 2 +- 9 files changed, 241 insertions(+), 82 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 6d648044914..42268b4b126 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -44,9 +44,22 @@ padding-left: 0; padding-right: 0; + &:has(nav.fixed-top) { + padding-top: 4rem; + } + + fieldset div { + margin-bottom: .3rem; + } + + label { + font-weight: bold; + } + .main { font-size: 90%; - padding: 0 1em; + margin: 0; + padding: 1rem; } legend { @@ -1173,7 +1186,7 @@ fieldset { } .selections-toolbar { - background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% ); + background: linear-gradient( #B2B2B2 0%, #E0E0E0 5%, #E8E8E8 100% ); display: flex; flex-wrap: wrap; margin: 0; @@ -1513,6 +1526,27 @@ nav { border-right-color: #FCF9FC; margin: 5px 0; } + + &.fixed-top { + background-color: #FFF; + border-bottom: 1px solid #DDD; + box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.4); + padding: .2rem 1rem; + + .navbar-brand { + flex-grow: 1; + + h1 { + color: #444; + margin: 0; + padding: 0; + } + } + + .navbar-nav { + flex-shrink: 1; + } + } } /* action buttons */ @@ -2179,7 +2213,7 @@ nav { /* Class to be added to toolbar when it starts being fixed at the top of the screen */ .floating { - box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 ); + box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2); margin-top: 0; z-index: 5; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-addbybiblionumber.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-addbybiblionumber.tt index cd0ff5f477d..4db1b806791 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-addbybiblionumber.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-addbybiblionumber.tt @@ -10,72 +10,99 @@ > [% INCLUDE 'doc-head-close.inc' %] [% BLOCK cssinclude %] + [% END %] [% INCLUDE 'bodytag.inc' bodyid='addtolist' bodyclass='popup' %] + +
-
-
+
+
[% IF ( authorized ) %] - [% UNLESS ( newshelf ) %] - [% IF ( multiple ) %] -

Add [% total | html %] items to [% IF ( singleshelf ) %][% shelfname | html %]:[% ELSE %]a list:[% END %]

- [% ELSE %] -

Add to [% IF ( singleshelf ) %][% shelfname | html %][% ELSE %]a list:[% END %]

+
    + [% FOREACH biblio IN biblios %] +
  • [% INCLUDE 'biblio-title.inc' %] + [% IF ( biblio.author ) %] [% biblio.author | html %][% END %] +
  • [% END %] -
      - [% FOREACH biblio IN biblios %] -
    • [% INCLUDE 'biblio-title.inc' %] - [% IF ( biblio.author ) %] [% biblio.author | html %][% END %] -
    • - [% END %] -
    +
+ [% UNLESS ( newshelf ) %] [% IF private_shelves.count or public_shelves.count or private_shelves_shared_with_me.count %]
[% INCLUDE 'csrf-token.inc' %]
Select a list - - + [% IF private_shelves.count %] + + [% FOREACH private_shelf IN private_shelves %] + + [% END %] + + [% END %] + [% IF private_shelves_shared_with_me.count %] + + [% FOREACH private_shelf IN private_shelves_shared_with_me %] + + [% END %] + + [% END %] + [% IF public_shelves.count %] + + [% FOREACH public_shelf IN public_shelves %] + + [% END %] + + [% END %] + + [% FOREACH biblio IN biblios %] + [% END %] - - [% FOREACH biblio IN biblios %] - - [% END %] - + +
Cancel
-

...or...

[% ELSE %] [% IF ( singleshelf ) %] -
+ [% INCLUDE 'csrf-token.inc' %] [% FOREACH biblio IN biblios %] @@ -90,21 +117,43 @@ [% END %] [% END # IF / existingshelves %] [% END # / UNLESS newshelf %] + [% END # / IF authorized %] +
+
+
+
+ + [% IF ( authorized && !newshelf && !singleshelf) %] + [% #UNLESS ( newshelf ) %] + [% #UNLESS ( singleshelf ) %] +
...or...
+ [% #END %] + [% #END %] + [% END %] +
+
+
+
+ [% IF ( authorized ) %] [% UNLESS ( singleshelf ) %] [% INCLUDE 'csrf-token.inc' %]
Add to a new list: - - - - +
+ + +
+
+ + +
[% FOREACH biblio IN biblios %] @@ -126,7 +175,6 @@ [% END %]

[% END # IF authorized %] -

Close this window.

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt index a19db309bf0..382bf9727c3 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt @@ -18,27 +18,54 @@ > [% INCLUDE 'doc-head-close.inc' %] [% BLOCK cssinclude %] - + @media print { + body { + height: 99%; + } + } + .popup:has(nav.fixed-top) { + padding-top: 0; + } + #bookbag_form { + margin-top: 2.7rem; + } + .popup .main { + padding: 0; + } + .container-fluid { + padding-right: 0; + padding-left: 0; + } + .maincontent.moredetail #bookbag_form { + margin-top: 3.2rem; + } + + [% END %] [% END %] -[% INCLUDE 'bodytag.inc' bodyid='basket' %] +[% INCLUDE 'bodytag.inc' bodyid='basket' bodyclass='popup' %] +
-
-

Your cart

-
+
+
[% IF ( verbose ) %] Brief display diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadcart.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadcart.tt index 162e2b1be41..7cd2276b7a2 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadcart.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadcart.tt @@ -12,6 +12,13 @@ [% END %] [% INCLUDE 'bodytag.inc' bodyid='opac-downloadcart' bodyclass='popup' %] +
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt index b8e1fbe07c9..06019a7ce66 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt @@ -13,12 +13,21 @@ [% END %] [% INCLUDE 'bodytag.inc' bodyid='comment' bodyclass='popup' %] +
-
+
-

Reviews

[% IF ( ERRORS ) %]
[% FOREACH ERROR IN ERRORS %] @@ -68,9 +77,9 @@
- +
- +
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendbasketform.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendbasketform.tt index ceb7f4ceba6..45b0ec13744 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendbasketform.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendbasketform.tt @@ -6,6 +6,22 @@ [% END %] [% INCLUDE 'bodytag.inc' bodyid='addtolist' bodyclass='popup' %] +
@@ -14,8 +30,7 @@ [% IF ( email_add ) %] [% IF ( SENT ) %] -

Message sent

-
+

The cart was sent to: [% email_add | html %]

Close window

@@ -35,7 +50,7 @@ [% ELSE %]
-

Sending your cart

+ Message details diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendshelfform.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendshelfform.tt index f2d216a7e70..bea06a577f0 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendshelfform.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendshelfform.tt @@ -6,6 +6,26 @@ [% END %] [% INCLUDE 'bodytag.inc' bodyid='sendshelf' bodyclass='popup' %] +
@@ -13,7 +33,6 @@
[% IF ( email ) %] [% IF ( SENT ) %] -

Message sent

The list was sent to: [% email | html %]

@@ -34,7 +53,7 @@ [% INCLUDE 'csrf-token.inc' %]
-

Sending your list

+ Message details diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/basket.js b/koha-tmpl/opac-tmpl/bootstrap/js/basket.js index e4a9c5f5aef..9d9588feabd 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/basket.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/basket.js @@ -72,7 +72,7 @@ function openBasket() { if (strCookie) { var iW = 820; - var iH = 450; + var iH = 820; var optWin = "status=yes,scrollbars=yes,resizable=yes,toolbar=no,location=yes,height=" + iH + diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js index 15fc44db361..69b6e3fa0dc 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js @@ -61,7 +61,7 @@ function Dopop(link) { newin = window.open( link, "popup", - "width=660,height=450,toolbar=false,scrollbars=yes,resizable=yes" + "width=820,height=600,toolbar=false,scrollbars=yes,resizable=yes" ); } -- 2.50.1 (Apple Git-155)