[Koha-bugs] [Bug 20168] Update of the OPAC bootstrap template to bootstrap v4

[bugzilla-daemon at bugs.koha-community.org]

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=20168

--- Comment #8 from Owen Leonard <oleonard at myacpl.org> ---
Remote branch:


https://gitlab.com/koha-dev/koha-dev/-/tree/wip-2020-05-14-opac-bootstrap-4

Information and test plan:

    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.

    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.

-- 
You are receiving this mail because:
You are watching all bug changes.