Bug 35402: Update the OPAC and staff interface to Bootstrap 5

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 <[email protected]>
Signed-off-by: Katrin Fischer <[email protected]>

.gitignore

@@ -16,11 +16,15 @@ koha-tmpl/opac-tmpl/bootstrap/css/sco-rtl.css
 
 koha-tmpl/intranet-tmpl/prog/css/maps/
 koha-tmpl/intranet-tmpl/prog/css/calendar.css
+koha-tmpl/intranet-tmpl/prog/css/calendar-rtl.css
 koha-tmpl/intranet-tmpl/prog/css/holds.css
+koha-tmpl/intranet-tmpl/prog/css/holds-rtl.css
 koha-tmpl/intranet-tmpl/prog/css/installer.css
+koha-tmpl/intranet-tmpl/prog/css/installer-rtl.css
 koha-tmpl/intranet-tmpl/prog/css/mainpage.css
+koha-tmpl/intranet-tmpl/prog/css/mainpage-rtl.css
 koha-tmpl/intranet-tmpl/prog/css/staff-global.css
-
+koha-tmpl/intranet-tmpl/prog/css/staff-global-rtl.css
 koha-tmpl/intranet-tmpl/prog/js/vue/dist/
 
 how-to.pl

admin/library_groups.pl

@@ -74,7 +74,7 @@
             )->store();
         };
         if ($@) {
-            push @messages, { type => 'alert', code => 'error_on_insert' };
+            push @messages, { type => 'warning', code => 'error_on_insert' };
         }
         else {
             $template->param( added => $group );

gulpfile.js

@@ -39,44 +39,46 @@ var sassOptions = {
 // CSS processing for development
 function css(css_base) {
     css_base = css_base || CSS_BASE
-    var stream = src(css_base + "/src/**/*.scss")
-        .pipe(sourcemaps.init())
-        .pipe(sass(sassOptions).on('error', sass.logError))
-        .pipe(autoprefixer())
-        .pipe(dest(css_base));
+    var stream = src(css_base + "/src/**/*.scss", { sourcemaps: true } );
 
     if (args.view == "opac") {
         stream = stream
-            .pipe(rtlcss())
-            .pipe(rename({
-                suffix: '-rtl'
-            })) // Append "-rtl" to the filename.
-            .pipe(dest(css_base));
+        .pipe(sass(sassOptions).on('error', sass.logError))
+        .pipe(autoprefixer())
+        .pipe(dest(css_base))
+        .pipe(rtlcss())
+        .pipe(rename({
+            suffix: '-rtl'
+        })) // Append "-rtl" to the filename.
+        .pipe(dest(css_base, { sourcemaps: "./maps" } ));
+    } else {
+        stream = stream
+        .pipe(sass(sassOptions).on('error', sass.logError))
+        .pipe(autoprefixer())
+        .pipe(dest(css_base))
+        .pipe(rtlcss())
+        .pipe(rename({
+            suffix: '-rtl'
+        })) // Append "-rtl" to the filename.
+        .pipe(dest(css_base, { sourcemaps: "/maps" } ));
     }
 
-    stream = stream.pipe(sourcemaps.write('./maps'))
-        .pipe(dest(css_base));
-
     return stream;
-
 }
+
 // CSS processing for production
 function build(css_base) {
     css_base = css_base || CSS_BASE;
     sassOptions.outputStyle = "compressed";
     var stream = src(css_base + "/src/**/*.scss")
         .pipe(sass(sassOptions).on('error', sass.logError))
         .pipe(autoprefixer())
-        .pipe(dest(css_base));
-
-    if( args.view == "opac" ){
-        stream = stream.pipe(rtlcss())
+        .pipe(dest(css_base))
+        .pipe(rtlcss())
         .pipe(rename({
             suffix: '-rtl'
         })) // Append "-rtl" to the filename.
         .pipe(dest(css_base));
-    }
-
     return stream;
 }
 

koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.dataTables.columnFilter.js

@@ -444,7 +444,7 @@
 
 		function fnCreateDropdown(aData) {
 			var index = i;
-			var r = '<div class="dropdown select_filter form-control"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' + label + '<b class="caret"></b></a><ul class="dropdown-menu" role="menu"><li data-value=""><a>Show All</a></li>', j, iLen = aData.length;
+			var r = '<div class="dropdown select_filter form-control"><a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">' + label + '<b class="caret"></b></a><ul class="dropdown-menu" role="menu"><li data-value=""><a>Show All</a></li>', j, iLen = aData.length;
 
 			for (j = 0; j < iLen; j++) {
 				r += '<li data-value="' + aData[j] + '"><a>' + aData[j] + '</a></li>';

koha-tmpl/intranet-tmpl/prog/css/addbiblio.css

@@ -91,7 +91,6 @@ a.expandfield {
 }
 
 .toptabs {
-    margin-left: -5px;
     margin-top: 0;
 }
 

koha-tmpl/intranet-tmpl/prog/css/itemsearchform.css

@@ -58,7 +58,6 @@ input[type="text"] {
     border-radius: 4px;
     color: #495057;
     display: inline-block;
-    font-size: 1.5rem;
     height: calc( 1.5em + .75rem + 2px );
     line-height: 1.5;
     padding: .375rem .75rem;

koha-tmpl/intranet-tmpl/prog/css/preferences.css

@@ -192,3 +192,8 @@ span.overridden {
 #admin_preferences .ms-drop label span {
     margin-left: 5px;
 }
+
+.category-heading {
+    display: flex;
+    justify-content: space-between;
+}

koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss

@@ -21,10 +21,14 @@ fieldset {
     &.rows {
         clear: left;
         float: left;
-        margin: .9em 0 0;
+        margin: 0;
         padding: 1rem;
         width: 100%;
 
+        & + fieldset.rows {
+            margin-top: .9em;
+        }
+
         fieldset {
             background-color: transparent;
             margin: 1em;
@@ -71,7 +75,6 @@ fieldset {
 
         div {
             &.hint {
-                font-size: 1.25rem;
                 margin: .5rem 0;
                 margin-left: 11rem;
             }
@@ -161,7 +164,7 @@ fieldset {
                 }
 
                 legend {
-                    font-size: 1.55rem;
+                    font-size: 1.2rem;
                     margin: 0 0 0 1em;
                 }
 
@@ -235,15 +238,10 @@ fieldset {
                 text-align: right;
                 width: 10rem;
             }
-
-            &.hint {
-                font-size: 1.25rem;
-            }
         }
 
         table {
             clear: both;
-            font-size: 1.25rem;
             margin: 1em 0 1em 1em;
 
             &.dataTable {