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>
Previously the code assumed that $t indicates a new line in the
listing. But this is not true. The standard tells us that -- or
.-- will indicate a new item.
"In records formulated according to AACR 2, a space-hyphen-hyphen-space
( -- ) is recorded between each item in the contents note unless a
delimiter/subfield code follows in which case there is no ending space.
In pre-AACR 2 records, items are separated by a period-hyphen-hyphen (.--)."
The previous logic did no longer work with $g added. From the LOC
examples:
This would work:
505 2 0 $tBaptisms, 1816-1872 --$tChurch members, 1816-1831 --$tHistory of the Second Presbyterian Church of West Durham /$rby L. H. Fellows.
505 0 0 $tQuatrain II$g(16:35) --$tWater ways$g(1:57) --$tWaves$g(10:49).
This wouldn't:
505 1 0 $gNr. 1.$tRegion Neusiedlersee --$gNr. 2.$tRegion Rosalia/Lithagebirge --$gNr. 3.$tRegion Mettelburgenland --$gNr. 4.$tRegion südliches Burgenland --$gNr. 5.$tRegion Südburgland
With the patches applied, all examples should display nicely now.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch attempts to improve the column wrapping for the holdingst
datatable and sets the tabel to fixed width to prevent overlapping
with other content on high zoom levels/low width screen sizes.
Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to an item with holdings visible in the OPAC
3/ 'Play' with various window sizes and zoom levels.
4/ The table should not overlap with right navigation content
5/ Signoff
NOTE: This is an alternative patch to those pushed and reverted that
attempted to provide a global fix to overlap issues. This patch
specifically targets just the holdings table in the opac detail view.
Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se>
Signed-off-by: Alexis Ripetti <alexis.ripetti@inLibro.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch modifies the OAPC CSS to convert table sorting icons from PNG
to SVG. These icons are added via background-image data-urls, so only
the SCSS file is modified.
To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface).
- Clear your browser cache if necessary
- View any DataTable in the OPAC, for instance the table of
checkouts under the logged-in user's "your summary" tab.
- Confirm that the sorting icons in the table headers look
correct in each state: Sorted ascending, sorted descending, and
unsorted.
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 replaces the OPAC Koha logo PNG file with an SVG version.
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).
- Clear your browser cache if necessary.
- View any page in the OPAC. The Koha logo in the upper-left corner of
the screen should look good.
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 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 reverts commit a3a09d09e3.
And also reverts the 3 other commits from bug 25242.
Revert "Bug 25242: Compiled CSS"
This reverts commit 198bbfa409.
Revert "Bug 25242: (QA follow-up) Remove deprecated break-word"
This reverts commit c3680149be.
Revert "Bug 25242: (QA follow-up) Colwidth on results table"
This reverts commit 84cbf0b937.
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
It appears break-word is now deprecated in Firefox and instead all
browsers now support break-all as the definitive.
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Prior to this patch, the column width on the opac-results table were not
fixed or calculated by a datatable; As such when we introduced the
'table-layout: fixed' property all columns were given equal share of the
table, which resulted in most cases in a three way split between a
checkbox, an empty cell and the actual content.
This patch sets the width for the selectcol to '1ch' for the single
character checkbox and updates the second columns class to 'numcol' as
it is not used for selection but rather result numbering and sets a
fixed width of '4ch' allowing for results upto 3 digits (plus the
period) to display correctly without wrapping.
Test plan
1/ Apply the patches and run the yarn build process to update the .css
2/ Perform a search and varify that the results table looks reasonable
3/ Disable OPACHiddenItems and perform a search again.
4/ Confirm the table looks reasonable still
5/ Signoff
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch attempts to improve the column wrapping and prevent
datatabels from overlapping with other content on high zoom levels/low
width screen sizes.
Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to various tables in the OPAC (Holds table is a good one)
and 'play' with various window sizes and zoom levels.
3/ The table should not overlap with right navigation content
4/ Signoff
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 some CSS changes to the OPAC SCSS and to the OPAC
"full serial issues" page to improve the style.
I've expanded the in-page CSS on the full serial issues page for
readability and added Template Toolkit's "collapse" filter to remove the
whitespace on rendering.
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 serial record in the OPAC.
- Click "More details" to view the issues page.
- Confirm that the "view" tabs look correct, with consistent padding.
- Click the "Full history" tab.
- In the sidebar, the filter should have full-width dropdowns and clear
button.
Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Removed redundant @import of google font
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 class to the shelf browser cover image links and a
style for these links defining a minimum height and width. This allows
the browser's default tab focus outline to be visible.
This patch also adds a check for an enabled cover image service before
displaying the cover image links.
This patch introduces whitespace changes so diff accordingly.
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).
- Enable the OPACShelfBrowser system preference.
- Enable at least one cover image service (Amazon, Google, Coce, etc).
- Locate a title in the OPAC which has items attached.
- On the bibliographic detail page, click the "Browse shelf" link in the
table of holdings to display the shelf browser.
- Use the tab key to move the focus to cover images in the shelf
browser.
- Confirm that the focus outline moves through each cover link whether
or not there is a cover image available.
- Diable all cover image services.
- Test the shelf browser again and confirm that it's not necessary to
tap through an empty row.
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>
This patch updates the markup and style of the skip button, adapting
(i.e. stealing) the style of the skip link at https://webaim.org.
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 any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.
Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Prior to this patch, the opac-facets side navigation box contained
semantically incorrect headings.
Test plan
1/ Perform a search which yields some results in the OPAC
2/ Inspect the 'Refine your search' elements on the left side of the
screen. Note that the headings are H1 (Koha page title) > H4 (Refine
your search) > H5 (Headings within 'Refine your search' box)
3/ Apply this patch and follow
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client
4/ Reload the page (Flushing the cache to ensure the CSS change load)
5/ Re-inspect the 'Refine your search' elements and note the heading
semantics are now H1 (Title of page) > H2 (Refine your search) > H3
(Headings within 'Refine your search')
6/ Note the appearance of the box is still reasonable
7/ 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 makes a minor modification to the OPAC CSS so that links are
consistently displayed without underlines in their inactive state. This
corrects two cases: Links in the facets sidebar and "Check all/none"
links shown on search results.
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, perform a search.
- In the search results facets sidebar, confirm that links are not underlined.
- At the top of the search results table, confirm that the "Select all"
and "Clear all" links are not underlined.
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>
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 adds a script and a template for showing library information
pages in the OPAC. A "libraries" page lists all the libraries in the
system, linking to individual pages for each library showing more
information..
If there is only one library in the system the page shows all of that
library's information.
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 /cgi-bin/koha/opac-library.pl in the OPAC.
- Verify that all the correct information is displayed for the
libraries in your system.
- Verify that page title and breadcrumbs look correct.
- Click to view details for a library.
- The details page should show the full contents of
branches.opac_info
- A menu should show links to other libraries' detail pages.
EDIT: This revised patch adds a "Libraries" link to the links under the
search bar; Corrects encoding in the breadcrumb link; Makes the page
title more specific when viewing an individual library.
Signed-off-by: Victor Grousset/tuxayo <victor@tuxayo.net>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>