From f2c05c91ec85d99d1020b0630597e7042e5f002c Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 26 Mar 2024 14:44:19 -0400 Subject: [PATCH 01/13] Sticky submit bar on domain request admin --- src/registrar/admin.py | 3 +- src/registrar/assets/js/get-gov-admin.js | 57 +++++++++ src/registrar/assets/js/get-gov-reports.js | 121 ++++++++++-------- src/registrar/assets/sass/_theme/_admin.scss | 32 +++++ src/registrar/assets/sass/_theme/_base.scss | 34 ++--- .../assets/sass/_theme/_buttons.scss | 7 + .../assets/sass/_theme/_tooltips.scss | 26 ++++ src/registrar/assets/sass/_theme/styles.scss | 1 + .../admin/domain_request_change_form.html | 21 ++- src/registrar/templates/domain_users.html | 2 +- src/registrar/tests/test_admin.py | 23 ++++ ...s_application.py => test_views_request.py} | 0 12 files changed, 244 insertions(+), 83 deletions(-) create mode 100644 src/registrar/assets/sass/_theme/_tooltips.scss rename src/registrar/tests/{test_views_application.py => test_views_request.py} (100%) diff --git a/src/registrar/admin.py b/src/registrar/admin.py index 0096f59b5..9d00493e9 100644 --- a/src/registrar/admin.py +++ b/src/registrar/admin.py @@ -958,6 +958,7 @@ class DomainRequestAdmin(ListHeaderAdmin): """Custom domain requests admin class.""" form = DomainRequestAdminForm + change_form_template = "django/admin/domain_request_change_form.html" class InvestigatorFilter(admin.SimpleListFilter): """Custom investigator filter that only displays users with the manager role""" @@ -1019,8 +1020,6 @@ class DomainRequestAdmin(ListHeaderAdmin): if self.value() == "0": return queryset.filter(Q(is_election_board=False) | Q(is_election_board=None)) - change_form_template = "django/admin/domain_request_change_form.html" - # Columns list_display = [ "requested_domain", diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js index 8c60c534f..c23bf4870 100644 --- a/src/registrar/assets/js/get-gov-admin.js +++ b/src/registrar/assets/js/get-gov-admin.js @@ -410,3 +410,60 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk, }); observer.observe({ type: "navigation" }); })(); + +/** An IIFE for toggling the submit bar on domain request forms +*/ +(function (){ + // Get a reference to the button element + const toggleButton = document.getElementById('submitRowToggle'); + const submitRowWrapper = document.querySelector('.submit-row-wrapper'); + + if (toggleButton) { + // 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'); + + // Get a reference to the span element inside the button + const spanElement = this.querySelector('span'); + + // Get a reference to the use element inside the button + const useElement = this.querySelector('use'); + + // Check if the span element text is 'Hide' + if (spanElement.textContent.trim() === 'Hide') { + // Update the span element text to 'Show' + spanElement.textContent = 'Show'; + + // Update the xlink:href attribute to expand_more + useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_less'); + } else { + // Update the span element text to 'Hide' + spanElement.textContent = 'Hide'; + + // Update the xlink:href attribute to expand_less + useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_more'); + } + }); + + // We have a scroll indicator at the end of the page. + // Observe it. Once it gets on screen, test to see if the row is collapsed. + // If it is, expand it. + const targetElement = document.querySelector(".scroll-indicator"); + const options = { + threshold: 1 // Adjust the threshold as needed (1 indicates when the target element is fully visible) + }; + // Create a new Intersection Observer + const observer = new IntersectionObserver((entries, observer) => { + 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')) { + toggleButton.click(); + } + } + }); + }, options); + observer.observe(targetElement); + } +})(); \ No newline at end of file diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index d10cf2dc6..025a94275 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -54,64 +54,75 @@ })(); -document.addEventListener("DOMContentLoaded", function () { - createComparativeColumnChart("myChart1", "Managed domains", "Start Date", "End Date"); - createComparativeColumnChart("myChart2", "Unmanaged domains", "Start Date", "End Date"); - createComparativeColumnChart("myChart3", "Deleted domains", "Start Date", "End Date"); - createComparativeColumnChart("myChart4", "Ready domains", "Start Date", "End Date"); - createComparativeColumnChart("myChart5", "Submitted requests", "Start Date", "End Date"); - createComparativeColumnChart("myChart6", "All requests", "Start Date", "End Date"); -}); +/** An IIFE to initialize the analytics page +*/ +(function () { + function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) { + var canvas = document.getElementById(canvasId); + if (!canvas) { + return + } -function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) { - var canvas = document.getElementById(canvasId); - var ctx = canvas.getContext("2d"); + var ctx = canvas.getContext("2d"); - var listOne = JSON.parse(canvas.getAttribute('data-list-one')); - var listTwo = JSON.parse(canvas.getAttribute('data-list-two')); + var listOne = JSON.parse(canvas.getAttribute('data-list-one')); + var listTwo = JSON.parse(canvas.getAttribute('data-list-two')); - var data = { - labels: ["Total", "Federal", "Interstate", "State/Territory", "Tribal", "County", "City", "Special District", "School District", "Election Board"], - datasets: [ - { - label: labelOne, - backgroundColor: "rgba(255, 99, 132, 0.2)", - borderColor: "rgba(255, 99, 132, 1)", - borderWidth: 1, - data: listOne, + var data = { + labels: ["Total", "Federal", "Interstate", "State/Territory", "Tribal", "County", "City", "Special District", "School District", "Election Board"], + datasets: [ + { + label: labelOne, + backgroundColor: "rgba(255, 99, 132, 0.2)", + borderColor: "rgba(255, 99, 132, 1)", + borderWidth: 1, + data: listOne, + }, + { + label: labelTwo, + backgroundColor: "rgba(75, 192, 192, 0.2)", + borderColor: "rgba(75, 192, 192, 1)", + borderWidth: 1, + data: listTwo, + }, + ], + }; + + var options = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: title + } }, - { - label: labelTwo, - backgroundColor: "rgba(75, 192, 192, 0.2)", - borderColor: "rgba(75, 192, 192, 1)", - borderWidth: 1, - data: listTwo, + scales: { + y: { + beginAtZero: true, + }, }, - ], + }; + + new Chart(ctx, { + type: "bar", + data: data, + options: options, + }); + } + + function initComparativeColumnCharts() { + document.addEventListener("DOMContentLoaded", function () { + createComparativeColumnChart("myChart1", "Managed domains", "Start Date", "End Date"); + createComparativeColumnChart("myChart2", "Unmanaged domains", "Start Date", "End Date"); + createComparativeColumnChart("myChart3", "Deleted domains", "Start Date", "End Date"); + createComparativeColumnChart("myChart4", "Ready domains", "Start Date", "End Date"); + createComparativeColumnChart("myChart5", "Submitted requests", "Start Date", "End Date"); + createComparativeColumnChart("myChart6", "All requests", "Start Date", "End Date"); + }); }; - - var options = { - responsive: true, - maintainAspectRatio: false, - plugins: { - legend: { - position: 'top', - }, - title: { - display: true, - text: title - } - }, - scales: { - y: { - beginAtZero: true, - }, - }, - }; - - new Chart(ctx, { - type: "bar", - data: data, - options: options, - }); -} \ No newline at end of file + initComparativeColumnCharts(); +})(); \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index b7a494aef..bb7be78f9 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -349,4 +349,36 @@ input.admin-confirm-button { .errors span.select2-selection { border: 1px solid var(--error-fg) !important; +} + +// Sticky submit bar for domain requests on desktop +@include at-media(desktop) { + .submit-row-wrapper { + position: fixed; + bottom: 0; + right: 0; + background: var(--darkened-bg); + border-top-left-radius: 6px; + transition: transform .2s ease-out; + .submit-row { + margin-bottom: 0; + } + } + + .submit-row-wrapper.collapsed { + // translate3d is more performant than translateY + // https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance + transform: translate3d(0, 45px, 0); + } + .submit-row-toggle{ + display: inline-block; + position: absolute; + top: -30px; + right: 0; + background: var(--darkened-bg); + } + + #submitRowToggle { + color: var( --body-fg); + } } \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss index 127db5589..dac94255a 100644 --- a/src/registrar/assets/sass/_theme/_base.scss +++ b/src/registrar/assets/sass/_theme/_base.scss @@ -117,6 +117,10 @@ abbr[title] { } } +.visible-desktop { + display: none; +} + @include at-media(desktop) { .float-right-desktop { float: right; @@ -124,33 +128,15 @@ abbr[title] { .float-left-desktop { float: left; } + .visible-desktop { + display: block; + } } .flex-end { align-items: flex-end; } -// Only apply this custom wrapping to desktop -@include at-media(desktop) { - .usa-tooltip__body { - width: 350px; - white-space: normal; - text-align: center; - } -} - -@include at-media(tablet) { - .usa-tooltip__body { - width: 250px !important; - white-space: normal !important; - text-align: center !important; - } -} - -@include at-media(mobile) { - .usa-tooltip__body { - width: 250px !important; - white-space: normal !important; - text-align: center !important; - } -} +.cursor-pointer { + cursor: pointer; +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss index ef8635b95..1f5047503 100644 --- a/src/registrar/assets/sass/_theme/_buttons.scss +++ b/src/registrar/assets/sass/_theme/_buttons.scss @@ -138,6 +138,13 @@ a.usa-button--unstyled:visited { } } +.usa-button--unstyled--white, +.usa-button--unstyled--white:hover, +.usa-button--unstyled--white:focus, +.usa-button--unstyled--white:active { + color: color('white'); +} + // Cancel button used on the // DNSSEC main page // We want to center this button on mobile diff --git a/src/registrar/assets/sass/_theme/_tooltips.scss b/src/registrar/assets/sass/_theme/_tooltips.scss new file mode 100644 index 000000000..01348e1b1 --- /dev/null +++ b/src/registrar/assets/sass/_theme/_tooltips.scss @@ -0,0 +1,26 @@ +@use "uswds-core" as *; + +// Only apply this custom wrapping to desktop +@include at-media(desktop) { + .usa-tooltip__body { + width: 350px; + white-space: normal; + text-align: center; + } +} + +@include at-media(tablet) { + .usa-tooltip__body { + width: 250px !important; + white-space: normal !important; + text-align: center !important; + } +} + +@include at-media(mobile) { + .usa-tooltip__body { + width: 250px !important; + white-space: normal !important; + text-align: center !important; + } +} diff --git a/src/registrar/assets/sass/_theme/styles.scss b/src/registrar/assets/sass/_theme/styles.scss index 0239199e7..942501110 100644 --- a/src/registrar/assets/sass/_theme/styles.scss +++ b/src/registrar/assets/sass/_theme/styles.scss @@ -13,6 +13,7 @@ @forward "lists"; @forward "buttons"; @forward "forms"; +@forward "tooltips"; @forward "fieldsets"; @forward "alerts"; @forward "tables"; 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 95392da1e..32aee7c71 100644 --- a/src/registrar/templates/django/admin/domain_request_change_form.html +++ b/src/registrar/templates/django/admin/domain_request_change_form.html @@ -92,5 +92,24 @@ -{{ block.super }} + +
+ + + + + +

