Remove inline show more

This commit is contained in:
zandercymatics 2024-04-25 13:45:47 -06:00
parent 0bcc9ca43a
commit 309b403925
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
3 changed files with 173 additions and 185 deletions

View file

@ -562,6 +562,7 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk,
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');
@ -569,12 +570,8 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk,
// Change the button text based on the presence of the class
if (descriptionDiv.classList.contains('dja__model-description--no-overflow')) {
toggleButton.textContent = 'Show less';
// Move the div to where it was when the page first loaded
descriptionDiv.appendChild(toggleButton);
} else {
toggleButton.textContent = 'Show more';
descriptionDiv.insertAdjacentElement('afterend', toggleButton);
}
});
}

View file

@ -636,15 +636,7 @@ div.dja__model-description{
}
.dja__model-description + button {
margin-top: 25px !important;
height: 10px !important;
}
div.dja__model-description.dja__model-description--no-overflow {
display: block;
overflow: unset;
button {
margin-top: unset;
}
}

View file

@ -1,5 +1,5 @@
<span class="display-inline-flex">
<div class="dja__model-description text-normal">
<div class="dja__model-description text-normal">
{% if opts.model_name == 'domainrequest' %}
<p>
This table contains all domain requests that have been started within the registrar and the status of those requests.
@ -183,6 +183,5 @@
{% else %}
<p>This table does not have a description yet.</p>
{% endif %}
</div>
<button id="dja-show-more-model-description" class="usa-button usa-button--unstyled text-no-underline" type="button">Show more</button>
</span>
</div>
<button id="dja-show-more-model-description" class="usa-button usa-button--unstyled text-no-underline margin-top-1" type="button">Show more</button>