diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js index 60f4bbbbb..9a92542b1 100644 --- a/src/registrar/assets/js/get-gov-admin.js +++ b/src/registrar/assets/js/get-gov-admin.js @@ -422,7 +422,7 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk, // Add event listener to toggle the class and update content on click toggleButton.addEventListener('click', function() { // Toggle the 'collapsed' class on the bar - submitRowWrapper.classList.toggle('collapsed'); + submitRowWrapper.classList.toggle('submit-row-wrapper--collapsed'); // Get a reference to the span element inside the button const spanElement = this.querySelector('span'); @@ -458,7 +458,7 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk, entries.forEach(entry => { if (entry.isIntersecting) { // Refresh reference to submit row wrapper and check if it's collapsed - if (document.querySelector('.submit-row-wrapper').classList.contains('collapsed')) { + if (document.querySelector('.submit-row-wrapper').classList.contains('submit-row-wrapper--collapsed')) { toggleButton.click(); } } diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index 29c60aa1e..ddcc6acd6 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -422,6 +422,15 @@ address.dja-address-contact-list { border: 1px solid var(--error-fg) !important; } +@mixin submit-row-wrapper--collapsed-one-line(){ + &.submit-row-wrapper--collapsed { + transform: translate3d(0, 42px, 0); + } + .submit-row { + clear: none; + } + } + // Sticky submit bar for domain requests on desktop @media screen and (min-width:768px) { .submit-row-wrapper { @@ -436,11 +445,16 @@ address.dja-address-contact-list { margin-bottom: 0; } } - - .submit-row-wrapper.collapsed { + .submit-row-wrapper--collapsed { // translate3d is more performant than translateY // https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance - transform: translate3d(0, 42px, 0); + transform: translate3d(0, 88px, 0); + } + .submit-row-wrapper--collapsed-one-line { + @include submit-row-wrapper--collapsed-one-line(); + } + .submit-row { + clear: both; } .submit-row-toggle{ display: inline-block; @@ -449,11 +463,9 @@ address.dja-address-contact-list { right: 0; background: var(--darkened-bg); } - #submitRowToggle { color: var(--body-fg); } - .requested-domain-sticky { max-width: 325px; overflow: hidden; @@ -462,13 +474,14 @@ address.dja-address-contact-list { } } -@media screen and (max-width:1256px) { - .submit-row { - clear: both; - } - .submit-row-wrapper.collapsed { - // translate3d is more performant than translateY - // https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance - transform: translate3d(0, 88px, 0); +@media screen and (min-width:935px) { + .submit-row-wrapper--analyst-view { + @include submit-row-wrapper--collapsed-one-line(); + } +} + +@media screen and (min-width:1256px) { + .submit-row-wrapper { + @include submit-row-wrapper--collapsed-one-line(); } } diff --git a/src/registrar/templates/django/admin/domain_request_change_form.html b/src/registrar/templates/django/admin/domain_request_change_form.html index 449a69062..17d4fdef9 100644 --- a/src/registrar/templates/django/admin/domain_request_change_form.html +++ b/src/registrar/templates/django/admin/domain_request_change_form.html @@ -1,4 +1,5 @@ {% extends 'admin/change_form.html' %} +{% load custom_filters %} {% load i18n static %} {% block field_sets %} @@ -103,7 +104,7 @@ -
+