+ Requested domain: {{ original.requested_domain.name }} +

+ {{ block.super }} +
+ + + {% endblock %} \ No newline at end of file diff --git a/src/registrar/templates/domain_users.html b/src/registrar/templates/domain_users.html index e295d2f7e..9d3bbe6e6 100644 --- a/src/registrar/templates/domain_users.html +++ b/src/registrar/templates/domain_users.html @@ -134,7 +134,7 @@ {{ invitation.status|title }}
- {% csrf_token %} + {% csrf_token %}
diff --git a/src/registrar/tests/test_admin.py b/src/registrar/tests/test_admin.py index 8ed61d76c..c01106b27 100644 --- a/src/registrar/tests/test_admin.py +++ b/src/registrar/tests/test_admin.py @@ -2,6 +2,7 @@ from datetime import date from django.test import TestCase, RequestFactory, Client, override_settings from django.contrib.admin.sites import AdminSite from contextlib import ExitStack +from api.tests.common import less_console_noise_decorator from django_webtest import WebTest # type: ignore from django.contrib import messages from django.urls import reverse @@ -1211,6 +1212,28 @@ class TestDomainRequestAdmin(MockEppLib): # Test that approved domain exists and equals requested domain self.assertEqual(domain_request.requested_domain.name, domain_request.approved_domain.name) + @less_console_noise_decorator + def test_sticky_submit_row_shows_requested_domain(self): + """Test that the change_form template contains a string indicative of the customization + of the sticky submit bar.""" + + # make sure there is no user with this email + EMAIL = "mayor@igorville.gov" + User.objects.filter(email=EMAIL).delete() + self.client.force_login(self.superuser) + + # Create a sample domain request + domain_request = completed_domain_request(status=DomainRequest.DomainRequestStatus.IN_REVIEW) + + # Create a mock request + request = self.client.post("/admin/registrar/domainrequest/{}/change/".format(domain_request.pk)) + + # Since we're using client to mock the request, we can only test against + # non-interpolated values + expected_content = "Requested domain:" + + self.assertContains(request, expected_content) + def test_save_model_sets_restricted_status_on_user(self): with less_console_noise(): # make sure there is no user with this email diff --git a/src/registrar/tests/test_views_application.py b/src/registrar/tests/test_views_request.py similarity index 100% rename from src/registrar/tests/test_views_application.py rename to src/registrar/tests/test_views_request.py From 5afe85d5ce7c5f7f2dc8310621e7141a02f67e8e Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 26 Mar 2024 14:52:17 -0400 Subject: [PATCH 02/13] Hide toggle button on mobile --- .../templates/django/admin/domain_request_change_form.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 32aee7c71..bfabd5124 100644 --- a/src/registrar/templates/django/admin/domain_request_change_form.html +++ b/src/registrar/templates/django/admin/domain_request_change_form.html @@ -95,7 +95,7 @@
- + -

