Bugzilla – Attachment 183138 Details for
Bug 40060
Update structure of popup windows in the OPAC
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 40060: Update structure of popup windows in the OPAC
Bug-40060-Update-structure-of-popup-windows-in-the.patch (text/plain), 26.10 KB, created by
Owen Leonard
on 2025-06-10 15:33:09 UTC
(
hide
)
Description:
Bug 40060: Update structure of popup windows in the OPAC
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2025-06-10 15:33:09 UTC
Size:
26.10 KB
patch
obsolete
>From c2faac9c6472ddf8c503a2a537e39d74d1008b69 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >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 %] >+ <style> >+ form { >+ margin-left: 3rem; >+ } >+ .form-divider { >+ background-color: #eee; >+ border-bottom: 1px solid #d5d5d5; >+ border-top: 1px solid #d5d5d5; >+ margin: 0.5rem -1rem 0.5rem -1rem; >+ padding: 0.5rem 2rem; >+ } >+ </style> > [% END %] > </head> > [% INCLUDE 'bodytag.inc' bodyid='addtolist' bodyclass='popup' %] >+<nav class="navbar fixed-top"> >+ <div class="navbar-brand"> >+ [% IF ( newshelf ) %] >+ <h1>Add to a new list</h1> >+ [% ELSE %] >+ [% IF ( multiple ) %] >+ <h1>Add [% total | html %] items to [% IF ( singleshelf ) %]<em>[% shelfname | html %]</em>:[% ELSE %]<span>a list</span>[% END %]</h1> >+ [% ELSE %] >+ <h1>Add to [% IF ( singleshelf ) %]<em>[% shelfname | html %]</em>[% ELSE %]<span>a list</span>[% END %]</h1> >+ [% END %] >+ [% END %] >+ </div> >+ <ul class="navbar-nav"> >+ <li class="nav-item"> >+ <button type="button" class="btn-close close" aria-label="Close"></button> >+ </li> >+ </ul> >+</nav> >+ > <div class="main"> > <div class="container-fluid"> > <div class="row"> >- <div class="col order-first order-md-first order-lg-2"> >- <div id="useraddbybiblionumber" class="maincontent"> >+ <div class="col"> >+ <div id="add_to_list" class="maincontent"> > [% IF ( authorized ) %] >- [% UNLESS ( newshelf ) %] >- [% IF ( multiple ) %] >- <h1>Add [% total | html %] items to [% IF ( singleshelf ) %]<em>[% shelfname | html %]</em>:[% ELSE %]<span>a list:</span>[% END %]</h1> >- [% ELSE %] >- <h1>Add to [% IF ( singleshelf ) %]<em>[% shelfname | html %]</em>[% ELSE %]<span>a list:</span>[% END %]</h1> >+ <ul> >+ [% FOREACH biblio IN biblios %] >+ <li >+ >[% INCLUDE 'biblio-title.inc' %] >+ [% IF ( biblio.author ) %]<span class="author"> [% biblio.author | html %]</span>[% END %] >+ </li> > [% END %] >- <ul> >- [% FOREACH biblio IN biblios %] >- <li >- >[% INCLUDE 'biblio-title.inc' %] >- [% IF ( biblio.author ) %]<span class="author"> [% biblio.author | html %]</span>[% END %] >- </li> >- [% END %] >- </ul> >+ </ul> >+ [% UNLESS ( newshelf ) %] > [% IF private_shelves.count or public_shelves.count or private_shelves_shared_with_me.count %] > <form name="f1" action="/cgi-bin/koha/opac-addbybiblionumber.pl" method="post"> > [% INCLUDE 'csrf-token.inc' %] > <fieldset> > <legend>Select a list</legend> >- <label for="shelfnumber">Add to list:</label> >- <select name="shelfnumber" id="shelfnumber"> >- [% IF private_shelves.count %] >- <optgroup label="Private lists"> >- [% FOREACH private_shelf IN private_shelves %] >- <option value="[% private_shelf.shelfnumber | html %]">[% private_shelf.shelfname | html %]</option> >- [% END %] >- </optgroup> >- [% END %] >- [% IF private_shelves_shared_with_me.count %] >- <optgroup label="Private lists shared with me"> >- [% FOREACH private_shelf IN private_shelves_shared_with_me %] >- <option value="[% private_shelf.shelfnumber | html %]">[% private_shelf.shelfname | html %]</option> >- [% END %] >- </optgroup> >- [% END %] >- [% IF public_shelves.count %] >- <optgroup label="Public lists"> >- [% FOREACH public_shelf IN public_shelves %] >- <option value="[% public_shelf.shelfnumber | html %]">[% public_shelf.shelfname | html %]</option> >- [% END %] >- </optgroup> >+ <div> >+ <label class="form-label" for="shelfnumber">Add to list:</label> >+ <select name="shelfnumber" id="shelfnumber" class="form-select"> >+ [% IF private_shelves.count %] >+ <optgroup label="Private lists"> >+ [% FOREACH private_shelf IN private_shelves %] >+ <option value="[% private_shelf.shelfnumber | html %]">[% private_shelf.shelfname | html %]</option> >+ [% END %] >+ </optgroup> >+ [% END %] >+ [% IF private_shelves_shared_with_me.count %] >+ <optgroup label="Private lists shared with me"> >+ [% FOREACH private_shelf IN private_shelves_shared_with_me %] >+ <option value="[% private_shelf.shelfnumber | html %]">[% private_shelf.shelfname | html %]</option> >+ [% END %] >+ </optgroup> >+ [% END %] >+ [% IF public_shelves.count %] >+ <optgroup label="Public lists"> >+ [% FOREACH public_shelf IN public_shelves %] >+ <option value="[% public_shelf.shelfnumber | html %]">[% public_shelf.shelfname | html %]</option> >+ [% END %] >+ </optgroup> >+ [% END %] >+ </select> >+ [% FOREACH biblio IN biblios %] >+ <input type="hidden" name="biblionumber" value="[% biblio.biblionumber | html %]" /> > [% END %] >- </select> >- [% FOREACH biblio IN biblios %] >- <input type="hidden" name="biblionumber" value="[% biblio.biblionumber | html %]" /> >- [% END %] >- <input type="hidden" name="op" value="cud-modifyshelfcontents" /> >+ <input type="hidden" name="op" value="cud-modifyshelfcontents" /> >+ </div> > </fieldset> > <fieldset class="action"> > <input type="submit" value="Save" class="btn btn-primary" /> > <a class="close cancel" href="#">Cancel</a> > </fieldset> > </form> >- <p>...or...</p> > [% ELSE %] > [% IF ( singleshelf ) %] >- <form name="f1" action="/cgi-bin/koha/opac-addbybiblionumber.pl" method="post"> >+ <form name="f1" action="/cgi-bin/koha/opac-addbybiblionumber.pl" method="post" style="margin-left:0"> > [% INCLUDE 'csrf-token.inc' %] > [% FOREACH biblio IN biblios %] > <input type="hidden" name="biblionumber" value="[% biblio.biblionumber | html %]" /> >@@ -90,21 +117,43 @@ > [% END %] > [% END # IF / existingshelves %] > [% END # / UNLESS newshelf %] >+ [% END # / IF authorized %] >+ </div> >+ </div> >+ </div> >+ </div> >+ >+ [% IF ( authorized && !newshelf && !singleshelf) %] >+ [% #UNLESS ( newshelf ) %] >+ [% #UNLESS ( singleshelf ) %] >+ <div class="form-divider">...or...</div> >+ [% #END %] >+ [% #END %] >+ [% END %] > >+ <div class="container-fluid"> >+ <div class="row"> >+ <div class="col"> >+ <div id="add_to_new_list" class="maincontent"> >+ [% IF ( authorized ) %] > [% UNLESS ( singleshelf ) %] > <form name="f2" method="post" action="/cgi-bin/koha/opac-addbybiblionumber.pl"> > [% INCLUDE 'csrf-token.inc' %] > <fieldset> > <legend>Add to a new list:</legend> >- <label for="newvirtualshelf">List name:</label> >- <input type="text" name="newvirtualshelf" id="newvirtualshelf" size="40" /> >- <label for="category">Category:</label> >- <select name="public" id="public"> >- <option value="0">Private</option> >- [% IF (OpacAllowPublicListCreation) %] >- <option value="1">Public</option> >- [% END %] >- </select> >+ <div> >+ <label for="newvirtualshelf" class="form-label required">List name:</label> >+ <input type="text" name="newvirtualshelf" id="newvirtualshelf" size="40" class="form-control" required="required" /> >+ </div> >+ <div> >+ <label for="public" class="form-label">Category:</label> >+ <select name="public" id="public" class="form-select"> >+ <option value="0">Private</option> >+ [% IF (OpacAllowPublicListCreation) %] >+ <option value="1">Public</option> >+ [% END %] >+ </select> >+ </div> > </fieldset> > [% FOREACH biblio IN biblios %] > <input type="hidden" name="biblionumber" value="[% biblio.biblionumber | html %]" /> >@@ -126,7 +175,6 @@ > [% END %] > </p> > [% END # IF authorized %] >- <p><a href="#" class="close">Close this window.</a></p> > </div> > <!-- / #useraddbybiblionumber --> > </div> >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 %] >- <style> >- .item-status, >- .dt-buttons { >- display: inline; >- } >- @media print { >- body { >- height: 99%; >+ [% FILTER collapse %] >+ <style> >+ .item-status, >+ .dt-buttons { >+ display: inline; > } >- } >- </style> >+ @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; >+ } >+ </style> >+ [% END %] > [% END %] > </head> >-[% INCLUDE 'bodytag.inc' bodyid='basket' %] >+[% INCLUDE 'bodytag.inc' bodyid='basket' bodyclass='popup' %] >+<nav class="navbar fixed-top"> >+ <div class="navbar-brand"> >+ <h1>Your cart</h1> >+ </div> >+ <ul class="navbar-nav"> >+ <li class="nav-item"> >+ <button type="button" class="btn-close close" aria-label="Close"></button> >+ </li> >+ </ul> >+</nav> > <div class="main"> > <div class="container-fluid"> > <div class="row"> > <div class="col"> >- <div id="userbasket" class="maincontent"> >- <h1>Your cart</h1> >- <div id="floating" class="sticky"> >+ <div id="userbasket" class="maincontent [% IF ( verbose ) %]moredetail[% END %]"> >+ <div id="floating" class="sticky" style="top:2.8rem;"> > <div id="toolbar" class="toolbar noprint"> > [% IF ( verbose ) %] > <a href="opac-basket.pl" class="btn btn-link btn-sm brief"><i class="fa fa-fw fa-search-minus" aria-hidden="true"></i> Brief display</a> >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 %] > </head> > [% INCLUDE 'bodytag.inc' bodyid='opac-downloadcart' bodyclass='popup' %] >+<nav class="navbar fixed-top"> >+ <ul class="navbar-nav"> >+ <li class="nav-item"> >+ <button type="button" class="btn-close close" aria-label="Close"></button> >+ </li> >+ </ul> >+</nav> > <div class="main"> > <div class="container-fluid"> > <div class="row"> >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 %] > </head> > [% INCLUDE 'bodytag.inc' bodyid='comment' bodyclass='popup' %] >+<nav class="navbar fixed-top"> >+ <div class="navbar-brand"> >+ <h1>Reviews</h1> >+ </div> >+ <ul class="navbar-nav"> >+ <li class="nav-item"> >+ <button type="button" class="btn-close close" aria-label="Close"></button> >+ </li> >+ </ul> >+</nav> > <div class="main"> > <div class="container-fluid"> > <div class="row"> >- <div class="col order-first order-md-first order-lg-2"> >+ <div class="col"> > <div id="userreview" class="maincontent"> >- <h1>Reviews</h1> > [% IF ( ERRORS ) %] > <div class="alert alert-warning"> > [% FOREACH ERROR IN ERRORS %] >@@ -60,9 +69,9 @@ > </fieldset> > </form> > </div> >- <!-- / #usersendshelfform --> >+ <!-- / #userreview --> > </div> >- <!-- / .span12 --> >+ <!-- / .row --> > </div> > <!-- / .row --> > </div> >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 %] > </head> > [% INCLUDE 'bodytag.inc' bodyid='addtolist' bodyclass='popup' %] >+<nav class="navbar fixed-top"> >+ <div class="navbar-brand"> >+ [% IF ( email_add ) %] >+ [% IF ( SENT ) %] >+ <h1>Message sent</h1> >+ [% END %] >+ [% ELSE %] >+ <h1>Sending your cart</h1> >+ [% END # / IF email_add %] >+ </div> >+ <ul class="navbar-nav"> >+ <li class="nav-item"> >+ <button type="button" class="btn-close close" aria-label="Close"></button> >+ </li> >+ </ul> >+</nav> > <div class="main"> > <div class="container-fluid"> > <div class="row"> >@@ -14,8 +30,7 @@ > [% IF ( email_add ) %] > > [% IF ( SENT ) %] >- <h1>Message sent</h1> >- <div class="alert alert-info"> >+ <div class="alert alert-success"> > <p>The cart was sent to: [% email_add | html %]</p> > </div> > <p><a class="focus close" href="#">Close window</a></p> >@@ -35,7 +50,7 @@ > [% ELSE %] > <form action="/cgi-bin/koha/opac-sendbasket.pl" method="post" id="sendbasketform"> > <fieldset class="brief"> >- <legend><h1>Sending your cart</h1></legend> >+ <legend class="sr-only">Message details</legend> > <label for="email_add">Email address:</label> > <input type="text" id="email_add" name="email_add" size="43" class="focus form-control" /> > <label for="comment">Comment:</label> >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 %] > </head> > [% INCLUDE 'bodytag.inc' bodyid='sendshelf' bodyclass='popup' %] >+<nav class="navbar fixed-top"> >+ <div class="navbar-brand"> >+ [% IF ( email ) %] >+ [% IF ( SENT ) %] >+ <h1>Message sent</h1> >+ [% END %] >+ [% ELSE %] >+ [% IF ( invalidlist || Koha.Preference('OPACDisableSendList') ) %] >+ >+ [% ELSE %] >+ <h1>Sending your list</h1> >+ [% END # / IF invalidlist %] >+ [% END # / IF email %] >+ </div> >+ <ul class="navbar-nav"> >+ <li class="nav-item"> >+ <button type="button" class="btn-close close" aria-label="Close"></button> >+ </li> >+ </ul> >+</nav> > <div class="main"> > <div class="container-fluid"> > <div class="row"> >@@ -13,7 +33,6 @@ > <div id="usersendshelfform" class="maincontent"> > [% IF ( email ) %] > [% IF ( SENT ) %] >- <h1>Message sent</h1> > <div class="alert alert-success"> > <p>The list was sent to: [% email | html %]</p> > </div> >@@ -34,7 +53,7 @@ > <form action="/cgi-bin/koha/opac-sendshelf.pl" method="post" id="sendshelfform"> > [% INCLUDE 'csrf-token.inc' %] > <fieldset class="brief"> >- <legend><h1>Sending your list</h1></legend> >+ <legend class="sr-only">Message details</legend> > <label for="email">Email address:</label> > <input type="text" id="email" name="email" size="43" class="focus form-control" /> > >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
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 40060
:
182923
|
183138
|
183474
|
183475