diff --git a/backend/experiment/static/experiment_form.css b/backend/experiment/static/experiment_form.css index d41fe8574..6bf581bf4 100644 --- a/backend/experiment/static/experiment_form.css +++ b/backend/experiment/static/experiment_form.css @@ -6,3 +6,28 @@ .inline-group .inline-heading:hover { text-decoration: underline; } + +/* Floating class for the submit row */ +.submit-row.floating { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 100; + filter: drop-shadow(0 -2px 5px rgba(0, 0, 0, 0.1)); + border-radius: 0; + margin: 0; + + /* Grid with two columns */ + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +@media (min-width: 768px) { + .submit-row.floating { + /* Make the bar float over the form part of the screen */ + max-width: calc(100% - 299px); + margin-left: 299px; + display: flex; + } +} diff --git a/backend/experiment/static/experiment_form.js b/backend/experiment/static/experiment_form.js index 8b80a4d4a..0ae6ce064 100644 --- a/backend/experiment/static/experiment_form.js +++ b/backend/experiment/static/experiment_form.js @@ -1,5 +1,6 @@ document.addEventListener("DOMContentLoaded", function () { initCollapsibleInlineForms(); + floatingSubmitRow(); }); function initCollapsibleInlineForms() { @@ -38,3 +39,22 @@ function initCollapsibleInlineForms() { }); }); } + +function floatingSubmitRow() { + const submitRow = document.querySelector('.submit-row'); + + if (!submitRow) { + console.error('No submit row found'); + return; + } + + const submitRowOffset = submitRow.offsetTop; + + window.addEventListener('scroll', function () { + if (window.pageYOffset + window.innerHeight < submitRowOffset + 20) { + submitRow.classList.add('floating'); + } else { + submitRow.classList.remove('floating'); + } + }); +}