diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss index 3b37af65d..3d28931ea 100755 --- a/app/assets/stylesheets/settings.scss +++ b/app/assets/stylesheets/settings.scss @@ -139,3 +139,9 @@ $input-width: 650px; .crayons-notice--danger h3 { color: var(--accent-danger-darker); } + +.sticky-save-footer { + position: -webkit-sticky; /* Safari */ + position: sticky; + bottom: 0; +} diff --git a/app/javascript/packs/stickySaveFooter.js b/app/javascript/packs/stickySaveFooter.js new file mode 100644 index 000000000..0c6cef43a --- /dev/null +++ b/app/javascript/packs/stickySaveFooter.js @@ -0,0 +1,6 @@ +const form = document.querySelector('.edit_user'); + +form.addEventListener('change', () => { + const saveFooter = document.getElementsByClassName('save-footer'); + saveFooter && saveFooter[0] && saveFooter[0].classList.add('sticky-save-footer'); +}); diff --git a/app/views/users/_profile.html.erb b/app/views/users/_profile.html.erb index f30efa3b4..dbd80a88d 100644 --- a/app/views/users/_profile.html.erb +++ b/app/views/users/_profile.html.erb @@ -1,4 +1,4 @@ -<%= javascript_packs_with_chunks_tag "colorPreview", "validateFileInputs", defer: true %> +<%= javascript_packs_with_chunks_tag "colorPreview", "validateFileInputs", "stickySaveFooter", defer: true %> <%= render "users/additional_authentication" %> @@ -186,7 +186,7 @@ -
+