From c2faac9c6472ddf8c503a2a537e39d74d1008b69 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 5f182f644ab..05143f45485 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 { @@ -1163,7 +1176,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; @@ -1499,6 +1512,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 */ @@ -2165,7 +2199,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 bce9384a2d8..4d9c6eb68b8 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 01d50884da7..c14db39078a 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 b6fcab2ce88..91ae38b7df3 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 5f7bf4ec2fe..e336645305f 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 d63b7f2dd12..3204fb17a43 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 459ced00460..0dc96faaf2d 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