From ee59c6a074c67b8686154b2a8d1a58b18c79ecbe Mon Sep 17 00:00:00 2001 From: CocoByte Date: Thu, 3 Oct 2024 02:03:12 -0600 Subject: [PATCH] Updated view only verbage. Tooltip mods --- src/registrar/assets/js/uswds-edited.js | 24 ++++++++++++++---- .../assets/sass/_theme/_tooltips.scss | 25 +++++++++++++++++++ src/registrar/templates/domain_detail.html | 3 ++- src/registrar/tests/test_views_domain.py | 2 +- 4 files changed, 47 insertions(+), 7 deletions(-) diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js index e73f3b6c0..c01aabea3 100644 --- a/src/registrar/assets/js/uswds-edited.js +++ b/src/registrar/assets/js/uswds-edited.js @@ -5938,6 +5938,10 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => { return offset; }; + const element_is_fixed_positioned = false + const parentRect = tooltipTrigger.getBoundingClientRect(); + const element_left = element_is_fixed_positioned ? parentRect.left + parentRect.width : `50%` + /** * Positions tooltip at the top * @param {HTMLElement} e - this is the tooltip body @@ -5949,7 +5953,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => { const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger); const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger); setPositionClass("top"); - e.style.left = `50%`; // center the element + e.style.left = element_left; // center the element e.style.top = `-${TRIANGLE_SIZE}px`; // consider the pseudo element // apply our margins based on the offset e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`; @@ -5963,7 +5967,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => { resetPositionStyles(e); const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger); setPositionClass("bottom"); - e.style.left = `50%`; + e.style.left = element_left; e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`; }; @@ -5975,7 +5979,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => { resetPositionStyles(e); const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger); setPositionClass("right"); - e.style.top = `50%`; + e.style.top = element_left; e.style.left = `${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`; e.style.margin = `-${topMargin / 2}px 0 0 0`; }; @@ -5991,7 +5995,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => { // we have to check for some utility margins const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger); setPositionClass("left"); - e.style.top = `50%`; + e.style.top = element_left; e.style.left = `-${TRIANGLE_SIZE}px`; e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin }; @@ -6017,6 +6021,10 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => { if (i < positions.length) { const pos = positions[i]; pos(element); + + const rect = element.getBoundingClientRect(); + console.log("***RECTANGLE**** "+rect.width); + if (!isElementInViewport(element)) { // eslint-disable-next-line no-param-reassign tryPositions(i += 1); @@ -6128,7 +6136,13 @@ const setUpAttributes = tooltipTrigger => { tooltipBody.setAttribute("aria-hidden", "true"); // place the text in the tooltip - tooltipBody.textContent = tooltipContent; + // DOTGOV: nest elements for tooltip to prevent clipping (works around viewport calcs) + tooltipBody.innerHTML = ` +

+ ${tooltipContent} +

` + // tooltipBody.textContent = tooltipContent; + return { tooltipBody, position, diff --git a/src/registrar/assets/sass/_theme/_tooltips.scss b/src/registrar/assets/sass/_theme/_tooltips.scss index 3ab630dc0..dc1309ad2 100644 --- a/src/registrar/assets/sass/_theme/_tooltips.scss +++ b/src/registrar/assets/sass/_theme/_tooltips.scss @@ -28,3 +28,28 @@ #extended-logo .usa-tooltip__body { font-weight: 400 !important; } + +.usa-tooltip__body > p { + margin-top: 0; + width: 40vw; + text-wrap: wrap; + text-align: center; + font-size: .9rem; + margin-block-start: 0em; + margin-block-end: 0em; + max-width: fit-content; + @include at-media('tablet') { + width: 70vw; + } +} + +.usa-tooltip__body { + white-space: inherit; + max-width: fit-content; + // position: fixed; +} + +.usa-tooltip__body--wrap { + min-width: inherit; + width: inherit; +} \ No newline at end of file diff --git a/src/registrar/templates/domain_detail.html b/src/registrar/templates/domain_detail.html index dca68f6ef..5cb559a5a 100644 --- a/src/registrar/templates/domain_detail.html +++ b/src/registrar/templates/domain_detail.html @@ -45,7 +45,8 @@

- To manage information for this domain, you must add yourself as a domain manager. + You don't have access to manage {{domain.name}}. If you need to make updates, contact one of the listed domain managers. + Alternatively, an admin for your organization can assign this domain to you by updating your member permissions.

diff --git a/src/registrar/tests/test_views_domain.py b/src/registrar/tests/test_views_domain.py index 8fb92df72..aa2fc10c0 100644 --- a/src/registrar/tests/test_views_domain.py +++ b/src/registrar/tests/test_views_domain.py @@ -340,7 +340,7 @@ class TestDomainDetail(TestDomainOverview): detail_page = self.client.get(f"/domain/{domain.id}") # Check that alert message displays properly self.assertContains( - detail_page, "To manage information for this domain, you must add yourself as a domain manager." + detail_page, "You don't have access to manage "+domain.name+". If you need to make updates, contact one of the listed domain managers." ) # Check that user does not have option to Edit domain self.assertNotContains(detail_page, "Edit")