This patch updates the OPAC and staff interface to use Bootstrap 5.
Bootstrap CSS assets are now pulled from node_modules and compiled into
staff-global.css and opac.css at build time. This update lays the
foundations of some other chnages, especially the addition of a dark
mode in the future.
Hundreds of templates have been updated, mostly with updates to the grid
markup. Most of the responsive behavior is still the same with the
exception of improved flexibility of headers and footers in both the
OPAC and staff interface.
The other most common change is to add a new "namespace" to data
attributes used by Bootstrap, e.g. "data-bs-target" or "data-bs-toggle".
Modal markup has also been updated everywhere. Other common changes:
dropdown button markup, alert markup (we now use Bootstrap's "alert
alert-warning" and "alert alert-info" instead of our old "dialog alert"
and "dialog info").
Bootstrap 5 now uses CSS variables which we can override in our own
'_variables.scss' (in both the OPAC and staff) to accomplish a lot of
the style overrides which we previously put in staff-global.scss.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
Issue #21
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
What this patch does:
- change the navigation bar style
- change the breadcrumbs style
- change the "last borrower" link style
- move the search bar inside the navigation bar
- move the help link to the same row as the breadcrumbs
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch replaces jQueryUI tabs on the item circulation alerts page as
a simple example to start the process of switching how we implement
tabbed interfaces.
The patch bumps the Bootstrap version from 3.3.7 to 3.4.1 and adds the
tabs component.
To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Go to Administration -> Item circulation alerts.
- Confirm that the "Checkout" and "Check-in" tabs look correct and work
correctly.
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>
This patch makes a number of changes in order to improve the way the
staff client's header menu adjusts at narrower browser widths:
- Updated version of Bootstrap 3.3.7 which includes the "collapse"
JavaScript plugin.
- Modified default Bootstrap CSS using Bootstrap's customization tool.
These changes facilitate the removal of some custom CSS (overriding
Bootstrap) from staff-global.scss.
- Added Bootstrap config file for loading customizations at
https://getbootstrap.com/docs/3.3/customize/
- Revised button classes for buttons in Bootstrap-styled toolbars.
The modified default CSS resets the base font size in Bootstrap to
better match our global CSS. A side-effect of this is that toolbar
buttons ended up looking smaller than they should. Changing the
button class solves this.
- Restructure the header menu in order to allow different rules to
govern the appearance of the navigational part of the menu
(Circulation, Search, etc) and the user menu (Set library, My
account, Log out).
- Modify the cart JS to so that the popup works well at narrow widths.
To test, apply the patch, regenerate the staff client CSS, and clear
your browser cache.
- Log in to the staff client and observe the layout of the header menu
as you adjust the browser to various widths.
- Confirm that sections of the menu "collapse" as the window gets
narrower.
- Confirm that dropdown menus behave correctly and that links work.
- Confirm that the Cart link works as expected when the cart empty
and when it has items.
- Install and enable multiple translations, including at least one
set of sub-languages (e.g. fr-FR and fr-CA).
- Test the appearance of the language menus in the footer at
various browser widths.
- View pages with button toolbars and confirm that they appear unchanged
(e.g. biblio detail page, patron detail page).
NOTE: While this patch is intended to make improvements to staff client
responsiveness, it does so within a limited scope. There are still many
pages which do not work well at narrower browser widths.
Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Customization tool used.
Javascript modules:
alert
button
dropdown
modal
tooltip
popover
transition
CSS modules:
type
code
grid
tables
forms
buttons
responsive-utilities
button-groups
input-groups
navs
navbar
breadcrumbs
pagination
pager
labels
badges
thumbnails
alerts
progress-bars
media
list-group
panels
responsive-embed
close
component-animations
dropdowns
tooltip
popovers
modals
Test plan:
1) Apply the patch
2) Try to go through interface to find problems, inconsistencies, etc.
3) Read the diff
Migration guide for bootstrap: http://getbootstrap.com/migration/
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
YUI JS is deprecated as far as Koha is concerned, and jQueryUI menus
don't seem to be as robust as they should be. This makes Twitter
Bootstrap very attrative for its menus features as well as other
aspects.
This patch revises the staff client header menu to include features from
Bootstrap, including replacement of the YUI-driven "More..." menu with a
Bootstrap version, and a new user menu taken from Corey Fuimaono's
similar patch.
To test, be sure to clear your cache after applying the patch. Load any
page in the staff client and confirm that the menu at the top of the
screen looks correct and works as normal, including functionality of the
"more" menu. Confirm that the username/logged-in branch triggers a menu
with "set library" and "log out" options. Confirm that Cart operations
trigger the correct confirmation popup.
Revision moves the Bootstrap assets out of the prog template into
koha-tmpl/intranet-tmpl/lib.
Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Works great. No errors.
Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
