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 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 replaces CSS-based background image icons with Font Awesome
icons. This will eliminate the use of sprite.png altogether.
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).
Because JavaScript events are often triggered by class, the changes made
in this patch require testing of JavaScript-driven behavior as well as
visual confirmation of the changes.
Enable OPAC features to expose them for testing: Login, Holds, Article
requests, Tags, Cart, Search term highlighting.
- Perform a search in the OPAC
- In the header at the top of the search results, check the
'Unhighlight/Highlight' link.
- Select some search results and verify that the multi-item controls
are enabled: Add to cart/Lists; Place hold; Tag. Check that these
controls work correctly.
- Verify that the following links look correct and work correctly:
'Place hold,' 'Request article,' 'Log in to add tags,' 'Add to
cart.'
- Log in to the OPAC and return to the search results page. Check the
'Add tag' and 'Save to lists' links.
- View the lists page
- Test the 'Edit' and 'Delete' controls.
- View the contents of a list. Test the following:
- Controls at the top of the table of results ('New list,'
'Download list,' 'Send list,' 'Print list,' 'Edit list,' and
'Delete list').
- Multi-selection operations: 'Place hold,' 'Tag,' and 'Remove
from list.'
- Controls for each item on the list: 'Place hold,' 'Add tag,'
'Save to another list,' 'Remove from this list,' and 'Add to
cart.'
- View the bibliographic detail page for any search result
- In the right-hand sidebar menu, verify that these controls look
correct and work correctly: 'Place hold,' 'Print,' 'Request
article,' 'Save to your lists,' 'Add to your cart,'
'Unhighlight,' 'Send to device,' 'Save record,' and 'More
searches.'
- Test the shelf browser by clicking 'Browse shelf' under the call
number for any of the holdings.
- Test the 'Next' and 'Previous' controls.
- Check the tabs for switching between 'Normal,' 'MARC,' and 'ISBD'
views and verify that they look correct on each of those pages.
- Add some items to the Cart and open the Cart
- Test the cart controls at the top: 'More details/Brief display,'
'Send,' 'Download,' 'Empty and close,' 'Hide window,' 'Print.'
- Test the multiple-selection controls: 'Remove,' 'Add to list,'
'Place hold,' and 'Tag.'
- Log in to the OPAC as a user who has items checked out which can be
renewed. On the 'Your summary' page, on the 'Checked out' tab, test
the 'Renew selected' and 'Renew all' links.
Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch updates the SocialNetworks system preference so that it
offers a choice of social networks (and email) which can be enabled in
the OPAC.
This patch also replaces the social network images with Font Awesome
icons styled so that the colors match the social networks' current
branding. The old social networks sprite image is removed.
To test, apply the patch and run the database update. Rebuild the OPAC
CSS:
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client
- Go to Administration -> Global system preferences -> OPAC -> Features
and find the SocialNetworks preference.
- If your SocialNetworks preference was enabled, all choices should
be selected. Otherwise none should be selected.
- If none are selected, select them all and save.
- Locate a record in the OPAC and view the details page.
- The social network icons should appear as expected and function as
before.
- Return to system preferences in the staff client and try enabling and
disabling different options, verifying each time that the OPAC
reflects your choices.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This patch adds the option to show a QR code on the OPAC bibliographic
detail page. The URL of the page is encoded in the image so that
scanning it will take the user to that page on their device. The feature
is controlled by a new system preference, OPACDetailQRCode, which is
disabled by default.
The QR Code is generated by a JavaScript library, "kjua"
(https://github.com/lrsjng/kjua), which has been added to the "About"
page in the staff client.
To test, apply the patch and run the database update. Rebuild the OPAC
CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- In the staff client, go to Administration -> System preferences.
- Locate the OPACDetailQRCode system preferences under OPAC ->
Features. It should be disabled.
- Enable the preference and switch to the OPAC.
- Locate a title in the catalog and view the detail page.
- In the sidebar menu there should be a "Send to device" link.
- Clicking the link should display a QR Code.
- Scan the code using a QR Code-capable device.
- The URL should be correct.
- Disable the system preference and confirm that the "Send to device"
link no longer appears on the OPAC detail page.
Signed-off-by: Christopher Brannon <cbrannon@cdalibrary.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.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>
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>
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 a new "share" icon to the sprite image used to style
controls in the OPAC. The "share list" links now have a "sharelist"
class which is used to style the links with the new icon.
Also changed: Fixed the page structure markup of opac-shareshelf.tt.
To test you must have the OpacAllowSharingPrivateLists system preference
enabled.
- Log in to the OPAC and go to Lists -> Your lists.
- Create one or more private lists if necessary.
- In the table of your lists there should be a "Share" link with the
new icon.
- View one of these lists and confirm that the "Share" link at the top
of the table of list items.
- Click through to the share list page and confirm that the page looks
correct.
Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>
Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This patch removes an unused image file from the OPAC which was added
when we added Mozilla Persona authentication but wasn't removed when
Mozilla Persona went away.
To test, apply the patch and confirm that the image no longer exists:
koha-tmpl/opac-tmpl/bootstrap/images/sign_in_green.png
Signed-off-by: Mark Tompsett <mtompset@hotmail.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 black version of the Koha logo for use in OPAC
customization.
To test, apply the patch and add this CSS to your OPACUserCSS system
preference:
.navbar-inverse .navbar-inner {
background: #CCC none;
}
#logo {
background: transparent url(/opac-tmpl/bootstrap/images/koha-logo-navbar-black.png) no-repeat scroll 0;
}
Refresh your OPAC and the top navigation bar should be changed from
black to grey, and you should see a black version of the Koha logo.
Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
The goal of this theme is to provide a fully-responsive OPAC which
offers a high level of functionality across multiple devices with varied
viewport sizes. Its style is based on the CCSR theme, with elements of
the Bootstrap framework providing default styling of buttons, menus,
modals, etc.
The Bootstrap grid is used everywhere, but Bootstrap's default
responsive breakpoints have been expanded to allow for better
flexibility for our needs.
All non-translation-depended files are in the root directory of this new
theme:
css, images, itemtypeimg, js, less, and lib. Languages.pm has been
modified to ignore the new directories when parsing the theme language
directories.
This theme introduces the use of LESS (http://lesscss.org/) to build
CSS. Three LESS files can be found in the "less" directory: mixins.less,
opac.less, and responsive.less. These three files are compiled into one
CSS file for production: opac.css. "Base" theme styles are found in
opac.less. A few "mixins" (http://lesscss.org/#-mixins) are found in
mixins.less. Any CSS which is conditional on specific media queries is
found in responsive.less.
At the template level some general sturctural changes have been made.
For the most part JavaScript is now at the end of each template as is
recommended for performance reasons. JavaScript formerly in
doc-head-close.inc is now in opac-bottom.inc.
In order to be able to maintain this structure and accommodate
page-specific scripts at the same time the use of BLOCK and PROCESS are
added. By default opac-bottom.inc will PROCESS a "jsinclude" block:
[% PROCESS jsinclude %]
Each page template in the theme must contain this block, even if it is
empty:
[% BLOCK jsinclude %][% END %]
Pages which require that page-specific JavaScript be inserted can add it
to the jsinclude block and it will appear correctly at the bottom of the
rendered page.
The same is true for page-specific CSS. Each page contains a cssinclude
block:
[% BLOCK cssinclude %][% END %]
...which is processed in doc-head-close.inc:
[% PROCESS cssinclude %]
Using these methods helps us maintain a strict separation of CSS links
and blocks (at the top of each page) and JavaScript (at the bottom). A
few exceptions are made for some JavaScript which must be processed
sooner: respond.js (https://github.com/scottjehl/Respond, conditionally
applied to Internet Explorer versions < 9 to allow for layout
responsiveness), the _() function required for JS translatability, and
Modernizr (http://modernizr.com/, a script which detects browser
features and allows us to conditionally load JavaScript based on
available features--or lack thereof).
Another new JavaScript dependency in this theme is enquire.js
(http://wicky.nillia.ms/enquire.js/), which lets us trigger JavaScript
events based on viewport size.
I have made an effort to re-indent the templates in a sane way,
eliminating trailing spaces and tabs. However, I have not wrapped lines
at a specific line length. In order to improve template legibility I
have also tried to insert comments indicating the origin of closing tags
like <div> or template directives like [% END %]:
</div> <!-- / .container-fluid -->
[% END # / IF ( OpacBrowseResults && busc ) %]
TESTING
Proper testing of this theme is no easy task: Every template has been
touched. Each page should work reasonable well at a variety of screen
dimensions. Pages should be tested under many conditions which are
controlled by toggling OPAC system preferences on and off. A variety of
devices, platforms, and browsers should be tested.
Signed-off-by: Galen Charlton <gmc@esilibrary.com>
