zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-24 03:30:50 +02:00
Code Issues Projects Releases Packages Wiki Activity

Move button to other row to fix tab issue

Browse source
This commit is contained in:
zandercymatics 2025-02-24 10:59:26 -07:00
parent a70eee48b1
commit 699db826d0
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
1 changed files with 20 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/registrar/assets/src/js/getgov/table-members.js
View file

@ -69,6 +69,7 @@ export class MembersTable extends BaseTable {
const kebabHTML = customTableOptions.hasAdditionalActions ? generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `Expand for more options for ${member.name}`): ''; const kebabHTML = customTableOptions.hasAdditionalActions ? generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `Expand for more options for ${member.name}`): '';
const row = document.createElement('tr'); const row = document.createElement('tr');
row.classList.add('hide-td-borders');
let admin_tagHTML = ``; let admin_tagHTML = ``;
if (member.is_admin) if (member.is_admin)
admin_tagHTML = `<span class="usa-tag margin-left-1 bg-primary-dark text-semibold">Admin</span>` admin_tagHTML = `<span class="usa-tag margin-left-1 bg-primary-dark text-semibold">Admin</span>`
@ -96,20 +97,26 @@ export class MembersTable extends BaseTable {
</button> </button>
`; `;
showMoreRow.innerHTML = `<td colspan='3' headers="header-member row-header-${unique_id}" class="padding-top-0"><div class='grid-row'>${domainsHTML} ${permissionsHTML}</div></td>`; showMoreRow.innerHTML = `
showMoreRow.classList.add('show-more-content'); <td colspan='3' headers="header-member row-header-${unique_id}" class="padding-top-0">
showMoreRow.classList.add('display-none'); ${showMoreButton}
<div class='grid-row show-more-content display-none'>
${domainsHTML}
${permissionsHTML}
</div>
</td>
`;
showMoreRow.id = unique_id; showMoreRow.id = unique_id;
} }
row.innerHTML = ` row.innerHTML = `
<th role="rowheader" headers="header-member" data-label="member email" id='row-header-${unique_id}'> <th class="padding-bottom-0" role="rowheader" headers="header-member" data-label="member email" id='row-header-${unique_id}'>
${member.member_display} ${admin_tagHTML} ${showMoreButton} ${member.member_display} ${admin_tagHTML}
</th> </th>
<td headers="header-last-active row-header-${unique_id}" data-sort-value="${last_active.sort_value}" data-label="last_active"> <td class="padding-bottom-0" headers="header-last-active row-header-${unique_id}" data-sort-value="${last_active.sort_value}" data-label="last_active">
${last_active.display_value} ${last_active.display_value}
</td> </td>
<td headers="header-action row-header-${unique_id}" class="width--action-column"> <td class="padding-bottom-0" headers="header-action row-header-${unique_id}" class="width--action-column">
<div class="tablet:display-flex tablet:flex-row flex-align-center"> <div class="tablet:display-flex tablet:flex-row flex-align-center">
<a href="${member.action_url}"> <a href="${member.action_url}">
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
@ -146,16 +153,15 @@ export class MembersTable extends BaseTable {
* *
* @param {HTMLElement} toggleButton - The button that toggles the content visibility. * @param {HTMLElement} toggleButton - The button that toggles the content visibility.
* @param {HTMLElement} contentDiv - The content div whose visibility is toggled. * @param {HTMLElement} contentDiv - The content div whose visibility is toggled.
* @param {HTMLElement} buttonParentRow - The parent row element containing the button.
*/ */
function toggleShowMoreButton(toggleButton, contentDiv, buttonParentRow) { function toggleShowMoreButton(toggleButton, contentDiv) {
const spanElement = toggleButton.querySelector('span'); const spanElement = toggleButton.querySelector('span');
const useElement = toggleButton.querySelector('use'); const useElement = toggleButton.querySelector('use');
if (contentDiv.classList.contains('display-none')) { if (contentDiv.classList.contains('display-none')) {
showElement(contentDiv); showElement(contentDiv);
spanElement.textContent = 'Close'; spanElement.textContent = 'Close';
useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_less'); useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_less');
buttonParentRow.classList.add('hide-td-borders'); toggleButton.classList.add('margin-bottom-2');
let ariaLabelText = "Close additional information"; let ariaLabelText = "Close additional information";
let ariaLabelPlaceholder = toggleButton.getAttribute("aria-label-placeholder"); let ariaLabelPlaceholder = toggleButton.getAttribute("aria-label-placeholder");
@ -169,7 +175,7 @@ export class MembersTable extends BaseTable {
hideElement(contentDiv); hideElement(contentDiv);
spanElement.textContent = 'Expand'; spanElement.textContent = 'Expand';
useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_more'); useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_more');
buttonParentRow.classList.remove('hide-td-borders'); toggleButton.classList.remove('margin-bottom-2');
let ariaLabelText = "Expand for additional information"; let ariaLabelText = "Expand for additional information";
let ariaLabelPlaceholder = toggleButton.getAttribute("aria-label-placeholder"); let ariaLabelPlaceholder = toggleButton.getAttribute("aria-label-placeholder");
@ -182,14 +188,11 @@ export class MembersTable extends BaseTable {
let toggleButtons = document.querySelectorAll('.usa-button--show-more-button'); let toggleButtons = document.querySelectorAll('.usa-button--show-more-button');
toggleButtons.forEach((toggleButton) => { toggleButtons.forEach((toggleButton) => {
// get contentDiv for element specified in data-for attribute of toggleButton
let dataFor = toggleButton.dataset.for;
let contentDiv = document.getElementById(dataFor);
let buttonParentRow = toggleButton.parentElement.parentElement; let buttonParentRow = toggleButton.parentElement.parentElement;
if (contentDiv && contentDiv.tagName.toLowerCase() === 'tr' && contentDiv.classList.contains('show-more-content') && buttonParentRow && buttonParentRow.tagName.toLowerCase() === 'tr') { let contentDiv = buttonParentRow.querySelector(".show-more-content");
if (contentDiv && buttonParentRow && buttonParentRow.tagName.toLowerCase() === 'tr') {
toggleButton.addEventListener('click', function() { toggleButton.addEventListener('click', function() {
toggleShowMoreButton(toggleButton, contentDiv, buttonParentRow); toggleShowMoreButton(toggleButton, contentDiv);
}); });
} else { } else {
console.warn('Found a toggle button with no associated toggleable content or parent row'); console.warn('Found a toggle button with no associated toggleable content or parent row');