Made part table action bar sticky floating

Related to PR #997
This commit is contained in:
Jan Böhmer 2025-09-07 21:51:58 +02:00
parent ecd2abe00e
commit e81c8470be
3 changed files with 15 additions and 3 deletions

View file

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

View file

@ -17,6 +17,16 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * 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 * Tables
****************************************/ ****************************************/
@ -109,4 +119,4 @@ Classes for Datatables export
#export-messageTop, #export-messageTop,
.export-helper{ .export-helper{
display: none; display: none;
} }

View file

@ -29,7 +29,7 @@
<input type="hidden" name="ids" {{ stimulus_target('elements/datatables/parts', 'selectIDs') }} value=""> <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> #} {# <span id="select_count"></span> #}
<div class="input-group"> <div class="input-group">
@ -95,4 +95,4 @@
</div> </div>
</form> </form>
{% endmacro %} {% endmacro %}