This patch attaches a focus() call to the login modal's "shown.bs.modal"
event so that the cursor focus is set to the username field when the
login modal is displayed.
To test, apply the patch and confirm that your OPAC uses the regular
login process--not casAuthentication or GoogleOpenIDConnect.
Click the "Log in to your account" link in the header. A the login form
should appear in a modal dialog, and the focus should be on the username
field.
The same should be true if you trigger the modal from other
locations, for instance: "Log in to add tags" on the bibliographic
detail page or the tag cloud page.
Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov>
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>
This patch removes some redundant code from the OPAC JavaScript which
was causing problems with the show/hide action on two controls which are
shown only at narrower browser widths: The "Your account" menu shown
when the user is on a user-related page, and the "Refine your search"
menu shown on the search results page.
To test, apply the patch and go to the OPAC. Narrow your browser width
to below 768 pixels.
- Perform a search.
- On the search results page you should see a "Refine your search"
link at the top of the results. Clicking it should expand and
collapse the facets menu.
- Log in to the OPAC.
- On the "Your summary" page there should be a "Your account menu" link
at the top of the main part of the page. Clicking it should expand
and collapse the account menu.
- Verify that these menus display correctly when you widen and narrow
the browser window.
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 adds the ability for logged-in patrons to add star ratings to
titles in their list of current checkouts and on the reading history
page.
The reading history page previously only showed existing ratings. Now it
will allow the entry of ratings as well.
The JS and markup for the feature are in separate include files to
facilitate re-use. It includes markup for non-js display of ratings and
js-driven ratings controls.
To test, apply the patch and set the OpacStarRatings to all, "results,
details, and user" pages.
- Log in to the OPAC as a user with checkouts.
- On the "your summary" page, test the features of setting star
ratings:
- Any title with existing ratings should show the rating and the
average rating number.
- Set a rating. Confirm that it shows a message with your rating.
- Click the "cancel rating" link, and confirm that your rating is
removed.
- Set a rating and reload the page. Confirm that the rating was
saved.
- Test the "cancel rating" link on the title you set before you
reloaded the page. The rating should be cancelled.
- Test the same functionality on the "your reading history" page.
- Test these pages with the OpacStarRatings preference set to "only
details" or "no." The pages should function correctly.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch updates templates and CSS so that the language-selection menu
in the header will not be hidden if the browser width is too narrow.
This patch also makes some more general improvements to the responsive
adaptability of the header elements.
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).
Test the changes by viewing pages in the OPAC and adjusting your browser
width, paying attention to how elements in the top menu adapt to
different sizes. Test under varying conditions:
- Logged in/not loggeed user
- Search history enabled and disabled
- OpacLangSelectorMode showing menu in header or not
- opacuserlogin enabled or disabled
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch adds some JavaScript-driven "breakpoints" to the OPAC so that
on the search results page the "Refine your search" heading has
different behaviors depending on whether facets are being displayed as a
sidebar.
To test, apply the patch and regenerate the OPAC SCSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
Go to the OPAC and resize your browser to be greater than ~ 800px wide.
- Perform a catalog search which will return several results.
- In the left-hand sidebar of the search results page, the "Refine your
search" heading should not be styled like a link. Hovering over it
with the mouse should not change the cursor to the pointing-hand.
- Narrow your browser window until the sidebar collapses.
- The "Refine your search" heading should now be styled as a link,
with a right-arrow icon before it.
- Clicking it should expand the facets. The icon should change to a
down-arrow.
- Widen your browser window and test again.
- Perform the same tests when starting with a narrow browser window.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch adds the "hc-sticky" JavaScript library to the OPAC and uses
it to make the search results toolbar "stick" to the top of the page as
the user scrolls down.
This patch also moves search results pagination into the toolbar so that
pagination links are available. Font Awesome icons are added to the
pagination include to replace arrow HTML entities.
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 a catalog search in the OPAC which will return multiple pages
of results. Confirm that the toolbar "sticks" and that all controls
in the toolbar work correctly.
- Test at various browser widths to confirm that it adapt well to
various sizes.
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.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>
Owen Leonard