+

Requested domain: {{ original.requested_domain.name }}

{{ block.super }} From d9c1ee82fb703ef6ff69aa3cdde92f10287d5eba Mon Sep 17 00:00:00 2001 From: Rachid Mrad <107004823+rachidatecs@users.noreply.github.com> Date: Fri, 29 Mar 2024 13:44:36 -0400 Subject: [PATCH 06/13] Update src/registrar/assets/sass/_theme/_admin.scss Co-authored-by: zandercymatics <141044360+zandercymatics@users.noreply.github.com> --- src/registrar/assets/sass/_theme/_admin.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index 53e887683..01b40a923 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -450,7 +450,7 @@ address.dja-address-contact-list { } #submitRowToggle { - color: var( --body-fg); + color: var(--body-fg); } .requested-domain-sticky { From 1668381a5c9f040428ef31cbfebd2a61f7f7fa2b Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Fri, 29 Mar 2024 13:58:49 -0400 Subject: [PATCH 07/13] layout tweak --- src/registrar/assets/js/get-gov-reports.js | 1 + src/registrar/assets/sass/_theme/_admin.scss | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js index 497b92443..92bba4a1f 100644 --- a/src/registrar/assets/js/get-gov-reports.js +++ b/src/registrar/assets/js/get-gov-reports.js @@ -125,5 +125,6 @@ createComparativeColumnChart("myChart6", "All requests", "Start Date", "End Date"); }); }; + initComparativeColumnCharts(); })(); diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index 01b40a923..3fba9f5f1 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -428,6 +428,7 @@ address.dja-address-contact-list { position: fixed; bottom: 0; right: 0; + left: 350px; background: var(--darkened-bg); border-top-left-radius: 6px; transition: transform .2s ease-out; @@ -461,7 +462,7 @@ address.dja-address-contact-list { } } -@media screen and (max-width:1199px) { +@media screen and (max-width:1256px) { .submit-row { clear: both; } From 8119dc477bcc95441cbe7fa979e40271d47222b2 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Fri, 29 Mar 2024 14:04:41 -0400 Subject: [PATCH 08/13] layout tweak --- src/registrar/assets/sass/_theme/_admin.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index 3fba9f5f1..88050bad4 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -428,7 +428,7 @@ address.dja-address-contact-list { position: fixed; bottom: 0; right: 0; - left: 350px; + left: 338px; background: var(--darkened-bg); border-top-left-radius: 6px; transition: transform .2s ease-out; From 1561f2c8b531af15ebd1244aec65a30b9e93b3ca Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Fri, 29 Mar 2024 14:19:25 -0400 Subject: [PATCH 09/13] layout tweak --- src/registrar/assets/sass/_theme/_admin.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index 88050bad4..a86612e73 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -466,4 +466,9 @@ address.dja-address-contact-list { .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); + } } From 25a46983db810e30f50c3af5b1b86bca0f008ee8 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Fri, 29 Mar 2024 16:41:00 -0400 Subject: [PATCH 10/13] change breakpoint for sticky nav --- src/registrar/assets/sass/_theme/_admin.scss | 2 +- .../templates/django/admin/domain_request_change_form.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index a86612e73..29c60aa1e 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -423,7 +423,7 @@ address.dja-address-contact-list { } // Sticky submit bar for domain requests on desktop -@include at-media(desktop) { +@media screen and (min-width:768px) { .submit-row-wrapper { position: fixed; bottom: 0; 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 0dedd4751..449a69062 100644 --- a/src/registrar/templates/django/admin/domain_request_change_form.html +++ b/src/registrar/templates/django/admin/domain_request_change_form.html @@ -114,7 +114,7 @@ -

