diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js index 1f4581026..307bce05b 100644 --- a/src/registrar/assets/js/get-gov-admin.js +++ b/src/registrar/assets/js/get-gov-admin.js @@ -558,21 +558,35 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk, /** An IIFE for toggling the overflow styles on django-admin__model-description (the show more / show less button) */ (function () { + function handleShowMoreButton(toggleButton, descriptionDiv){ + // Check the length of the text content in the description div + if (descriptionDiv.textContent.length < 200) { + // Hide the toggle button if text content is less than 200 characters + // This is a little over 160 characters to give us some wiggle room if we + // change the font size marginally. + toggleButton.classList.add('display-none'); + } else { + toggleButton.addEventListener('click', function() { + toggleShowMoreButton(toggleButton, descriptionDiv, 'dja__model-description--no-overflow') + }); + } + } + + function toggleShowMoreButton(toggleButton, descriptionDiv, showMoreClassName){ + // Toggle the class on the description div + descriptionDiv.classList.toggle(showMoreClassName); + + // Change the button text based on the presence of the class + if (descriptionDiv.classList.contains(showMoreClassName)) { + toggleButton.textContent = 'Show less'; + } else { + toggleButton.textContent = 'Show more'; + } + } + let toggleButton = document.getElementById('dja-show-more-model-description'); let descriptionDiv = document.querySelector('.dja__model-description'); - if (toggleButton && descriptionDiv) { - - toggleButton.addEventListener('click', function() { - // Toggle the class on the description div - descriptionDiv.classList.toggle('dja__model-description--no-overflow'); - - // Change the button text based on the presence of the class - if (descriptionDiv.classList.contains('dja__model-description--no-overflow')) { - toggleButton.textContent = 'Show less'; - } else { - toggleButton.textContent = 'Show more'; - } - }); + handleShowMoreButton(toggleButton, descriptionDiv) } })(); \ 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 99bf2017a..b5bf735ca 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -625,11 +625,22 @@ div.dja__model-description{ overflow: hidden; p, li { - color: var(--primary); font-size: medium; line-height: 1.2em; } + @media (prefers-color-scheme: light) { + p, li { + color: var(--body-fg); + } + } + + @media (prefers-color-scheme: dark) { + p, li { + color: var(--primary); + } + } + li { list-style-type: disc; } diff --git a/src/registrar/templates/admin/model_descriptions.html b/src/registrar/templates/admin/model_descriptions.html index 68550e5bb..7120e5e6b 100644 --- a/src/registrar/templates/admin/model_descriptions.html +++ b/src/registrar/templates/admin/model_descriptions.html @@ -9,7 +9,7 @@
Once a domain request has been adjudicated, the details of that request should not be modified. To update attributes (like an organization’s name) after a domain’s approval, - go to Domains. + go to Domains. Similar fields display on each Domain page, but edits made there will not affect the corresponding domain request.
{% elif opts.model_name == 'domaininformation' %} @@ -140,7 +140,7 @@To maintain a single source of truth across all environments (stable, staging, etc.), - the groups and permissions are set and updated through the codebase. + the groups and permissions are set and updated through the codebase. Do not add, edit or delete user groups here.
{% elif opts.model_name == 'user' %}