mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-05-19 10:59:21 +02:00
Show more/less for status auditlogs
This commit is contained in:
Rachid Mrad
parent
914795efaf
commit
63f8c865d2
5 changed files with 98 additions and 49 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,32 +542,42 @@ 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 {
|
||||
background: none;
|
||||
text-transform: none;
|
||||
}
|
||||
.collapse-toggle--dgsimple,
|
||||
.module.collapse--dgfieldset button {
|
||||
background: none;
|
||||
text-transform: none;
|
||||
color: var(--link-fg);
|
||||
margin-top: 8px;
|
||||
margin-left: 10px;
|
||||
span {
|
||||
text-decoration: underline;
|
||||
font-size: 13px;
|
||||
font-feature-settings: "kern";
|
||||
font-kerning: normal;
|
||||
line-height: 13px;
|
||||
font-family: family('sans');
|
||||
}
|
||||
&:hover {
|
||||
color: var(--link-fg);
|
||||
margin-top: 8px;
|
||||
margin-left: 10px;
|
||||
span {
|
||||
text-decoration: underline;
|
||||
font-size: 13px;
|
||||
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";
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,29 +70,37 @@ 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">
|
||||
<table class="usa-table usa-table--borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>User</th>
|
||||
<th>Changed at</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for log_entry in original_object.history.all %}
|
||||
{% for key, value in log_entry.changes_display_dict.items %}
|
||||
{% if key == "status" %}
|
||||
<tr>
|
||||
<td>{{ value.1|default:"None" }}</td>
|
||||
<td>{{ log_entry.actor|default:"None" }}</td>
|
||||
<td>{{ log_entry.timestamp|default:"None" }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<div>
|
||||
<div class="usa-table-container--scrollable collapse--dgsimple" tabindex="0">
|
||||
<table class="usa-table usa-table--borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>User</th>
|
||||
<th>Changed at</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for log_entry in original_object.history.all %}
|
||||
{% for key, value in log_entry.changes_display_dict.items %}
|
||||
{% if key == "status" %}
|
||||
<tr>
|
||||
<td>{{ value.1|default:"None" }}</td>
|
||||
<td>{{ log_entry.actor|default:"None" }}</td>
|
||||
<td>{{ log_entry.timestamp|default:"None" }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</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" %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue