Bug ID: 20168
Summary: update to bootstrap v4
Change sponsored?: ---
Priority: P5 - low
Assignee: [hidden email] Reporter: [hidden email] QA Contact: [hidden email]
I'm currently working on updating the bootstrap template to bootstrap v4.
This requires to update jQuery as well.
My work is based on the current 17.11.02 koha release.
I'm trying to keep the design as close to the current design as possible.
At the moment i have nothing to show of my current process but
as soon as everything plays nice i will post a link to my repository.
The goal is to get a template based on the current version of bootstrap.
What |Removed |Added
Summary|update of the OPAC |Update of the OPAC
|bootstrap template to |bootstrap template to
|bootstrap v4 |bootstrap v4
CC| |[hidden email]
--- Comment #3 from Katrin Fischer <[hidden email]> ---
Please also avoid one big change patch - smaller steps are always easier to
test and integrate! Not sure, maybe it would make sense to split jQuery update
and Bootstrap update into 2 separate bugs and patch sets?
This patch updates the version of Bootstrap in the OPAC from 2.3.1 to
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:
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:
Other areas where the most changes have been made: Navigation menus,
breadcrumb menus, buttons, dropdowns.
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.
--- Comment #9 from Owen Leonard <[hidden email]> ---
Remote branch has been rebased on master, including:
Bug 18911, Option to set preferred language in OPAC
Bug 22672, Replace <i> tags with <em> AND <b> tags with <strong> in the OPAC
Bug 22807, Accessibility: Add 'Skip to main content' link
Bug 24156, Basket - Make sort order and number of items to display configurable
Bug 25151, Accessibility: The 'Your cart' page does not contain a level-one
Bug 25154, Accessibility: The 'Search results' page does not use heading markup
where content is introduced
Bug 25238, Accessibility: Multiple 'H1' headings exist in the full record
Some QA tool warnings have been fixed. There seem to be several false positives
On the item details page the More Searches dropdown (inside #ulactioncontainer)
is not a dropdown. Maybe its missing a div container with the dropdown-menu
There are many inputs that get a Koha green border when focused that now also
get the Bootstrap blue border, they look odd when paired:
When you view your cart (basket ) the remove, add to list, place hold buttons
are blue when disabled and blue when enabled so its hard to tell the
difference. They used to be grey when disabled.
--- Comment #11 from Owen Leonard <[hidden email]> ---
I've rebased and updated the remote branch with some fixes:
- Fixed markup of navbar item "Log in to create your own lists"
- Improved consistency of input and link focus borders (needs
- Corrected style of disabled link buttons in the Cart.
(In reply to Lucas Gass from comment #10)
> On the item details page the More Searches dropdown (inside
> #ulactioncontainer) is not a dropdown.
This is a problem because the Bootstrap dropdown markup changed in version 4.
I'm still puzzling over this... There is probably a CSS solution, preferable to
trying to add a db update which tries to correct existing values in the system
Currently for it to work properly you have to update the OPACSearchForTitleIn
preference with this text, removing the <li>'s and adding a "dropdown-item"
class to the links:
--- Comment #12 from Martin Renvoize <[hidden email]> ---
Generally I'm liking it so far...
* The search bar doesn't react properly when shrinking and growing the window
* I'm not sure about the increase in whitespace and sizes.. the login modal
looks huge and the space from the top of the page to the start of content seems
to have increased considerable with various increases in padding for each