mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-12 04:29:44 +02:00
Add styling + javascript
This commit is contained in:
parent
b072e4f478
commit
0bcc9ca43a
3 changed files with 45 additions and 12 deletions
|
@ -555,3 +555,27 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk,
|
||||||
observer.observe(targetElement);
|
observer.observe(targetElement);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
/** An IIFE for toggling the overflow styles on django-admin__model-description (the show more / show less button) */
|
||||||
|
(function () {
|
||||||
|
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';
|
||||||
|
|
||||||
|
// Move the div to where it was when the page first loaded
|
||||||
|
descriptionDiv.appendChild(toggleButton);
|
||||||
|
} else {
|
||||||
|
toggleButton.textContent = 'Show more';
|
||||||
|
descriptionDiv.insertAdjacentElement('afterend', toggleButton);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
|
@ -618,7 +618,12 @@ address.dja-address-contact-list {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.django-admin__model-description{
|
div.dja__model-description{
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
p, li {
|
p, li {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
|
@ -629,13 +634,17 @@ div.django-admin__model-description{
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
}
|
||||||
margin-top: 25px !important;
|
|
||||||
height: 10px !important;
|
.dja__model-description + button {
|
||||||
}
|
margin-top: 25px !important;
|
||||||
|
height: 10px !important;
|
||||||
display: -webkit-box;
|
}
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
div.dja__model-description.dja__model-description--no-overflow {
|
||||||
overflow: hidden;
|
display: block;
|
||||||
|
overflow: unset;
|
||||||
|
button {
|
||||||
|
margin-top: unset;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<span class="display-inline-flex">
|
<span class="display-inline-flex">
|
||||||
<div class="django-admin__model-description text-normal">
|
<div class="dja__model-description text-normal">
|
||||||
{% if opts.model_name == 'domainrequest' %}
|
{% if opts.model_name == 'domainrequest' %}
|
||||||
<p>
|
<p>
|
||||||
This table contains all domain requests that have been started within the registrar and the status of those requests.
|
This table contains all domain requests that have been started within the registrar and the status of those requests.
|
||||||
|
@ -184,5 +184,5 @@
|
||||||
<p>This table does not have a description yet.</p>
|
<p>This table does not have a description yet.</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<button class="usa-button usa-button--unstyled text-no-underline" type="button">Show more</button>
|
<button id="dja-show-more-model-description" class="usa-button usa-button--unstyled text-no-underline" type="button">Show more</button>
|
||||||
</span>
|
</span>
|
Loading…
Add table
Add a link
Reference in a new issue