zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-05-19 10:59:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

Show more/less for status auditlogs

Browse source
This commit is contained in:
Rachid Mrad 2024-05-03 13:34:57 -04:00
parent 914795efaf
commit 63f8c865d2
No known key found for this signature in database
5 changed files with 98 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/registrar/admin.py
View file

@ -1013,7 +1013,7 @@ class DomainInformationAdmin(ListHeaderAdmin):
(
"Show details",
{
"classes": ["collapse--dotgov"],
"classes": ["collapse--dgfieldset"],
"description": "Extends type of organization",
"fields": [
"federal_type",
@ -1039,7 +1039,7 @@ class DomainInformationAdmin(ListHeaderAdmin):
(
"Show details",
{
"classes": ["collapse--dotgov"],
"classes": ["collapse--dgfieldset"],
"description": "Extends organization name and mailing address",
"fields": [
"address_line1",
@ -1266,7 +1266,7 @@ class DomainRequestAdmin(ListHeaderAdmin):
(
"Show details",
{
"classes": ["collapse--dotgov"],
"classes": ["collapse--dgfieldset"],
"description": "Extends type of organization",
"fields": [
"federal_type",
@ -1292,7 +1292,7 @@ class DomainRequestAdmin(ListHeaderAdmin):
(
"Show details",
{
"classes": ["collapse--dotgov"],
"classes": ["collapse--dgfieldset"],
"description": "Extends organization name and mailing address",
"fields": [
"address_line1",

39
src/registrar/assets/js/dja-collapse.js
View file

@ -4,19 +4,18 @@
* Works with our fieldset override
*/
/*global gettext*/
'use strict';
{
window.addEventListener('load', function() {
// Add anchor tag for Show/Hide link
const fieldsets = document.querySelectorAll('fieldset.collapse--dotgov');
const fieldsets = document.querySelectorAll('fieldset.collapse--dgfieldset');
for (const [i, elem] of fieldsets.entries()) {
// Don't hide if fields in this fieldset have errors
if (elem.querySelectorAll('div.errors, ul.errorlist').length === 0) {
elem.classList.add('collapsed');
const button = elem.querySelector('button');
button.id = 'fieldsetcollapser' + i;
button.className = 'collapse-toggle--dotgov usa-button usa-button--unstyled';
button.className = 'collapse-toggle--dgfieldset usa-button usa-button--unstyled';
}
}
// Add toggle to hide/show anchor tag
@ -38,8 +37,40 @@
fieldset.classList.add('collapsed');
}
};
document.querySelectorAll('.collapse-toggle--dotgov').forEach(function(el) {
document.querySelectorAll('.collapse-toggle--dgfieldset').forEach(function(el) {
el.addEventListener('click', toggleFuncDotgov);
});
});
}
'use strict';
{
window.addEventListener('load', function() {
// Add anchor tag for Show/Hide link
const collapsibleContent = document.querySelectorAll('fieldset.collapse--dgsimple');
for (const [i, elem] of collapsibleContent.entries()) {
const button = elem.closest('div').querySelector('button');
button.id = 'simplecollapser' + i;
}
// Add toggle to hide/show anchor tag
const toggleFuncDotgovSimple = function(e) {
const fieldset = this.closest('div').querySelector('.collapse--dgsimple');
const spanElement = this.querySelector('span');
const useElement = this.querySelector('use');
if (fieldset.classList.contains('collapsed')) {
// Show
spanElement.textContent = 'Hide details';
useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_less');
fieldset.classList.remove('collapsed');
} else {
// Hide
spanElement.textContent = 'Show details';
useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_more');
fieldset.classList.add('collapsed');
}
};
document.querySelectorAll('.collapse-toggle--dgsimple').forEach(function(el) {
el.addEventListener('click', toggleFuncDotgovSimple);
});
});
}

24
src/registrar/assets/sass/_theme/_admin.scss
View file

@ -243,7 +243,7 @@ div#content > h2 {
// in the future
.object-tools li a,
.object-tools p a {
font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-family: family('sans');
text-transform: none!important;
font-size: 14px!important;
}
@ -293,7 +293,7 @@ div#content > h2 {
.messagelist_content-list--unstyled {
padding-left: 0;
li {
font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-family: family('sans');
font-size: 13.92px!important;
background: none!important;
padding: 0!important;
@ -542,11 +542,13 @@ address.dja-address-contact-list {
}
// Collapse button styles for fieldsets
.module.collapse--dotgov {
.module.collapse--dgfieldset {
margin-top: -35px;
padding-top: 0;
border: none;
button {
}
.collapse-toggle--dgsimple,
.module.collapse--dgfieldset button {
background: none;
text-transform: none;
color: var(--link-fg);
@ -558,16 +560,24 @@ address.dja-address-contact-list {
font-feature-settings: "kern";
font-kerning: normal;
line-height: 13px;
font-family: -apple-system, "system-ui", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: family('sans');
}
&:hover {
color: var(--link-fg);
svg {
color: var(--link-fg);
}
}
}
.collapse--dotgov.collapsed .collapse-toggle--dotgov {
.collapse--dgfieldset.collapsed .collapse-toggle--dgfieldset {
display: inline-block!important;
* {
display: inline-block;
}
}
.collapse--dgsimple.collapsed {
display: none;
}
.dja-status-list {
border-top: solid 1px var(--border-color);
@ -576,7 +586,7 @@ address.dja-address-contact-list {
padding-top: 10px;
li {
line-height: 1.5;
font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important;
font-family: family('sans');
padding-top: 0;
padding-bottom: 0;
}

4
src/registrar/templates/admin/fieldset.html
View file

@ -8,7 +8,7 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
<fieldset class="module aligned {{ fieldset.classes }}">
{% if fieldset.name %}
{# Customize the markup for the collapse toggle #}
{% if 'collapse--dotgov' in fieldset.classes %}
{% if 'collapse--dgfieldset' in fieldset.classes %}
<button type="button">
<span>{{ fieldset.name }}</span>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
@ -22,7 +22,7 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
{% endif %}
{# Customize the markup for the collapse toggle: Do not show a description for the collapse fieldsets, instead we're using the description as a screen reader only legend #}
{% if fieldset.description and 'collapse--dotgov' not in fieldset.classes %}
{% if fieldset.description and 'collapse--dgfieldset' not in fieldset.classes %}
<div class="description">{{ fieldset.description|safe }}</div>
{% endif %}

10
src/registrar/templates/django/admin/includes/detail_table_fieldset.html
View file

@ -70,7 +70,8 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% if field.field.name == "status" and original_object.history.count > 0 %}
<div class="flex-container">
<label aria-label="Submitter contact details"></label>
<div class="usa-table-container--scrollable" tabindex="0">
<div>
<div class="usa-table-container--scrollable collapse--dgsimple" tabindex="0">
<table class="usa-table usa-table--borderless">
<thead>
<tr>
@ -94,6 +95,13 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
</tbody>
</table>
</div>
<button type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled margin-top-2 margin-bottom-1 margin-left-1">
<span>Hide details</span>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="/public/img/sprite.svg#expand_less"></use>
</svg>
</button>
</div>
</div>
{% elif field.field.name == "creator" %}
<div class="flex-container tablet:margin-top-2">