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>
