This patch adds additional CSS to better cover various states of buttons
in the OPAC.
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, test various green buttons in varous states: default,
hover, and active (the appearance when the button is clicked but
before the mouse button is released).
- The button should be styled in various shades of green in all cases.
- Test a disabled button by performing a catalog search.
- On the results page, before any checkboxes are checked, the "Save"
button should look correct.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch makes further changes to the detail and results XSLT in the
OPAC so that previously pipe-separated fields are styled with CSS. The
following tags are modified on the detail page:
020 ISBN
022 ISSN
050 LOC classification
060 NLM classification
082 DDC classification
084 Other classification
130/240/730 Uniform titles
246 Other title
336 Content type
337 Media type
338 Carrier type
385 Audience
508 Production credits
583 Action note
586 Awards
655 Genre/Form
700/710/711 Contained works
700/710/711 Related works
770 Supplement
772 Supplement to
856 Online resources
These are modified on the results page:
028 Publisher number
246 Other title
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 order to better see the effect of the CSS change you can add
something ike this to your OPACUserCSS system preference:
.resource_list li::after {
content: "♦";
}
View catalog search results and detail pages for records which contain
repeated entries from the tag list above. The entries should be
separated by "|" without customization, or the symbol from your
OPACUserCSS if you specified one.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
To test:
1. Have a record with many 856 links
2. Look at the links on both the results and detail pages.
3. Look at the '|' and notice it is outside any HTML element, making it
hard to remove.
4. Apply the patch and regenerate the CSS
5. Look at both the pages again and notice that the '|' is now a psuedo
element.
6. It should look identical to the way it did without the patch
7. Switch the system pref OPACURLOpenInNewWindow to 'do' and make sure
the the links look and function right still.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
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 upgrades the jstree plugin in the OPAC and the staff
interface. The old version had compatibility issues with the latest
jQuery.
Also changed: When viewing an authority record in the OPAC's MARC view,
clicking one of the hierarchy links should now open the MARC view again
rather than reverting to the normal view.
To test, apply the patch and rebuild the staff interface and OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
To test you must have the AuthDisplayHierarchy system preference
enabled, and you must have some authorities data which can be displayed
as a hierarchy. From the test plan for Bug 8523:
"Create authority records with a hierarchy of see also fields (in
MARC21/NORMARC, you'll be using 5xx fields for this, with a subfield
$w = 'g' for broader terms and subfield $w = 'h' for narrower terms)"
- Perform an authority search in the OPAC which will return one of your
modified authority records.
- View the record.
- There should be an expanded tree menu at the top of the authority
information.
- Clicking the arrows in the tree should correctly expand
and collapse the nodes.
- Clicking the authority record link in the node should load that
record.
- Test also from the OPAC's MARC view of the authority record.
- Confirm that clicking an authority record link in the MARC view
opens the corresponding record in MARC view again.
- Perform the same tests in the staff interface.
Signed-off-by: Eugene Espinoza <eugenegf@yahoo.com>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch adds Flatpickr assets to the OPAC (JS and SCSS). A few pages
are updated to use Flatpickr instead of jQueryUI datepickers.
jQueryUI CSS files are updated because they contain some font family
definitions which are simple to remove but overly complicated to
override. Without this change some Font Awesome icons are broken when
they appear inside jQueryUI widgets like tabs.
We don't run the risk of having this change overwritten by a future
jQueryUI upgrade because there won't be any more.
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 into the OPAC and check that date pickers on the following pages
work correctly, including month selection, year selection, forward
and back arrows, and "Clear date" controls:
- Go to the "Your personal details" page.
- Check the "Date of birth" field.
- With SuspendHoldsOpac enabled, view the "Your summary" page for a
patron with pending holds.
- Click "Suspend" to confirm that the "Suspend until" datepicker
works correctly for more than one hold.
- From the catalog search results page, select multiple results and
click the "Place hold" link.
- On the hold confirmation page, click "Show more options" to test
the "Hold starts on date" (with OPACAllowHoldDateInFuture enabled)
and the "Hold not needed after" fields.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
To test:
1. Do a search for something where the search terms will be in the 505
note.
2. Visit the OPAC detail page of the record.
3. The first occurance of the term highlighting will include the CSS
pseduo element "→ ";
4. Apply patch
5. Do the stuff to regenerate the CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface)
6. Do 1 & 2 again.
7. No weird psuedo element in the term highlighting
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch modifies the OPAC SCSS so that a "base theme color" variable
is defined which can be used to color button backgrounds and similar
elements. The patch also moves some other colors into variables and
removes some unused CSS.
The Koha logo which is displayed in the upper left corner of the OPAC
has been modified to use the same color.
To test, apply the patch and repeat the previous test plan.
Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This patch changed the base colour of OPAC buttons to increase the
contrast ratio, improving accessibility and making the button text
easier to read.
To test:
1. Use an accessibility tool (e.g. Chrome's Lighthouse tool) to check
the contrast ratio on the OPAC
2. Confirm that the OPAC buttons don't have sufficient colour contrast
3. Apply the patch and rebuild css:
yarn build --view opac
4. Use the accessibility tool to confirm the button contrast ratio now
meets minimum accessibility requirements
5. Check that the OPAC still looks ok after the changes
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: jeremy breuillard <jeremy.breuillard@biblibre.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
To test:
1. Make some lists and look at them in the OPAC
2. Have some content in your OPACCredits news section
3. Look at some lists and try clicking 'Print list'
4. You will see the moresearches (top navigation) and opaccredits content
5. apply patch and regenearte the CSS
6. Do 3 again, you should not see the contents of moresearches (top navigation) and opaccredits content
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
This commit adjusts the CSS surrounding the display of request
metadata, it improves the display for metadata with long key names.
Test plan:
- Do not apply patch
- Create a FreeForm ILL request with a custom metadata field with a long
name
- View the created request
- Observe that the long metadata name breaks the display of the metadata
- Apply the patch
- View the created request
=> TEST: Observe that the display is no longer broken
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 makes changes to the OPAC Cart's CSS and JS so that the cart
pop-up message display more consistently. The CSS is changed to use
position "fixed" instead of "absolute." This allows the message to
display without recalculating the position every time, and keeps the
appearance we expect.
The z-index of the message is also increase to prevent it from being
hidden behind a floating toolbar.
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
results.
- In the list of search results, click the "Add to cart" link next to
several search results. Each time you should see a message appear in
the upper left corner of the screen, "The item has been added to the
cart."
- The position of the messages should be consistent no matter how far
down the page you scroll.
- Test again after adding content to the OpacHeader region. One way to
do this is to add the following to the OpacUserJS preference:
$(document).ready(function(){
$("#wrapper").prepend('<img src="https://generative-placeholders.glitch.me/image?width=900&height=200&style=triangles&gap=30">');
});
- Test at various browser widths, from a phone-sized screen width up to
wide desktop-sized.
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 display so that rather than displaying the
components using the main XSLT and then using CSS to move them into a
box on the right side for display, which causes issues with RTL records;
We instead add them in a new tab beneath the rest of the record details
alongside holdings and other details.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Andrew Nugged <nugged@gmail.com>
Bug 11175: (QA follow-up) Fixes for bug 12561
Bug 12561 changed the prototype for XSLTParse4Display so this patcha
accounts for the additional calls to that method introduced in this
patchset.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Andrew Nugged <nugged@gmail.com>
Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Shows the component records of a host, on the hosts detail view in
staff client or OPAC, with clickable links to the component records.
The host does not require linking entries to the components, but
components do require a link to the host record via 773$w.
Adds a new search index, Control-number-identifier (aka cni), which
indexes the 003 controlfield.
Adds 'Yet Another System Preference', ShowComponentRecords, which can
be used to turn this feature on or off in staff client and/or OPAC,
and defaults to off.
When looking up the component part records, the code searches for
records with (773$w=Host001 and 003=Host003) or 773$w='Host003 Host001'
or, if the 003 is not defined in the Host, 773$w=Host001.
Does not use easyanalytics or useControlNumber.
Only for MARC21 biblios - UNIMARC has not been updated.
staff-global.css and opac.css have not been recreated, so you need
to use sass to recreate those from staff-global.scss and opac.scss
Test plan:
0) Apply patch
1) perl bulkmarcimport -file /tmp/easypiano.mrc -m MARCXML
(This file is an attachment on the bug)
2) rebuild the zebra biblio index
3) Search for "easy piano" in staff client, and go to
the biblio detail page. You should not see anything different
in the record detail page.
4) Do the same on OPAC.
5) Change the ShowComponentRecords syspref appropriately and check
the record detail page in staff client and OPAC.
You should see a list of component part records.
Rebased-by: Joonas Kylmälä <joonas.kylmala@helsinki.fi>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Pasi Kallinen <pasi.kallinen@koha-suomi.fi>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Andrew Nugged <nugged@gmail.com>
JD amended path
- if ($xslsyspref =~ m/Details/) {
+ if ( $xslsyspref eq "OPACXSLTDetailsDisplay" || $xslsyspref eq "XSLTDetailsDisplay" ) {
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 a few more corrections to OPAC CSS in order to avoid
having elements which lack sufficient contrast, in particular parts of
the interface where a standard-colored link appears on a darker
background.
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)
Check the following pages/areas:
- Breadcrumbs navigation
- Datatables buttons (on the "Your summary" page)
- Bibliographic view tabs (Normal/MARC/ISBD) on the bibliographic detail
pages.
- "Action" menu on the bibliographic detail pages: Place hold, print,
etc.
- Links inside "striped" tables: Links on the alternate grey background
are darker to increase contrast.
- Sidebar links on user pages: Your summary, your charges, etc.
- Tag cloud: Approved tags in the weighted list.
Signed-off-by: Jérémy Breuillard <jeremy.breuillard@biblibre.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch corrects the CSS for generating a chevron-style divider
between breadcrumb items. The CSS copied from staff-global.scss needed
some tweaks to make it work in the OPAC with Bootstrap 4.
Also changed: The Base64-encoded SVG is converted to plain based on
https://css-tricks.com/probably-dont-base64-svg/
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Modified breadcrumbs to be accessible, in particular for a
screen-reader. Also ensured the breadcrumbs were all consistent.
Made the block of breadcrumbs to be a <nav id="breadcrumbs"
aria-label="Breadcrumb" class="breadcrumbs"> with an ordered list
inside. The last breadcrumb also has aria-current="page" to specify that
it is the current 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)
- Confirm that OPAC templates are updated consistently to use
breadcrumbs markup beginning with '<nav
id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">'
- Pages in the OPAC should look consistent, with the last breadcrumb
styled as text and with the "aria-current" attribute "page."
Sponsored-by: Catalyst IT
Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Updates opac.scss file so the breadcrumbs will appear the same as Bug
27846 (Staff Client breadcrumbs).
This works but the file may need to be changed/cleaned up so that there
is not unnecessary information in it.
Sponsored-by: Catalyst IT
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 style changes like the ones made in Bug 28179. It also
addresses a bug with the way the verify_images() function was firing.
I've moved the function outside of document.ready() and added a call to
it on window load, consistent with how it works in the staff client.
I've removed a redundant call to verify_images() from the footer include
file, opac-bottom.inc.
The cosmetic changes replace the Chocolat image icons with new SVG
assets based on Bootstrap Icons (https://icons.getbootstrap.com/). The
color changes I think help the controls to be more visible.
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Found a bug and ended up with this solution, suggestions welcomed!
example with OpenLibrary with isbn=9780670026623, the image is a bit
higher than others and then the cover-nav buttons are on top of
.contentblock and cannot be clicked
Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch is the OPAC version of
Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface
But there were several difficulties as the staff and OPAC code diverged
a lot.
First we are going to apply the different enhancements that have been
made staff-side:
- Display all the local cover image on the bibliographic detail pages
(before this patch only the first one was displayed)
- The slider functionality added by bug 25031
Test plan:
All the cover images are affected, all the different sources will be
tested.
All the steps will be done on the same bibliographic record.
1. Local cover images
a. Turn on OPACLocalCoverImages and AllowMultipleCover
b. Add several local cover images to a bibliographic record
c. Add several local cover images to an item
d. Click on an image and confirm that it is displayed in a gallery and
you can navigate see all the images attached to the bibliographic
record
e. Same for items
2. Adlibris
a. Turn on AdlibrisCoversEnabled
b. Edit the biliographic record and add an ISBN that will return a
cover image for this service (9780670026623 for instance)
c. Display the cover images in the gallery
d. Note the link to the adlibris.com website at the bottom
3. Amazon
a. Turn on OPACAmazonCoverImages
b. Display the cover images in the gallery
4. Coce
a. Turn on OpacCoce, set CoceHost to "http://coce.tamil.fr:8080"
and select some values for CoceProviders.
b. Display the cover images in the gallery
5. Custom cover images
a. Turn on OPACCustomCoverImages and set CustomCoverImagesURL to https://covers.openlibrary.org/b/isbn/{isbn}-M.jpg
of anything else meaningful
b. Display the cover images in the gallery
QA Note: Other sources have been removed by this patch but will be
re-added by follow-ups
Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
Signed-off-by: Rasmus Leißner <rasmus.leissner@solutions-factory.de>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch removes integration of the Adlibris cover service which has
been discontinued.
To test, apply the patch and rebuild the OPAC and staff interface CSS:
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Run the database update.
- Go to Administration -> System preferences -> Enhanced content. You
should see no Adlibris-related preferences.
- Perform a catalog search and confirm that the search result and detail
pages look correct.
- Enable one or more other cover image services and test that search
results and detail page look correct.
- Perform the same test in the OPAC including these pages:
- Catalog search results
- Bibliographic detail page
- Lists
- Comments
- User summary
- User reading history
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 modifications to OPAC templates to make the Google
login options 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).
- In the staff interface, enable the GoogleOpenIDConnect preference, and
populate the GoogleOAuth2ClientID the GoogleOAuth2ClientSecret with
values (they don't need to be valid).
- On the OPAC main page you should see a "Log in with Google" button
above the Koha login form.
- If you click the "Log in to your account" link at the top of the page
you should see a "Log in with Google" button in the modal window
- If you navigate directly to /cgi-bin/koha/opac-user.pl when not logged
in you should see the same "Log in with Google" button on that page.
- In each case the Google button should point to /cgi-bin/koha/svc/auth/googleopenidconnect
- If you disable GoogleOpenIDConnect the buttons should disappear.
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 makes a minor change to CSS to fix the display of tags and
lists on the OPAC search results page so that the list doesn't have
extra padding.
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).
- To test you should be able to perform a catalog search in the OPAC
which will return results which have one or more tags and which are on
one or more lists.
- In the OPAC search results, confirm that there isn't extra padding
between the "Tags:" and "Lists:" labels and their values.
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
The gender/sex and GDPR inputs were slightly misaligned (by
1.5em). Now they are aligned with the other inputs which have a width
of 10em (9em width + margin 1em). The label assignments and required
attributes for input elements are made also consistent.
To test:
1) Enable GDPR_Policy syspref
2) Apply patch, run "yarn build --view opac", restart plack
3) Go to /cgi-bin/koha/opac-memberentry.pl
4) Check that the GDPR input box shows the required text now in red
color
5) Check that the alignment of sex/gender and GDPR input matches with
the other inputs perfectly.
Signed-off-by: Hayley Pelham <hayleypelham@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 changes the text colour for the purchase
suggestion box on the OPAC search results page to
make the text easier to read and improve accessibility.
To test:
1. Log in to the OPAC and search for something
2. Use an accessibility tool (e.g. Chrome's
Lighthouse tool) to check the contrast ratio
3. Confirm that the Purchase suggestion text
fails to meet accessibility requirements
4. Apply the patch and rebuild CSS:
yarn build --view opac
5. Confirm the text contrast ratio now meets
minimum accessibility requirements
6. Check that the OPAC still looks ok after
the changes.
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 changes the colour of the label text in
OPAC search results to increase the contrast ratio,
improve accessibility and make the text easier to read.
To test:
1. Search for something on the OPAC
2. Use an accessibility tool (e.g. Chrome's Lighthouse
tool) to check the contrast ratio
3. Confirm that the labels (Edition, Format etc.) in the
results summary have insufficient contrast
4. Apply the patch and rebuild CSS:
yarn build --view opac
5. Use the accessibility tool to confirm the contrast
ratio now meets minimum accessibility requirements
6. Check that the OPAC still looks ok after the changes
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 changes the colour of the clear search history link
on the OPAC to increase the contrast ratio, improve accessibility
and makes the text easier to read.
To test:
1. Go to the OPAC homepage
2. Use an accessibility tool (e.g Chrome's
Lighthouse tool) to check the contrast ratio
3. Confirm that the clear search history link
has insufficient contrast
4. Apply the patch and rebuild css:
yarn build --view opac
5. Confirm that the contrast ratio now
meets minimum accessibility requirements
6. Check the OPAC still looks ok after the changes
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch changes the colour of the OPAC User Summary heading text to
increase the contrast ratio, improving accessibility and making the
text easier to read.
To test:
1. Log in to the OPAC homepage as a user with items checked out
2. Use an accessibility tool (e.g. Chrome's Lighthouse tool) to test the
contrast ratio.
3. Confirm the UserSummary heading has insufficient contrast.
4. Apply the patch and rebuild css:
yarn build --view opac
5. Use the accessibility tool to confirm the contrast ratio now meets
accessibility requirements
6. Check that the OPAC still looks ok after the changes
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch changes the colour of links on the OPAC
to improve the contrast ratio and make the link
text easier to read. This accessibility issue was
identified using the WebAIM WAVE accessibility
browser extension and Google Chrome's Lighthouse
tool.
To test:
1. Use an accessibility tool (e.g. Chrome's
Lighthouse tool) to test the contrast ratio.
2. Confirm that some links (e.g. breadcrumb links
and title links in search results) have
insufficient contrast.
3. Apply the patch and rebuild the OPAC CSS:
yarn build --view opac
4. Use the accessibility tool to confirm the
contrast ratio meets minimum requirements
5. Check that the OPAC still looks ok after the
changes.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch changes the colour of the masthead
search label to improve accessibility and make it
easier to read.
To test:
1. Use an accessibility tool (e.g. Chrome's
Lighthouse tool) to test the contrast ratio.
2. Confirm that the search label has insufficient
contrast.
3. Apply the patch and rebuild the OPAC CSS:
yarn build --view opac
4. Use the accessibility tool to confirm the
contrast ratio now meets accessibility
requirements.
5. Check that the OPAC still looks ok after
the changes.
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 changes the colour of the navigation
links on the OPAC (Cart, Lists etc.) to improve
the contrast ration and make them easier to read.
To test:
1. Use an accessibility tool (e.g. Chrome's
Lighthouse tool) to check the contrast
ratio on the OPAC
2. Confirm that the navigation links have
insufficient contrast
3. Apply the patch and rebuild the OPAC css:
yarn build --view opac
4. Use the accessibility tool to confirm
the contrast ratio meets the minimum
accessibility requirements
5. Check that the OPAC looks ok after the
changes
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>
Actually this rule does nothing, it defines same background color as "body" : #fcf9fc
Test plan :
1) Without patch look at OPAC header
2) With patch OPAC header should have same background color
Signed-off-by: Joonas Kylmälä <joonas.kylmala@iki.fi>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Actually looking at a record search or details, we see a black label
(for example "Author:") and a grey metadata (for example "J.R.R Tolkien").
Seems bad for accessibility.
In my opinion the most important to see is the metadata not the label.
It is possible to change with a custom CSS but I open this report to
propose to change default display.
Test plan :
1) Apply patch and build CSS in OPAC and staff interface
2) Search for any record in OPAC/Staff interface
3) You see grey label and black metadata
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 "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>
