[Fix] WebUI: replace BS3 form-group with mb-3

Removing footable.standalone.min.css dropped its .form-group
{margin-bottom:15px} rule, collapsing the gap above the buttons on
the selectors tab (and the action-score rows on the configuration
tab). .form-group is a Bootstrap 3 class with no meaning in BS5;
replace it with the mb-3 spacing utility that provides the same gap.

diff --git a/interface/index.html b/interface/index.html
index 51508a2db939a4732d8744a539daafc5c1c927d8..bdd948dfb718f219286860ad85a028e629b8d5b9 100644 (file)
--- a/interface/index.html
+++ b/interface/index.html
@@ -649,7 +649,7 @@
                                                                                        <form class="col-12 d-flex flex-column">
                                                                                                <div class="row pt-3">
                                                                                                        <div class="col">
-                                                                                                               <div class="form-group">
+                                                                                                               <div class="mb-3">
                                                                                                                        <label class="form-label" for="selectorsMsgArea">Message source:</label>
                                                                                                                        <textarea class="form-control" id="selectorsMsgArea" rows="9" placeholder='Paste raw message source, drag and drop files here or use "Browse..." button.'></textarea>
                                                                                                                </div>
@@ -658,7 +658,7 @@
                                                                                                </div>
                                                                                                <div class="row pt-3">
                                                                                                        <div class="col">
-                                                                                                               <div class="form-group">
+                                                                                                               <div class="mb-3">
                                                                                                                        <label class="form-label" for="selectorsSelArea">Selector(s):</label>
                                                                                                                        <textarea class="form-control" id="selectorsSelArea" rows="1" placeholder="extractor.transform(arg);extractor.transform(arg);..."></textarea>
                                                                                                                </div>
@@ -668,7 +668,7 @@
                                                                                                </div>
                                                                                                <div class="row pt-3 flex-grow-1">
                                                                                                        <div class="col d-flex flex-column">
-                                                                                                               <div class="form-group h-100 d-flex flex-column">
+                                                                                                               <div class="mb-3 h-100 d-flex flex-column">
                                                                                                                        <label class="form-label" for="selectorsResArea">Result:</label>
                                                                                                                        <textarea class="form-control flex-grow-1" id="selectorsResArea" disabled readonly></textarea>
                                                                                                                </div>

diff --git a/interface/js/app/config.js b/interface/js/app/config.js
index c4fcdd80fe7ba88da5aed283dd17897f85250ff3..3cba6a7ab3589ed8074713b28949aacf9e569b09 100644 (file)
--- a/interface/js/app/config.js
+++ b/interface/js/app/config.js
@@ -21,7 +21,7 @@ define(["jquery", "app/common"],
                             items.push({
                                 idx: idx,
                                 html:
-                                '<div class="form-group">' +
+                                '<div class="mb-3">' +
                                     '<label class="col-form-label col-md-2 float-start">' + item.action + "</label>" +
                                     '<div class="controls slider-controls col-md-10">' +
                                         '<input class="action-scores form-control" data-id="action" type="number" value="' +