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>
There are a few places in the OPAC where we hide the submit button on a
sorting form because the form auto-submits when the selection changes.
These should be hidden using CSS instead of JS to prevent the temporary
appearance of the submit button while the page loads.
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 OPAC search results and OPAC checkout history. On both pages you
should not see a "Go" button next to the <select> input for changing the
sort order.
Disable JavaScript in your browser and test those pages again. The "Go"
button should appear.
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>
This patch tweaks the display of totals on the OPAC 'Fines and charges'
page to clarify between the totals before and after applying credits.
Test Plan:
1) Add some debts and credits to a patrons account
2) Look at the 'Fines and charges' page before applying the patch
3) Look at the 'Fines and charges' page after applying the patch
4) Varify the new layout is an improvment or not
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Nadine Pierre <nadine.pierre@inLibro.com>
Signed-off-by: Maryse Simard <maryse.simard@inlibro.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch makes minor corrections to the template for the OPAC's
recent comments view. These corrections fix errors returned by the HTML
validator.
The patch moves some inline CSS into a class in the global OPAC CSS.
Some minor reindentation has also been done, so use diff with the '-w'
flag.
To reproduce the problem you should have the 'reviewson' system
preference turned on, and your system should have one or more
approved comments. View the "Recent comments" page in the OPAC. Run the
page through the W3C validation service: https://validator.w3.org.
Either by pasting in the URL for the search results (if web accessible)
or by viewing source, copying, and pasting into "Validate by Direct
Input."
This patch addresses one specific error:
- "CSS: font-color: Property font-color doesn't exist."
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).
Try again to reproduce the validation errors. Those errors should no
longer be present. There should be no visible change to the page.
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 use GetCOinS sub to provide an OpenURL link in OPAC search
results. It uses 4 new system preferences:
- OpenURLinOPACResults: enable or disable this feature
- OpenURLResolverURL: url of the openURL resolver
- OpenURLText: text of the link
- OpenURLImageLocation: image of the link
Link is displayed as an image if OpenURLImageLocation is defined, and as
text otherwise.
It works both with and without XSLT enabled.
Changes made to GetCOinSBiblio:
For 'journal':
- Title should be in rft.jtitle instead of rft.title
- rft.date, rft.aulast, rft.aufirst, rft.au, rft.pub and rft.pages have
no meaning for a subscription, so they are simply removed from URL
This patch refactors GetCOinSBiblio, so the construction of URL is done
only at the end. This way we do not have ugly
$var .= "&$value"
in the function body.
Also use URI::Escape instead of custom regexps.
This development consider the value of syspref OPACURLOpenInNewWindow
when building the link.
Test plan:
1/ Enable syspref OPACShowOpenURL and put your OpenURL resolver URL in
OpenURLResolverURL syspref (if you don't have one, just fill it with
some fake URL, you'll have to check if OpenURL links are correct)
2/ If you want, set the other sysprefs OpenURLImageLocation and
OpenURLText
3/ Fill syspref OPACOpenURLItemTypes with some (not all) of your
item types.
4/ Empty sysprefs OPACXSLTDetailsDisplay and OPACXSLTResultsDisplay
5/ Go to OPAC and launch a search.
6/ Check you have in the results (near the title) the OpenURL link (only
for itemtypes that are in OPACOpenURLItemTypes).
Toggle OPACURLOpenInNewWindow syspref and check that the behaviour of
the link is correct.
7/ Go to the detail page of one of those and check you have the OpenURL
link too. (Above tags)
Toggle OPACURLOpenInNewWindow syspref and check that the behaviour of
the link is correct.
8/ Set sysprefs OPACXSLTDetailsDisplay and OPACXSLTResultsDisplay to
"default" and repeat steps 5 to 7
Signed-off-by: Paola Rossi <paola.rossi@cineca.it>
Signed-off-by: Magnus Enger <magnus@libriotech.no>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch makes a few corrections to OPAC CSS to fix colors in the
language menus.
To test, apply the patch and rebuild the OPAC CSS.
- Enable multiple languages in the OPAC, including more than one
language "variation" (fr-FR, fr-CA).
- Set the OpacLangSelectorMode preference to "both."
- In the OPAC, test the language menu in both the header and footer.
When you hover over the sub-menu items the background should be green
and the text color white.
- Perform the same test in the self checkout and self checkin
interfaces.
Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch makes the self-checkin CSS created in Bug 22638 the CSS for
self-checkout as well. The interfaces have the same requirements.
This patch also replaces some old image-based icons with Font Awesome
icons.
To test, apply the patch and rebuild the OPAC CSS. Clear your browser
cache if necessary.
- Enable both self checkout (WebBasedSelfCheck) and self checkin
(SelfCheckInModule).
- Test both interfaces, confirming that the style is consistent for
each and looks correct.
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch updates the Self-checkout pages to match the new OPAC style.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch makes a number of follow-up changes, including:
- Covert remaining icons to Font Awesome
- Convert CSS to SCSS
- Move SCSS which is common to both the OPAC and SCI into separate
files to be including in each during compilation.
- Make minor correction to opac.scss to fix SCSS build warning
To test, apply the patch and rebuild the OPAC CSS. Clear your browser
cache if necessary.
- Enable the self checkin module using using the SelfCheckInModule
system preference.
- Open the self checkin interface and test the checkin process.
Everything should look correct.
- After submitting barcodes for checkin, the "Finish" button should
show a Font Awesome icon instead of an image icon.
- Enable multiple translations and set the OpacLangSelectorMode
preference to show the language menu in the footer.
- Confirm that the language menu looks correct.
- View the regular OPAC to make sure the changes to opac.scss didn't
result in unintended changes to the interface.
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch updates the Self-Checkin CSS to match tne new OPAC design.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch modifies the OPAC CSS so that the language-selection footer
is positioned correctly.
To test, apply the patch and rebuild the OPAC CSS.
- Enable one or more translations in the OPAC
- View a page in the OPAC which can display in your browser without a
vertical scrollbar (for instance, the OPAC main page with no news
items or OpacMainUserBlock).
- The language-selection footer should appear at the bottom of the
screen. At smaller browser heights the footer should scroll
offscreen.
- Test with content in the opaccredits system preference, and with
OpacKohaUrl enabled. The footer should still be positioned
correctly.
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch makes a number of updates to the display of news in the OPAC.
I hope that this makes OPAC news nicer/easier to read. It includes style
changes to make the RSS link look better too.
To test, apply the patch and regenerate the OPAC CSS. You should have
multiple active news items. View the OPAC news with varied values of
NewsAuthorDisplay and OpacNewsLibrarySelect.
Test the single news item view. Test with Quotes on and off, and with
OpacMainUserBlock populated or not.
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch removes the RSS icon image (feed-icon-16x16.png) from the
OPAC and replaces it with Font Awesome icons styled to match.
To test, apply the patch and regenerate the OPAC CSS. View the
following pages, confirming that the RSS icon looks correct:
- OPAC home page (RSS news icon)
- Search results page (Subscribe to search)
- Recent comments
- Search history
- Lists -> View list
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Test plan:
1) Compare holds table on selfcheckout and opac-user page, you will see
the difference: In self checkout there are labels like Status, Pickup
location, and so on in every table cell.
2) Apply the patch, the label in selfcheckout dissappear
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
In record detail page, item location is displayed with CSS using class "shelvingloc".
Many many places at intranet and OPAC can use this class.
It allows to change display in all places using CSS customisation.
This patch removes the CSS "display:block" for class "shelvingloc".
Some places where using "inline" to correct the display.
I think the display should not be managed in template.
So it will be inline by default and it can be changed by custom CSS, on all places or depending on a selctor.
Test plan :
1) Compile SCSS to CSS
2) Add to preferences IntranetUserCSS and OPACUserCSS : .shelvingloc { color:red }
3) Go to pages impacted by patch, be sure to look at cart with "more details"
4) You see item location italic and red
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch replaces our current jQuery star ratings plugin with a newer
plugin which will be compatible with newer versions of jQuery:
http://antenna.io/demo/jquery-bar-rating/examples/
To test you should have one or more records in your catalog with star
ratings.
- Apply the patch and set the OpacStarRatings system preference
to "results and details"
- Perform a search in the catalog which will return one or more titles
which have ratings.
- Confirm that the ratings appear correctly and the ratings are
read-only.
- Open the "normal" detail page for that record.
- Confirm that the star rating appears correctly.
- Test setting and re-setting your star rating. Confirm that it is
saved.
- Confirm that the "cancel rating" link appears when you have a rating
set, and that it disappears after you click it.
- Test that the "only details" and disabled options of the
OpacStarRatings preference work as they should.
- Confirm that information about the plugin appears on the About page in
the staff client, replacing the old star ratings plugin information.
Signed-off-by: Pierre-Marc Thibault <pierre-marc.thibault@inLibro.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch takes the suggestions in Bug 10562 and implements those
changes in MARC21slim2OPACResults.xsl. This patch also makes the
following changes:
- De-duplicate famfamfam icons: Remove the /silk subdirectory and move
non-duplicates to famfamfam/; Correct paths to these images in
templates and CSS
- Improve the granularity of some material type icon choices: Show
"Film," "Picture," or "Object" instead of "Visual material."
- Remove unnecessary title attributes from material type images
- Implement the kind of changes made in Bug 18235, "Add classes to
material type icons on result lists and detail pages"
Signed-off-by: Charles Farmer <charles.farmer@inLibro.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch adds two new CSS classes specific to Adlibris covers.
Sponsored-By: Halland County Library
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch removes the padding for mobile screen sizes.
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
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>
A suggestion for updating the OPAC CSS
This patch updates the css styling of the OPAC
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch adds CSS to exclude serial issues history links from having
an icon background. There is no part of the icon sprite which is
designed for that purpose.
This patch also tweaks the positioning of a couple of icons and makes
other minor corrections to related CSS.
To test, apply the patch and regenerate the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Open the detail page for a bibliographic record in the OPAC which has
subscriptions.
- Click the "More details" link.
- Confirm that the "Brief history" and "Full history" links have no
icon.
- Click the "Full history" link and do the same.
- On the normal, MARC, and ISBD views, confirm that the icons for those
links look correct.
- View the purchase suggestions page as a logged-in user. Confirm that
the "new purchase suggestion" link looks correct.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Add RecordedBooks to the users page in the public interface
To Test:
1/ Apply all 3 patches
2/ Set the sysprefs to valid values (you will need a test account with RecordedBooks)
3/ Try a search
4/ Login to the OPAC, try to place a hold, or check an item out
5/ Check the opac-user page, see if your items are showing on the oneclickdigital tab
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch corrects the CSS for the user icon which appears when the
browser width is very narrow.
To test, apply the patch, rebuild CSS, and clear your browser cache if
necessary. View the OPAC with and without a user logged in and confirm
that the user icon at the top of the page looks correct at narrow
browser widths.
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch replaces Bootstrap's glyphicons with Font Awesome icons.
To test, apply the patch and clear your browser cache and regenerate the
OPAC CSS from the LESS file if necessary. Check these icons and confirm
they look correct:
- Cart and Lists icons in the OPAC header
- User icon in the header when the browser window is narrow
- Languages menu when multiple languages are installed and
the OpacLangSelectorMode system preference is "top" or "both top and
footer."
- Set the SuspendHoldsOpac system preference to "allow" and log in to
the OPAC as a user who has one or more holds.
- Check the appearance of the "suspend" and "resume" buttons both in
the table of holds and at the bottom.
- With one or more clubs defined, log in to the OPAC and check the
"Clubs" tab on the user summary page. The "Enroll" and "Cancel
enrollment" buttons should look correct.
- On the "your messaging" tab in the OPAC, the "Digests only"
information icon should look correct.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch moves generation of the OPAC detail page's results browser
from JavaScript to the template. This makes the template easier to
understand and easier to debug. It also makes it possible for the widget
to be completely non-dependent on JavaScript.
To test, apply the patch and regenerate the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)
- Enable the OpacBrowseResults system preference and perform a search
in the OPAC which will return multiple results.
- Click on any title in the first page of search results.
- On the bibliographic detail page there should be a "Browse results"
link in the right-hand sidebar just as before.
- Test that the "Previous," "Back to results," and "Next" links work
correctly.
- Click the "Browse results" link. A list of the first 20 search
results should appear. An arrow should indicate the title you're
viewing.
- Click any title in the results browser. The page should correctly
load that record.
- Clicking the numbered links at the top of the results browser
should do the same.
Signed-off-by: Cab Vinton <bibliwho@gmail.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch revises the style of the OPAC's login form modal view. The
goal is simply to make it look nicer.
To test, apply the patch and regenerate the OPAC's CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
In the OPAC, click the "Log in to your account" link at the top of the
page. It should trigger the login modal. While the modal is displayed,
resize the browser width to confirm that the form handles different
widths well.
Sign off if you think this is an improvement.
Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch catches the SCSS up to the latest changes in master:
Changes to opac.less:
Bug 20756
Bug 20559
Bug 7547
Changes to print.less:
Bug 16575
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch converts the OPAC LESS files to SCSS. In the process of
converting opac.less (and other .less files) to .scss, I have improved
the completeness of the nesting, reordered properties, and in general
done cleanup based on rules in .scss-lint.yml. All of these changes
should have no impact on the style of the OPAC.
This patch modifies the commands used to compile CSS so that OPAC and
staff assets can be processed separately:
'yarn build' <-- Builds the staff client assets by default
'yarn build --view opac' <-- Builds OPAC assets
To test, apply the patch and compile the CSS by running the command
above (or apply the follow-up patch with compiled CSS).
Do a thorough review of the OPAC, taking care to cover as many pages as
possible and checking responsive behavior at the same time. There should
be no visual differences in the OPAC before and after applying the
patch.
Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
