Switch to Bootstrap 5 as the base theme. (#3135)

(cherry picked from commit 8ac1afc)
NatLibFi · Feb 7, 2025 · 47d8bca · 47d8bca
1 parent 06c1ece
commit 47d8bca
Show file tree

Hide file tree

Showing 144 changed files with 2,643 additions and 1,253 deletions.
diff --git a/Gruntfile.local.js b/Gruntfile.local.js
@@ -7,7 +7,13 @@ module.exports = function(grunt) {
   grunt.registerTask("finna:scss", function finnaScssFunc() {
     const config = getFinnaSassConfig({
       outputStyle: style,
-      quietDeps: true
+      quietDeps: true,
+      silenceDeprecations: [
+        'import',
+        'color-functions',
+        'global-builtin',
+        'legacy-js-api'
+      ]
     }, false);
     grunt.config.set('dart-sass', config);
     grunt.task.run('dart-sass');
@@ -82,7 +88,8 @@ module.exports = function(grunt) {
         }
         config.options.includePaths = getLoadPaths('themes/' + themeList[i] + '/scss/finna.scss');
         config.options.includePaths.push('vendor/');
-        config.options.includePaths.push(path.resolve('themes/bootstrap3/scss/vendor'));
+        config.options.includePaths.push(path.resolve('themes/bootstrap5/scss/vendor'));
+        config.options.includePaths.push(path.resolve('themes/bootstrap5/node_modules'));
 
         sassConfig[themeList[i]] = config;
       }

diff --git a/module/Finna/src/Finna/View/Helper/Root/LayoutClass.php b/module/Finna/src/Finna/View/Helper/Root/LayoutClass.php
@@ -40,7 +40,7 @@
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     http://vufind.org/wiki/vufind2:developer_manual Wiki
  */
-class LayoutClass extends \VuFind\View\Helper\Bootstrap3\LayoutClass
+class LayoutClass extends \VuFind\View\Helper\Bootstrap5\LayoutClass
 {
     /**
      * Helper to allow easily configurable page layout -- given a broad class

diff --git a/module/Finna/src/Finna/View/Helper/Root/Navibar.php b/module/Finna/src/Finna/View/Helper/Root/Navibar.php
@@ -5,7 +5,7 @@
  *
  * PHP version 8
  *
- * Copyright (C) The National Library of Finland 2014.
+ * Copyright (C) The National Library of Finland 2014-2025.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 2,
@@ -23,6 +23,7 @@
  * @category VuFind
  * @package  View_Helpers
  * @author   Samuli Sillanpää <[email protected]>
+ * @author   Ere Maijala <[email protected]>
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     http://vufind.org   Main Site
  */
@@ -42,6 +43,7 @@
  * @category VuFind
  * @package  View_Helpers
  * @author   Samuli Sillanpää <[email protected]>
+ * @author   Ere Maijala <[email protected]>
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     http://vufind.org   Main Site
  */
@@ -194,20 +196,25 @@ public function getMenuItemUrl(array $data)
      */
     public function getLanguageUrl($lng)
     {
-        $url = $this->view->serverUrl(true);
-        $parts = parse_url($url);
-
-        $params = [];
-        if (isset($parts['query'])) {
-            parse_str($parts['query'], $params);
-            $url = substr($url, 0, strpos($url, '?'));
-        }
+        $url = $this->router->getRequestUri();
+        $params = $url->getQueryAsArray();
         $params['lng'] = $lng;
-        $url .= '?' . http_build_query($params);
-        if (isset($parts['fragment'])) {
-            $url .= '#' . $parts['fragment'];
-        }
-        return $url;
+        $url->setQuery(http_build_query($params));
+        return $url->toString();
+    }
+
+    /**
+     * Check if a URL points to the current page
+     *
+     * @param string $url URL
+     *
+     * @return bool
+     */
+    public function isCurrentPage(string $url): bool
+    {
+        $requestUri = $this->router->getRequestUri();
+        return $url === (string)$requestUri
+            || $url === $requestUri->getPath();
     }
 
     /**

diff --git a/themes/bootstrap5/js/account_ajax.js b/themes/bootstrap5/js/account_ajax.js
@@ -92,8 +92,7 @@ VuFind.register('account', function Account() {
         accountIconEl.dataset.bsToggle = 'tooltip';
         accountIconEl.dataset.bsPlacement = 'bottom';
         accountIconEl.title = VuFind.translate('account_has_alerts');
-        const tooltip = bootstrap.Tooltip.getOrCreateInstance(accountIconEl);
-        tooltip.show();
+        bootstrap.Tooltip.getOrCreateInstance(accountIconEl);
       } else {
         const tooltip = bootstrap.Tooltip.getOrCreateInstance(accountIconEl);
         tooltip.dispose();

diff --git a/themes/bootstrap5/js/lightbox.js b/themes/bootstrap5/js/lightbox.js
@@ -368,8 +368,8 @@ VuFind.register('lightbox', function Lightbox() {
     // remove nodes on whose click, the modal closes
     var nodesWhichAreNotCloseTargets = focusableNodes.filter(function nodeFilter(node) {
       return !node.hasAttribute("data-lightbox-close") && (
-        !node.hasAttribute("data-dismiss") ||
-        node.getAttribute("data-dismiss") !== "modal"
+        !node.hasAttribute("data-bs-dismiss") ||
+        node.getAttribute("data-bs-dismiss") !== "modal"
       );
     });
 

diff --git a/themes/custom/scss/finna.scss b/themes/custom/scss/finna.scss
@@ -1,27 +1,77 @@
-@import "../../finna2/scss/scss-functions";
+// Include Bootstrap functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "scss-functions";
+@import "bootstrap/scss/functions";
 
 // Custom theme variable overrides
 @import "variables-custom";
 
 // Variable overrides
 @import "variables";
 
+// Include Font Awesome
+$fa-font-path: "../../bootstrap5/css/vendor/font-awesome/webfonts" !default;
+@import "vendor/font-awesome/fontawesome";
+@import "vendor/font-awesome/brands";
+@import "vendor/font-awesome/regular";
+@import "vendor/font-awesome/solid";
+@import "vendor/font-awesome/v4-shims";
+
 // Finna Bootstrap variable overrides
 @import "../../finna2/scss/global/bootstrap-variable-overrides";
 
-// Font Awesome (loaded via include path to silence warnings from dependencies)
-@import "font-awesome/font-awesome";
+// Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
+@import "bootstrap/scss/variables";
+
+// Include any map overrides here
+@import "global/bootstrap-map-overrides";
+
+// Include remainder of required parts
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+
+// Optionally include any other parts as needed
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/utilities";
+
+// Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "bootstrap/scss/utilities/api";
 
-// Bootstrap v3.4.1 (loaded via include path to silence warnings from dependencies)
-@import "vendor/bootstrap/bootstrap";
+// Bootstrap 3 compatibility layer
+@import "global/finna-bs3-compat";
 
 // Finna variables
 @import "../../finna2/scss/global/variables";
 
-// Bootstrap3 theme components
-@import "../../bootstrap3/scss/components/cookie-consent/index";
-@import "../../bootstrap3/scss/components/keyboard";
-@import "../../bootstrap3/scss/components/trees";
+// Bootstrap5 theme components
+@import "../../bootstrap5/scss/components/cookie-consent/index";
+@import "../../bootstrap5/scss/components/keyboard";
+@import "../../bootstrap5/scss/components/trees";
 
 @import "../../finna2/scss/global";
 @import "../../finna2/scss/finna-other";

diff --git a/themes/custom/scss/variables.scss b/themes/custom/scss/variables.scss
@@ -3,15 +3,16 @@
 // --------------------------------------------------
 
 // Brand Colors
-// $brand-primary: #00a3b5 !default;
-// $brand-secondary: #B3E3E9 !default;
-// $brand-third: #d8f4ed !default;
-// $brand-fourth: #ebd4f0 !default;
-// $brand-success: #00b270 !default;
-// $brand-warning: #fff48c !default;
-// $brand-danger: #ff461e !default;
-// $brand-info: #b2e3ea !default;
-// $logo-color: #fff !default;
+// $primary:               #007c90 !default;
+// $secondary:             #007c90 !default;
+// $third:                 #007c90 !default;
+// $fourth:                #007c90 !default;
+// $success:               #33843B !default;
+// $warning:               #9E943D !default;
+// $danger:                #a94442 !default;
+// $info:                  #007c90 !default;
+// $info-bg-subtle:        #d9edf7 !default;
+// $logo-color:            #fff !default;
 
 //== Custom styling
 //== Background
@@ -356,21 +357,10 @@
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-//$state-success-text:             #2d4821 !default;
-//$state-success-bg:               #dff0d8 !default;
-//$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
-
-//$state-info-text:                #31708f !default;
-//$state-info-bg:                  #d9edf7 !default;
-//$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
-
-//$state-warning-text:             #8a6d3b !default;
-//$state-warning-bg:               #fcf8e3 !default;
-//$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
-
-//$state-danger-text:              #a94442 !default;
-//$state-danger-bg:                #f2dede !default;
-//$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+//$success:                        #33843B !default;
+//$info:                           #007c90 !default;
+//$warning:                        #9E943D !default;
+//$danger:                         #a94442 !default;
 
 
 //== Tooltips

diff --git a/themes/custom/templates/content/Additions/header-navibar.phtml b/themes/custom/templates/content/Additions/header-navibar.phtml
@@ -1,7 +1,7 @@
 <!-- START of: finna - layout/Additions/header-navibar.phtml -->
-<!-- add li elements with class custom to match style if you need links after language options -->
+<?php // add li elements with classes "nav-item custom" to match style if you need links after language options ?>
 <!--
-<li class="custom">
+<li class="nav-item custom">
   <a href="" target="_blank">≤?=$this->transEsc('menu_translate');?></a>
 </li>....
 -->

diff --git a/themes/finna2/js/finna-a11y.js b/themes/finna2/js/finna-a11y.js
@@ -4,32 +4,18 @@ finna.a11y = (function a11y() {
    * Initialize event listeners for bootstrap accessibility
    */
   function initA11y() {
-
-    // On dropdown open
-    $(document).on('shown.bs.dropdown', function dropdownOpen(event) {
-      var dropdown = $(event.target);
-
-      // Set aria-expanded to true
-      dropdown.find('.dropdown-toggle').attr('aria-expanded', true);
-
-      // Set focus on the first link in the dropdown
-      setTimeout(function shiftFocus() {
-        dropdown.find('.dropdown-menu li:first-child a').trigger("focus");
-      }, 50);
-    });
-
-    // On dropdown close
-    $(document).on('hidden.bs.dropdown', function dropdownClose(event) {
-      var dropdown = $(event.target);
-
-      // Set aria-expanded to false
-      dropdown.find('.dropdown-toggle').attr('aria-expanded', false);
-
-      // Set focus back to dropdown toggle
-      dropdown.find('.dropdown-toggle').trigger("focus");
+    // Focus first dropdown item when a dropdown is opened
+    document.addEventListener('shown.bs.dropdown', (e) => {
+      const dropdownEl = e.target.closest('.dropdown');
+      if (dropdownEl) {
+        const firstItemEl = dropdownEl.querySelector(':scope > .dropdown-menu > li > .dropdown-item');
+        if (firstItemEl) {
+          firstItemEl.focus();
+        }
+      }
     });
 
-    // Restore focus back to trigger element after lightbox is closed.
+    // Restore focus back to trigger element after lightbox is closed
     $(document).on('show.bs.modal', function triggerFocusShift() {
       let triggerElement = document.activeElement;
       $(document).one('hidden.bs.modal', function restoreFocus() {