From 13860b53da7707139ca2a900a99ea46f2c33eccc 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 --- .../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 e00745fc32b..5193e7c9a8b 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 { @@ -1168,7 +1181,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; @@ -1504,6 +1517,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 */ @@ -2170,7 +2204,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 f0423f228d7..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 a592fb5be22..2a01978fdbd 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadcart.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadcart.tt @@ -5,6 +5,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 388909a99f9..2c17db291b1 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt @@ -5,12 +5,21 @@ [% END %] [% INCLUDE 'bodytag.inc' bodyid='comment' bodyclass='popup' %] +
-
+
-

Reviews

[% IF ( ERRORS ) %]
[% FOREACH ERROR IN ERRORS %] @@ -60,9 +69,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 a3c5a3ce862..0dcc63217c9 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.39.5