This patch adds labels to the checkboxes on the "Your cart" page to
improve accessibility for users of screen readers. The labels are
hidden from display because the item titles provide enough visual
context.
Test Plan:
1. Go to the OPAC
2. Search for some items and add them to your cart
3. Inspect the page html and confirm the checkboxes are not labelled
4. Select the "More Details" page and confirm these labels are missing too
5. Apply the patch
6. Inspect the checkboxes on the "Brief display" and "more details" views
7. Confirm that the checkboxes have meaningful labels and that the visual
display of the pages has not changed.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
JD amended patch: fix indentation
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds a "Log out" link to the OPAC header which is hidden by
CSS when JavaScript is enabled.
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).
- Log in to the OPAC with JavaScript disabled in your browser.
- In the header next to the logged-in user's name there should be a
"Log out." link.
- Confirm that it logs the user out.
- Enable JavaScript and repeat the process to confirm that the new
logout link doesn't appear.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes some minor changes to the header menu in the OPAC
visible only to users with JavaScript support.
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).
- View the OPAC with JS disabled in your browser.
- The "Cart" button should not be visible.
- The "List," "Log in," and "Search history" links should be styled
blue like other links.
- Log in to the OPAC and confirm that the "Welcome <name>" link is also
styled like other links.
- Enable JavaScript and verify that the links appear and function just
as they did before the patch.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Changed user summary CSS to style H2 not H3 heading
To test:
1) Go to OPAC homepage
2) Login as a user with at least one loan
3) See that the "User summary" heading is not styled
4) Apply patch
5) Run yarn build --view OPAC
6) Confirm the heading is now styled with grey background
Signed-off-by: Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes minor changes to the SCSS so that the user summary
page's DataTables button flow better at very narrow widths.
Also, the main container should have less padding at narrow widths.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes minor changes to OPAC CSS in order to improve the way
the logged-in user's "your account" page works at narrower browser
widths.
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).
- Log in to the OPAC as a user who has multiple checkouts.
- Test the page at various browser widths, from > 1200 pixels wide to <
300 pixels wide. Your browser's built-in responsive design mode,
found in developer tools, can make these measurements easier.
- At "phone-size" width the tabs ("Checked out," "Overdue," etc) should
start displaying full-width.
- The DataTable controls at the top of the checkouts table should
adapt well as the browser width changes.
- At narrower widths the tables on this page should display much better
than they did before the patch: They should expand to fit the width
of the page.
Edit: Tweaked the display property of the table search field at narrower
browser widths; Converted iCal download link to button to match other
elements in the toolbar.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This correction fixes the previous patch which was dumb and stupid.
This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:
font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148
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).
- Open the OPAC main page in Firefox.
- Click the search type dropdown. The options should be styled using
your system's default sans-serif font rather than a serif font.
- Check that other areas of the OPAC are still styled with the correct
"NotoSans" font. An error with this patch should be obvious when
looking at a logged-in user's checkouts.
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 a new include file for displaying library addresses
according to the AddressFormat system preference. It differs from the
include file used for patrons in the staff interface because library
addresses don't use streetnumber or road types.
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).
- Make sure you have fill address information entered for at least one
library.
- In the OPAC, view the "Libraries" page.
- Check that the format of the library addresses is correct when using
any of the three address formats: de, fr, and us.
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 tweaks the CSS for the advanced search form in the OPAC so
that it adjusts well at various browser widths, including preventing the
form from taking up the whole width of the page at higher browser
widths.
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).
- In the OPAC, go to the advanced search page.
- Test the appearance of the fields in the first "Search for" section,
confirming that everything adjusts well at all widths large and small.
- Click the "More options" button and test that configuration as well.
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 a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:
font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148
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).
- Open the OPAC main page in Firefox.
- Click the search type dropdown. The options should be styled using
your system's default sans-serif font rather than a serif font.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch improves the way we handle required fields in the patron
entry/update form in the OPAC. Instead of doing multiple checks for each
field using mandatory.defined(), the template now loops over a list of
fields and sets a "required" variable for any which are required.
Then, for each form field, the "required" variable is used to set
classes on labels, input fields, and the "required" text hints. The
class on form fields acts as a hook for the jQuery validator plugin. The
class on the text hints allows us to hide the text hint using CSS,
eliminating the necessity of using a template conditional.
The patch also adds the missing validator-strings include which enables
translation of the jQuery validator plugin's validation error messages.
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 -> System preferences and enable
PatronSelfRegistration.
- Select multiple fields to be required using the
PatronSelfRegistrationBorrowerMandatoryField preference.
- In the OPAC, start the process of registering for an account.
- The fields you designated as mandatory should each have a "Required"
label under them.
- Try to submit the form without entering any data. The required fields
should now be highlighted in red and have another label, "This field
is required."
- Fill in the required fields and submit the form. It should submit
correctly.
- Modify the PatronSelfRegistrationBorrowerMandatoryField preference
and select all fields as mandatory. Confirm that all fields in the
patron entry form work correctly.
- Test that form validation works correctly when modifying a logged-in
patron's existing account.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds a search field and export options to the
patron's checkout history table in the OPAC.
This patch also adds some showing/hiding classes to controls which
should only be seen by users with or without JavaScript: The <select>
for resorting the table is hidden when JS is enabled. The tabs for
filtering checkouts from on-site checkouts are hidden when JS is
disabled.
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).
- Log in to the OPAC as a user who has both regular and on-site
checkouts.
- Go to "Your checkout history."
- The table of checkouts should have controls at the top: A search
field, "Clear filter," "Copy," "CSV," and "Print."
- Confirm that the search filter works: Enter some text which will
return results among regular or on-site checkouts.
- It should work correctly to filter the results.
- If you switch tabs, the filter should persist, and correctly filter
the results under "Checkouts" and "On-site checkouts."
- The "Clear filter" button should work correctly to clear your
search.
- Test the export and print button to confirm that they work for each
table.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes a couple of minor corrections to templates related to
OPAC search results: An errant quote, and invalidly repeating ids.
The #login4tags id is changed to a class, and CSS related to this id
(which was not used) is removed. For consistency, the id is changed to a
class on the detail page as well.
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 search in the OPAC. Confirm that the "Log in to add tags"
link still looks correct at various browser widths.
- Confirm that it works to trigger the login modal.
- Validate the source of the page. There should be no errors.
- View the detail page for a bibliographic record.
- The "Log in to add tags" link should look correct and work correctly.
Signed-off-by: Lucas Gass <lucas@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 makes markup and CSS changes to areas of the OPAC classed
with "selections-toolbar," an area of controls found at the top of some
lists of titles: The cart, search results, search history, lists, and
suggestions.
To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Perform a search in the OPAC. On the search results page, confirm that
the various controls work correctly:
- With OpacHighlightedWords enabled, hightlight and unhighlight links
- Select all and clear all links
- Selecting one or more checkboxes should enable the "Select titles
to..." menu.
- Test that adding items to the cart and lists works correctly.
- Test that placing multiple holds work.
- Test that tagging multiple items works.
- From the search results page, add multiple items to the cart.
- Open the cart and confirm that the the controls described above
continue to work correctly.
- Open the search history page, confirm that the toolbar controls work
correctly for all four categories: Current session catalog searches;
previous session catalog searches; current session authority searches;
previous session authority searches.
- On the purchase suggestions page, confirm that "select all" and "clear
all" work, and that deleting multiple suggestions from the toolbar
link works.
- On the list contents page test the same controls: selection,
multi-hold, tagging, and "Remove from list."
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
I'm sure adding a 'hidden' class to a table column used to remove it
from display entirely.. seems that's no longer the case so we add the
CSS back in here.
Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
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 global OPAC css such that selectcol type columns
in tables are fixed width at 1ch to ensure these columns do not get
unneccessarily wide.
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 plan
PAGES: opac-basket, opac-messaging, opac-results, opac-search-history,
opac-suggestions and opac-tags.
1/ Notice that the column containing a checkbox on each of the above
pages is of a mised width, often much larger than required
2/ Apply the patch and rebuild the css file as described above
3/ Notices that the column containing a checkbox on each fo the above
pages is now of a standard, sensible, width.
4/ Signoff
Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch corrects which Bootstrap assets are compiled with the OPAC
CSS -- The file for Bootstrap tooltips should be included.
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).
1) Log into the OPAC.
2) Go to 'your messaging' (opac-messaging.pl).
3) Hover over the Digests only tooltip.
4) Note that the tooltip looks correct.
Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch updates the "your summary" page in the OPAC so that tables on
the logged-in user's page have DataTables controls. The patch also
tweaks the DataTable configuration of some other pages to make them all
more consistent.
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).
- Log in to the OPAC as a user who has checkouts, overdues, and holds.
- On the "your summary" page, confirm that the checkouts table has
controls at the top: A search form and link-style buttons: Clear
filter, Copy, CSV, Print, iCal, Renew selected, and Renew all.
- Confirm that each work correctly.
- At the bottom of the page, the style of the "Renew selected" and
"Renew all" buttons should now be side by side.
- Confirm that both buttons work correctly.
- If necessary, enable the UseCourseReserves system preference.
- Go to the OPAC course reserves page.
- Confirm that there is a working "Search courses" field at the top of
the table.
- View the contents of a course reserve.
- There should be a "Search course reserves" field at the top of the
table.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Addtional test steps:
-Check printing an invoice, inscept the page and make sure none of the colors are set to #000066
-For the OPAC you must rebuild the CSS ((https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)
-Look at some areas where you might print in the OPAC (try a list), inscept the page and make sure there is no colors set to #000066
-You can also use Jonathan's method of 'git grep -l -c 000066' to make sure no occurrences are left.
-I left macles.tt as is because I am not sure about that template
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch updates the OPAC CSS to move the shelving location a
new line after the 'Home library' in list of holdings on the
bibliographic detail page.
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).
- Locate a title in the OPAC which has items with a shelving
location.
- View the detail page for that title. In the table of holdings,
confirm that the shelving location information is on a separate line
from the home library information.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch updates the browse search interface to confirm to new
interface patterns in the Bootstrap 4 framework, especially in the form
markup.
The results list has been changed to a Bootstrap "Collapse" component
configured as an accordion
(https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example).
Instead of loading the bibliographic record results below the list of
terms returned, the bibliographic results are now displayed in the
"panel" expanded below the selected term. Subtitle has been added to the
information displayed about the bibliographic record.
To test you must be using ElasticSearch and the OpacBrowseSearch
preference must be enabled. Apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Open the "Browse search" page in the OPAC.
- Test various searches: Author, Subject, and Title.
- When results are found, the should be displayed as a Bootstrap-styled
accordion widget. Clicking any individual result should expand the
panel containing the corresponding records.
- Clicking the record link should open the bibliographic detail page in
a new window.
- When no results are found, a Bootstrap-style "alert" box should
appear.
Signed-off-by: Victor Grousset/tuxayo <victor@tuxayo.net>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes a minor change to the OPAC SCSS so that instances of
"alert-error" classes are styled the same as messages with the Bootstrap
4 "alert-warning" class. This change is simpler than making multiple
changes to scripts and templates.
To test, apply the patch and try to view a single news item in the OPAC
which doesn't exist:
/cgi-bin/koha/opac-main.pl?news_id=XXX
- You should see a warning message with a pale yellow background, "This
news item does not exist."
- Submit a suggestion, and then submit another suggestion with the
same title.
- You should see a warning message, "The suggestion has not been
added. A suggestion with this title already exists."
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes some updates to the OPAC's CSS in order to make
Bootstrap button styles more consistent. Some CSS has been simplified
and some has been made more specific.
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).
View a variety of pages in the OPAC to confirm that button styles look
good. For example:
- Advanced search.
- Catalog search results.
- Bibligraphic details (including sidebar menu links and menus).
- Subscription details, brief and full
- "Your summary" page, various tabs.
- Lists
The more pages tested the better! Be sure to test the hover and active
states of buttons as well.
Signed off: Lisette Scheer <lisetteslatah@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes some corrections to the OPAC templates to add the
correct classes to a few buttons which were missed during the
Bootstrap 4 upgrade, especially in cases where the buttons only appear
when JavaScript is disabled.
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).
- Locate the bibliographic record for a serial record and view the
details. The subscription should have patron notification set.
- Under the Subscriptions tab, the "Subscribe to email notifications"
button should look correct.
- Click to subscribe and confirm that the buttons during and after the
process look correct.
- Perform a catalog search in the OPAC. On the search results page,
disable JavaScript. This can be done in the browser's developer tools
under "Settings."
- At the top of the table of search results there should be a
correctly-styled "Go" button next to the sorting dropdown menu. It
should work correctly.
- View the contents of a list with JavaScript disabled.
- The "Resort list" button should be correctly-styled and should work to
submit the form.
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>
