MDL-75670 theme: Refactor form-inline helper class dropped in BS5

- Replace .form-inline Bootstrap helper class with .d-flex.flex-wrap.align-items-center
- Refactor .form-inline occurrences in SCSS files or remove when unneeded

admin/roles/classes/define_role_table_advanced.php

@@ -663,7 +663,7 @@ protected function print_field($name, $caption, $field, $helpicon = null) {
         } else {
             $extraclass = '';
         }
-        echo '<div class="felement col-md-9 form-inline' . $extraclass . '">';
+        echo '<div class="felement col-md-9 d-flex flex-wrap align-items-center' . $extraclass . '">';
         echo $field;
         if (isset($this->errors[$name])) {
             echo $OUTPUT->error_text($this->errors[$name]);

admin/roles/module.js

@@ -45,7 +45,7 @@ M.core_role.init_cap_table_filter = function(Y, tableid, contextid) {
             this.table = Y.one('#'+this.tableid);
 
             // Create a div to hold the search UI.
-            this.div = Y.Node.create('<div class="capabilitysearchui form-inline"></div>').setStyles({
+            this.div = Y.Node.create('<div class="capabilitysearchui d-flex flex-wrap align-items-center"></div>').setStyles({
                 width : this.table.get('offsetWidth'),
                 marginLeft : 'auto',
                 marginRight : 'auto'

admin/templates/header_search_input.mustache

@@ -26,7 +26,7 @@
     }
 }}
 <div class="simplesearchform d-flex justify-content-end">
-  <form autocomplete="off" action="{{action}}" method="get" accept-charset="utf-8" class="mform form-inline simplesearchform">
+  <form autocomplete="off" action="{{action}}" method="get" accept-charset="utf-8" class="mform d-flex flex-wrap align-items-center simplesearchform">
     <div class="input-group">
       <label for="searchinput-{{uniqid}}">
         <span class="sr-only">{{#str}} search, core {{/str}}</span>

admin/templates/setting_configduration.mustache

@@ -39,7 +39,7 @@
     Setting configduration.
 }}
 <div class="form-duration defaultsnext">
-    <div class="form-inline">
+    <div class="d-flex flex-wrap align-items-center">
         <input type="text" size="5" id="{{id}}v" name="{{name}}[v]" value="{{value}}" class="form-control text-ltr" {{#readonly}}disabled{{/readonly}}>
         <label class="sr-only" for="{{id}}u">{{#str}}durationunits, admin{{/str}}</label>
         <select id="{{id}}u" name="{{name}}[u]" class="form-control custom-select" {{#readonly}}disabled{{/readonly}}>

admin/templates/setting_configfile.mustache

@@ -44,7 +44,7 @@
     Setting configfile.
 }}
 <div class="form-file defaultsnext">
-    <div class="form-inline">
+    <div class="d-flex flex-wrap align-items-center">
         <input type="text" name="{{name}}" id="{{id}}" size="{{size}}" value="{{value}}" class="form-control text-ltr" {{#readonly}}readonly{{/readonly}}>
         {{#showvalidity}}
             {{#valid}}

admin/templates/setting_configfilesize.mustache

@@ -39,7 +39,7 @@
     Setting configfilesize.
 }}
 <div class="form-filesize defaultsnext">
-    <div class="form-inline">
+    <div class="d-flex flex-wrap align-items-center">
         <input type="text" size="5" id="{{id}}v" name="{{name}}[v]" value="{{value}}" class="form-control text-ltr" {{#readonly}}disabled{{/readonly}}>
         <label class="sr-only" for="{{id}}u">{{#str}}filesizeunits, admin{{/str}}</label>
         <select id="{{id}}u" name="{{name}}[u]" class="form-control custom-select" {{#readonly}}disabled{{/readonly}}>

admin/templates/setting_configtime.mustache

@@ -45,7 +45,7 @@
     Setting configtime.
 }}
 <div class="form-time defaultsnext">
-    <div class="form-inline text-ltr">
+    <div class="d-flex flex-wrap align-items-center text-ltr">
         <label class="sr-only" for="{{id}}h">{{#str}}hours{{/str}}</label>
         <select id="{{id}}h" name="{{name}}[h]" class="custom-select" {{#readonly}}disabled{{/readonly}}>
             {{#hours}}

admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html

@@ -6,7 +6,7 @@
             <div class="controls d-flex justify-content-between">
                 <div class="simplesearchform w-100">
                     <form autocomplete="off" method="get" accept-charset="utf-8"
-                        class="mform form-inline simplesearchform p-2 justify-content-center">
+                        class="mform d-flex flex-wrap align-items-center simplesearchform p-2 justify-content-center">
                         <div class="input-group w-100" data-region="docsearch">
                             <label for="searchinput-componentlibrary">
                                 <span class="sr-only">Search component library</span>

admin/tool/lp/templates/competency_picker.mustache

@@ -62,7 +62,7 @@
 {{/singleFramework}}
 <h3 class="mt-1">{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
-<form data-region="filtercompetencies" class="form-inline" data-frameworkid="{{framework.id}}">
+<form data-region="filtercompetencies" class="d-flex flex-wrap align-items-center" data-frameworkid="{{framework.id}}">
     <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">

admin/tool/lp/templates/competency_picker_competencyform.mustache

@@ -44,7 +44,7 @@
 <div data-region="competencylinktree">
 <h3>{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
-<form data-region="filtercompetencies" class="form-inline" data-frameworkid="{{framework.id}}">
+<form data-region="filtercompetencies" class="d-flex flex-wrap align-items-center" data-frameworkid="{{framework.id}}">
     <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">

admin/tool/lp/templates/competency_picker_user_plans.mustache

@@ -66,7 +66,7 @@
 
 <h3 class="mt-1">{{#str}}locatecompetency, tool_lp{{/str}}</h3>
 
-<form data-region="filtercompetencies" data-planid="{{plan.id}}" class="form-inline">
+<form data-region="filtercompetencies" data-planid="{{plan.id}}" class="d-flex flex-wrap align-items-center">
     <div class="mb-3">
         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
         <input type="text" class="form-control" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">

admin/tool/lp/templates/manage_competencies_page.mustache

@@ -49,7 +49,7 @@
     <div class="row">
         <div class="col-lg-6">
             <p>
-                <form data-region="filtercompetencies" data-frameworkid="{{framework.id}}" class="form-inline">
+                <form data-region="filtercompetencies" data-frameworkid="{{framework.id}}" class="d-flex flex-wrap align-items-center">
                     <div class="input-group mb-3">
                         <label class="accesshide" for="filter{{uniqid}}">{{#str}}search, tool_lp{{/str}}</label>
                         <input class="form-control" type="text" id="filter{{uniqid}}" placeholder="{{#str}}search, tool_lp{{/str}}" value="{{search}}">

admin/tool/spamcleaner/index.php

@@ -95,7 +95,7 @@
 
 <div class="mdl-align">
 
-<form method="post" action="index.php" class="form-inline spamcleanerform">
+<form method="post" action="index.php" class="d-flex flex-wrap align-items-center spamcleanerform">
   <div>
     <label class="accesshide" for="keyword_el"><?php print_string('spamkeyword', 'tool_spamcleaner') ?></label>
     <input type="text" class="form-control" name="keyword" id="keyword_el" value="<?php p($keyword) ?>" />

availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form-debug.js

@@ -44,7 +44,7 @@ M.availability_completion.form.getNode = function(json) {
             '<option value="2">' + M.util.get_string('option_pass', 'availability_completion') + '</option>' +
             '<option value="3">' + M.util.get_string('option_fail', 'availability_completion') + '</option>' +
             '</select></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values.
     if (json.cm !== undefined &&

availability/condition/completion/yui/build/moodle-availability_completion-form/moodle-availability_completion-form.js

@@ -44,7 +44,7 @@ M.availability_completion.form.getNode = function(json) {
             '<option value="2">' + M.util.get_string('option_pass', 'availability_completion') + '</option>' +
             '<option value="3">' + M.util.get_string('option_fail', 'availability_completion') + '</option>' +
             '</select></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values.
     if (json.cm !== undefined &&

availability/condition/completion/yui/src/form/js/form.js

@@ -42,7 +42,7 @@ M.availability_completion.form.getNode = function(json) {
             '<option value="2">' + M.util.get_string('option_pass', 'availability_completion') + '</option>' +
             '<option value="3">' + M.util.get_string('option_fail', 'availability_completion') + '</option>' +
             '</select></label></span>';
-    var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
+    var node = Y.Node.create('<span class="d-flex flex-wrap align-items-center">' + html + '</span>');
 
     // Set initial values.
     if (json.cm !== undefined &&

availability/condition/grade/yui/build/moodle-availability_grade-form/moodle-availability_grade-form-debug.js

@@ -57,7 +57,7 @@ M.availability_grade.form.getNode = function(json) {
             '</label> <label><span class="accesshide">' + M.util.get_string('label_max', 'availability_grade') +
             '</span><input type="text" class="form-control mx-1" name="maxval" title="' +
             M.util.get_string('label_max', 'availability_grade') + '"/></label>%</span>';
-    var node = Y.Node.create('<div class="d-inline-block form-inline">' + html + '</div>');
+    var node = Y.Node.create('<div class="d-inline-block d-flex flex-wrap align-items-center">' + html + '</div>');
 
     // Set initial values.
     if (json.id !== undefined &&