+

Requested domain: {{ original.requested_domain.name }}

{{ block.super }} From d1e8c2c4e8a6130b23bfa854e51ca29d6af38a8e Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Mon, 1 Apr 2024 19:57:47 -0400 Subject: [PATCH 11/13] Tweak design for certain screen sizes for analysts only --- src/registrar/assets/js/get-gov-admin.js | 4 +- src/registrar/assets/sass/_theme/_admin.scss | 39 ++++++++++++------- .../admin/domain_request_change_form.html | 3 +- src/registrar/templatetags/custom_filters.py | 5 +++ 4 files changed, 35 insertions(+), 16 deletions(-) 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 @@
-
+
+{# submit-row-wrapper--analyst-view is a class that manages layout on certain screens for analysts only #}
diff --git a/src/registrar/tests/test_admin.py b/src/registrar/tests/test_admin.py index 37361375a..d6625081d 100644 --- a/src/registrar/tests/test_admin.py +++ b/src/registrar/tests/test_admin.py @@ -1213,9 +1213,11 @@ class TestDomainRequestAdmin(MockEppLib): self.assertEqual(domain_request.requested_domain.name, domain_request.approved_domain.name) @less_console_noise_decorator - def test_sticky_submit_row_shows_requested_domain(self): - """Test that the change_form template contains a string indicative of the customization - of the sticky submit bar.""" + def test_sticky_submit_row(self): + """Test that the change_form template contains strings indicative of the customization + of the sticky submit bar. + + Also test that it does NOT contain a CSS class meant for analysts only when logged in as superuser.""" # make sure there is no user with this email EMAIL = "mayor@igorville.gov" @@ -1233,6 +1235,35 @@ class TestDomainRequestAdmin(MockEppLib): expected_content = "Requested domain:" expected_content2 = '' expected_content3 = '
' + not_expected_content = "submit-row-wrapper--analyst-view>" + self.assertContains(request, expected_content) + self.assertContains(request, expected_content2) + self.assertContains(request, expected_content3) + self.assertNotContains(request, not_expected_content) + + @less_console_noise_decorator + def test_sticky_submit_row_has_extra_class_for_analysts(self): + """Test that the change_form template contains strings indicative of the customization + of the sticky submit bar. + + Also test that it DOES contain a CSS class meant for analysts only when logged in as analyst.""" + + # make sure there is no user with this email + EMAIL = "mayor@igorville.gov" + User.objects.filter(email=EMAIL).delete() + self.client.force_login(self.staffuser) + + # Create a sample domain request + domain_request = completed_domain_request(status=DomainRequest.DomainRequestStatus.IN_REVIEW) + + # Create a mock request + request = self.client.post("/admin/registrar/domainrequest/{}/change/".format(domain_request.pk)) + + # Since we're using client to mock the request, we can only test against + # non-interpolated values + expected_content = "Requested domain:" + expected_content2 = '' + expected_content3 = '
' self.assertContains(request, expected_content) self.assertContains(request, expected_content2) self.assertContains(request, expected_content3) From 03622204ce5216bbf49653c9e156e5f701ccae11 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 2 Apr 2024 13:13:43 -0400 Subject: [PATCH 13/13] Hide sticky requested domain in mobile --- src/registrar/assets/sass/_theme/_admin.scss | 10 ++++++++++ .../django/admin/domain_request_change_form.html | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index a537fc872..f0cc7fafb 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -476,6 +476,16 @@ address.dja-address-contact-list { } } +.visible-768 { + display: none; +} + +@media screen and (min-width:768px) { + .visible-768 { + display: block; + } +} + @media screen and (min-width:935px) { // Analyst only class .submit-row-wrapper--analyst-view { 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 be66c7c81..3b4fa7283 100644 --- a/src/registrar/templates/django/admin/domain_request_change_form.html +++ b/src/registrar/templates/django/admin/domain_request_change_form.html @@ -116,7 +116,7 @@ -

+

Requested domain: {{ original.requested_domain.name }}

{{ block.super }}