This patch removes the use of event attributes (onclick) from the OPAC's
bibliographic detail page template. These events are defined now along
with the other in-page JS.
The patch also adjusts the global "Dopop" function so that the popup
window is a litte bigger. The comments form did not fit well.
In checking for use of the "Dopop" function I found that it was being
redefined in opac-topissues.tt for no reason so I removed it.
To test you must have the OPACComments system preference enabled.
- Log in to the OPAC, locate a bibliographic record, and view the detail
page.
- Under the "Comments" tab, click the "Post your comments on this title"
link. It should trigger a popup window.
- Submit your comment. When the detail page reloads, return to the
"Comments" tab and click the "Edit" link on your comment. The same
popup window should be triggered.
Signed-off-by: Victor Grousset/tuxayo <victor@tuxayo.net>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch adds biblio details to the self-checkout modal. As part of
this we add 'biblio' to the x-koha-embed option on the public items
endpoint, clone the js-biblio-format include from the staff client
adapting it slightly for OPAC use along the way and also import
escape_str and escapeHtml from staff to opac too.
Signed-off-by: Silvia Meakins <smeakins@eso.org>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch updates icons which are listed as having changed names in
this document:
https://fontawesome.com/docs/web/setup/upgrade/upgrade-from-v4
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch adds the option to trigger a redirect back to the current
context after successful login using modal logins triggered from various
places in the OPAC.
To make use of this, simply add 'data-return="true"' to the modal trigger link.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch attemps to simplify the list of holds by moving the form for
changing a hold's pickup library into a modal dialog.
This patch also makes minor tweaks to the CSS for the "X" close button
shown in modal in windows. Instances where modal markup used "x" have
been updated to use the Bootstrap 4 standard "×"
To test, apply the patch and rebuild the OPAC
SCSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)
- Turn on the OPACAllowUserToChangeBranch system preference.
- Log in to the OPAC as a user with holds.
- In the view of your holds, confirm that each hold which can be
modified shows a "Change" link.
- Clicking the link should show a modal window with the title of the
item on hold shown in the header.
- Confirm that changing the pickup location works correctly.
Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch replaces opac-ratings-ajax.pl with a new REST API route
POST /public/biblios/42/ratings
Note that we could go further and refactor the 'start_rating' select
code.
Test plan:
Test the "star ratings" feature at the OPAC, on the different page
where it's displayed.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch adds the new CSS to the global CSS file. Rebuild the OPAC CSS
to test.
The patch also moves the JavaScript for the button from opac-bottom.inc
into global.js and adds accessibility labels to the generated markup.
Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch proposes to add a Bootstrap tooltip to the OPAC masthead's
search field to indicate to the user when SearchMyLibraryFirst is in
effect. I think this lets the form layout stay clean-looking and is more
informative to the user because they don't have to look for the HTML
title tag tooltip.
To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Go to Administration -> Global system preferences.
- Set the OpacAddMastheadLibraryPulldown preference to "Don't add."
- Set the SearchMyLibraryFirst preference to "Limit."
- Go to the OPAC and confirm that the main search field in the masthead
has a filter icon in the background, indicating that searches will be
limited.
- Hover your mouse over the search field and a tooltip should pop up,
"Searching in <library> only"
- The message should also be triggered when you click inside the form
field.
- Change the OpacAddMastheadLibraryPulldown and SearchMyLibraryFirst
preferences again and the form should return to its normal behavior.
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
The OPAC was originally featured a search results facets box that would
collapse at narrower browser widths and show a "Refine your search" link
under the breadcrumbs menu. At some point this broke, with the "Refine
your search" link appearing at the bottom instead.
This patch revises the page to restore the previous behavior.
To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Perform catalog search in the OPAC which will return multiple results.
- View the page at various browser widths. At narrower widths the facets
menu should appear as a "collapsed" box with a "Refine your search"
link.
- Clicking the link should toggle the facets menu visibility.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch adds enquire.js to the print slip template in order to
prevent a JS error.
Also removed is a line from global.js which was added in the previous
patch and which was an unwanted change.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch refactors the code around JavaScript-driven responsive
behavior in the OPAC. The use of Modernizr dropped and the dependency
removed.
This patch also adds a missing listing for Enquire.js licensing on the
"About" page.
To test, apply the patch and perform a catalog search in the OPAC.
- Narrow your browser window until its width falls below 609 pixels
(Using your browser's Responsive Design Mode is helpful for this, e.g.
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode)
- The window should automatically scroll to the "main content" area, in
this case the section headed by "Your search returned..."
- Change your browser window's width until it falls below 768 pixels.
- Scroll to the bottom of the search results where you should find the
"Refine your search" facets box collapsed.
- As you increase your browser width above 768 pixels the facets box
should expand.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch adds enquire.js to the print slip template in order to
prevent a JS error.
Also removed is a line from global.js which was added in the previous
patch and which was an unwanted change.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch refactors the code around JavaScript-driven responsive
behavior in the OPAC. The use of Modernizr dropped and the dependency
removed.
This patch also adds a missing listing for Enquire.js licensing on the
"About" page.
To test, apply the patch and perform a catalog search in the OPAC.
- Narrow your browser window until its width falls below 609 pixels
(Using your browser's Responsive Design Mode is helpful for this, e.g.
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode)
- The window should automatically scroll to the "main content" area, in
this case the section headed by "Your search returned..."
- Change your browser window's width until it falls below 768 pixels.
- Scroll to the bottom of the search results where you should find the
"Refine your search" facets box collapsed.
- As you increase your browser width above 768 pixels the facets box
should expand.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch makes corrections to the markup for the suspend hold modal in
the OPAC. It hadn't been updated during the upgrade to Bootstrap 4.
The JavaScript controlling the "suspend until" datepicker has been
modified because the datepicker pop-up was not positioned correctly in
this new version.
Unrelated: The markup for confirmation modals has been updated to
replace Bootstrap 3's "btn-default" with Bootstrap 4's "btn-secondary."
To test, apply the patch and make sure the SuspendHoldsOpac and
AutoResumeSuspendedHolds system preferences are enabled.
- Log in to the OPAC as a user who has holds.
- On the "Your summary" page open the "Holds" tab.
- In the list of holds, click the "Suspend" button.
- The modal should appear and look correct.
- Test the "Suspend until" field: Clicking in the form field should
trigger the datepicker. It should be positioned correctly under the
form field.
- Confirm that the datepicker populates the field.
- Submit the suspension and confirm that the hold is suspended.
- Click the "Cancel" button for a hold. Confirm that the confirmation
dialog appears correctly.
Edit: Updated class of hidden submit button. Test the page with JS
disabled to test that the "Suspend until" form works correctly.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch updates the version of Bootstrap in the OPAC from 2.3.1 to
4.5.0. The Bootstrap JavaScript files have been replaced with custom
builds of the 4.5.0 JavaScript source files. The Bootstrap CSS is now
built into the OPAC CSS by loading the required Bootstrap 4.5.0 SCSS
files in node_modules.
OPAC SCSS now starts with Bootstrap customizations:
/* Bootstrap variable customizations */
$headings-color: #727272;
...
Followed by loading the necessary Bootstrap SCSS files:
/* Bootstrap imports */
@import "../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../node_modules/bootstrap/scss/variables";
...
Followed by our CSS. The build process for generating compiled CSS now
creates a file which bundles Bootstrap CSS and ours. Removed from the
Koha source: Bootstrap CSS files, Bootstrap "glyphicons" images.
The upgrade to Bootstrap 4 involved a lot of markup changes to conform
with new Bootstrap classes, especially in classes related to the grid.
Besides duplicating the grid we used before, this upgrade adds some new
features made possible by Bootstrap 4.5's use of flexbox as a layout
tool. This includes custom ordering of columns based on class names:
https://getbootstrap.com/docs/4.5/layout/grid/#order-classes.
Other areas where the most changes have been made: Navigation menus,
breadcrumb menus, buttons, dropdowns.
Bootstrap's JavaScript file is now "bootstrap.bundle.min.js" to reflect
the fact that a required JavaScript asset is now distributed separately
in Bootstrap 4. The "bundle" version includes Popper.js.
Unrelated changes: Indentation corrections, removal of invalid
"//<![CDATA[" markers, removal of invalid script type attributes.
To test, apply the patch and run 'yarn install' to install Bootstrap as
an npm module. Run 'yarn build --view opac' to regenerate the OPAC CSS.
Test as many aspect of the OPAC as possible, viewing pages at various
browser widths to confirm that everything adjusts well. Test with
various OPAC interface system preferences enabled and disabled.
Test self checkout and self checkin.
Known issues: RTL support has not been updated.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
The correct spelling of the parameter is resizable
https://developer.mozilla.org/fr/docs/Web/API/Window/open
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds a 'Skip to content' link to the header bar which will
only appear upon the first use of 'tab' to navigate after any fresh page
load in the OPAC.
Test plan
1/ Load any page in the OPAC
2/ Hit the `tab` key
3/ Note the new 'Skip to main content' link appears at the top left of
the screen.
4/ Hit `Enter` or Click the button
5/ Note the page scrolls to the area of the page that has the first block
containing a .maincontent class.
6/ Note that the next available focusable element after the first .maincontent
block has been given focus.
7/ Note that the link has been hidden
Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds the checkEnter function to the OPAC global.js and then applies it to the SCO login page.
TO TEST:
1. Go to SCO login and try entering something in the "Login:" input amd "Password:" input.
2. Pressing enter while in either will automatically submit the form.
3. Apply patch.
4. Type something into the Login: field and press enter, the form should NOT submit.
5. Type something into the Password: field and pess enter, this SHOULD submit the form.
6. Change the syspref SelfCheckoutByLogin to 'Cardnumber'
7. Type something into the Please enter your card number: field, the form should submit.
Signed-off-by: Donnab <donna@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch updates the confirmation buttons to be more specific about
what each one does. My concern was that it wasn't clear that "No" meant
"No receipt" and not "Cancel logging out."
The patch also updates the modal confirmation code so that the modal
body is removed if no message is passed for it.
To test, apply the patch and repeat the previous test plan. When you
click "Finish" you should have the options "Print receipt and end
session" and "End session."
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch adds aria attributes to Font Awesome icons generated by
JavaScript. The icons won't appear under normal circumstances because
the code for displaying the modal dialog should replace the icons with a
text label. The icons are a fallback.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch changes the globally-available confirmModal() function in the
OPAC so that it uses jQuery's html() function for adding information to
the confirmation modal's body. This will allow for more than just plain
text to be added.
This patch also removes some obsolete lines from the JavaScript in
opac-user.tt and renames some variable for clarity.
To test, apply the patch log in to the OPAC as a user who has holds and
article requests.
- Test the following interactions, both the confirmation and cancel
options for each:
- Cancel a hold
- Suspend all holds
- Resume all holds
- Cancel an article request
Signed-off-by: Maryse Simard <maryse.simard@inlibro.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch updates the user summary page in the OPAC so that JavaScript
alerts are replaced with Bootstrap modals. This provides us the ability
to more carefully control the content of confirmation dialogs and their
control buttons.
A global function for defining a modal confirmation boxes has been
added, to which one can pass:
- The modal title
- Body
- Text for submit and cancel buttons
- A callback function to trigger on submit
To test, apply the patch and clear your browser cache if necessary.
- Log in to the OPAC as a user who has holds and article requests.
- Test the following interactions, both the confirmation and cancel
options for each:
- Cancel a hold
- Suspend all holds
- Resume all holds
- Cancel an article request
Signed-off-by: Jose-Mario Monteiro-Santos <jose-mario.monteiro-santos@inLibro.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch adds local copies of the font files specified in the original
patch. A new JavaScript file has been added, fontfaceobserver.min.js,
which helps gracefully load font assets.
https://github.com/bramstein/fontfaceobserver
Information about the new assets has been added to the about page.
When using web fonts, there can be a delay, while the browser loads the
font files, between the time the page loads and the time the fonts
render. Font Face Observer allows us to specify a default font for the
initial page render, and then apply the web font after it has loaded.
To test, apply the patch and regenerate the OPAC css. View any page in
the OPAC and confirm that the custom font renders properly.
View the About page in the staff client and confirm that the new license
information looks correct.
Patch applies and OPAC and license look good. Looking forward to this.
Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Re-add the system preference maxreserves.
All the code using maxreserves is still in place. Though it
is not used in the Reserves module, it is used in all the
scripts where holds are placed.
Also adds a check so that a borrower cannot exceed the maximum
number of allowed holds by using the multi-hold feature via
the opac.
Test Plan:
1) Apply this patch
2) Run updatedatabase
3) Set maxreserves to 3, set opactheme to bootstrap
4) Log into the opac as a patron
5) Place 3 holds
6) Attempt to place a 4th hold
7) Note you get an error message and cannot place a forth hold
8) Delete two of those holds
9) Attempt to place 3 or more holds as a multi-hold
10) You should see a warning that you cannot place this many holds
11) Try to anyway
12) You should see an alert to tell you to reduce the number of holds
you are placing.
13) Reduce the number for holds you are placing to 2
14) Your holds should now be placed
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Tomas Cohen Arazi <tomascohen@gmail.com>
The goal of this theme is to provide a fully-responsive OPAC which
offers a high level of functionality across multiple devices with varied
viewport sizes. Its style is based on the CCSR theme, with elements of
the Bootstrap framework providing default styling of buttons, menus,
modals, etc.
The Bootstrap grid is used everywhere, but Bootstrap's default
responsive breakpoints have been expanded to allow for better
flexibility for our needs.
All non-translation-depended files are in the root directory of this new
theme:
css, images, itemtypeimg, js, less, and lib. Languages.pm has been
modified to ignore the new directories when parsing the theme language
directories.
This theme introduces the use of LESS (http://lesscss.org/) to build
CSS. Three LESS files can be found in the "less" directory: mixins.less,
opac.less, and responsive.less. These three files are compiled into one
CSS file for production: opac.css. "Base" theme styles are found in
opac.less. A few "mixins" (http://lesscss.org/#-mixins) are found in
mixins.less. Any CSS which is conditional on specific media queries is
found in responsive.less.
At the template level some general sturctural changes have been made.
For the most part JavaScript is now at the end of each template as is
recommended for performance reasons. JavaScript formerly in
doc-head-close.inc is now in opac-bottom.inc.
In order to be able to maintain this structure and accommodate
page-specific scripts at the same time the use of BLOCK and PROCESS are
added. By default opac-bottom.inc will PROCESS a "jsinclude" block:
[% PROCESS jsinclude %]
Each page template in the theme must contain this block, even if it is
empty:
[% BLOCK jsinclude %][% END %]
Pages which require that page-specific JavaScript be inserted can add it
to the jsinclude block and it will appear correctly at the bottom of the
rendered page.
The same is true for page-specific CSS. Each page contains a cssinclude
block:
[% BLOCK cssinclude %][% END %]
...which is processed in doc-head-close.inc:
[% PROCESS cssinclude %]
Using these methods helps us maintain a strict separation of CSS links
and blocks (at the top of each page) and JavaScript (at the bottom). A
few exceptions are made for some JavaScript which must be processed
sooner: respond.js (https://github.com/scottjehl/Respond, conditionally
applied to Internet Explorer versions < 9 to allow for layout
responsiveness), the _() function required for JS translatability, and
Modernizr (http://modernizr.com/, a script which detects browser
features and allows us to conditionally load JavaScript based on
available features--or lack thereof).
Another new JavaScript dependency in this theme is enquire.js
(http://wicky.nillia.ms/enquire.js/), which lets us trigger JavaScript
events based on viewport size.
I have made an effort to re-indent the templates in a sane way,
eliminating trailing spaces and tabs. However, I have not wrapped lines
at a specific line length. In order to improve template legibility I
have also tried to insert comments indicating the origin of closing tags
like <div> or template directives like [% END %]:
</div> <!-- / .container-fluid -->
[% END # / IF ( OpacBrowseResults && busc ) %]
TESTING
Proper testing of this theme is no easy task: Every template has been
touched. Each page should work reasonable well at a variety of screen
dimensions. Pages should be tested under many conditions which are
controlled by toggling OPAC system preferences on and off. A variety of
devices, platforms, and browsers should be tested.
Signed-off-by: Galen Charlton <gmc@esilibrary.com>
