Made part table action bar sticky floating

Related to PR #997

Author: jbtronics

assets/controllers/elements/datatables/parts_controller.js

@@ -45,8 +45,10 @@ export default class extends DatatablesController {
         //Hide/Unhide panel with the selection tools
         if (count > 0) {
             selectPanel.classList.remove('d-none');
+            selectPanel.classList.add('sticky-select-bar');
         } else {
             selectPanel.classList.add('d-none');
+            selectPanel.classList.remove('sticky-select-bar');
         }
 
         //Update selection count text

assets/css/app/tables.css

@@ -17,6 +17,16 @@
  *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+/****************************************
+ * Action bar
+ ****************************************/
+
+.sticky-select-bar {
+    position: sticky;
+    top: 120px;
+    z-index: 3000; /* Ensure the bar is above other content */
+}
+
 /****************************************
 * Tables
 ****************************************/
@@ -109,4 +119,4 @@ Classes for Datatables export
 #export-messageTop,
 .export-helper{
     display: none;
-}
+}

templates/components/datatables.macro.html.twig

@@ -29,7 +29,7 @@
 
         <input type="hidden" name="ids" {{ stimulus_target('elements/datatables/parts', 'selectIDs') }} value="">
 
-        <div class="d-none mb-2" {{ stimulus_target('elements/datatables/parts', 'selectPanel') }}>
+        <div class="d-none mb-2 bg-body-secondary shadow-sm border border-secondary rounded mx-2 p-2" {{ stimulus_target('elements/datatables/parts', 'selectPanel') }}>
             {# <span id="select_count"></span> #}
 
             <div class="input-group">
@@ -95,4 +95,4 @@
         </div>
     </form>
 
-{% endmacro %}
+{% endmacro %}