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

[DRAFT] #2409: Increase padding under action buttons on stacked tables (mobile view) - [aa] (#3871)

Browse source 
* increasing margin

* Resolved border issue. Fixed margin classes not in quotes

---------

Co-authored-by: CocoByte <nicolle.leclair@gmail.com>
This commit is contained in:
Abe Alam 2025-06-24 16:51:54 -04:00 • committed by GitHub
parent 273da951aa
commit 41ea9a8269
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 40 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/registrar/assets/src/js/getgov/table-base.js
View file

@ -85,7 +85,7 @@ export function generateKebabHTML(action, unique_id, modal_button_text, screen_r
role="button"
id="button-trigger-${action}-${unique_id}"
href="#toggle-${action}-${unique_id}"
class="usa-button usa-button--unstyled text-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary ${mobileOnly ? 'visible-mobile-flex' : ''}"
class="usa-button usa-button--unstyled text-underline late-loading-modal-trigger margin-top-1 line-height-sans-5 text-secondary ${mobileOnly ? 'visible-mobile-flex' : ''}"
aria-controls="toggle-${action}-${unique_id}"
data-open-modal
>

2
src/registrar/assets/src/js/getgov/table-domain-requests.js
View file

@ -119,7 +119,7 @@ export class DomainRequestsTable extends BaseTable {
<td data-label="Status">
${request.status}
</td>
<td data-label="Action" class="width--action-column">
<td data-label="Action" class="width--action-column margin-bottom-3">
<div class="tablet:display-flex tablet:flex-row">
<a href="${actionUrl}" ${customTableOptions.hasAdditionalActions ? "class='margin-right-2'" : ''}>
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">

2
src/registrar/assets/src/js/getgov/table-domains.js
View file

@ -57,7 +57,7 @@ export class DomainsTable extends BaseTable {
</svg>
</td>
${markupForSuborganizationRow}
<td data-label="Action" class="width--action-column">
<td data-label="Action" class="width--action-column margin-bottom-3">
<div class="tablet:display-flex tablet:flex-row flex-align-center margin-right-2">
<a href="${actionUrl}">
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">

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

@ -117,7 +117,7 @@ export class MembersTable extends BaseTable {
<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}
</td>
<td data-label="Action" class="padding-bottom-0" headers="header-action row-header-${unique_id}" class="width--action-column">
<td data-label="Action" class="padding-bottom-0 margin-bottom-3" headers="header-action row-header-${unique_id}" class="width--action-column">
<div class="tablet:display-flex tablet:flex-row flex-align-center">
<a href="${member.action_url}" ${customTableOptions.hasAdditionalActions ? "class='margin-right-2'" : ''}>
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">

77
src/registrar/assets/src/sass/_theme/_tables.scss
View file

@ -20,16 +20,6 @@ th {
border-top: none;
}
tr {
border-bottom: none;
border-top: 2px solid color('base-lighter');
margin-top: units(2);
&:first-child {
margin-top: 0;
}
}
td[data-label]:before,
th[data-label]:before {
color: color('primary-darker');
@ -51,49 +41,54 @@ th {
.dotgov-table {
width: 100%;
tbody th {
word-break: break-word;
}
@include at-media(mobile-lg) {
margin-top: units(1); //this doesn't appear to do anything
margin-top: units(1);
tr {
border: none;
//Table header work-break
tbody th {
word-break: break-word;
}
tr:not(.hide-td-borders):not(:last-child) td,
tr:not(.hide-td-borders):not(:last-child) th {
border-bottom: 1px solid color('base-lighter');
}
}
//Table Borders
tr {
border: none;
}
thead th,
thead th[aria-sort] {
color: color('primary-darker');
border-bottom: 2px solid color('base-light');
}
tr:not(.hide-td-borders) {
border-bottom: 1px solid color('base-lighter');
}
tbody tr:last-of-type {
td, th {
border-bottom: 0;
}
}
thead th,
thead th[aria-sort] {
color: color('primary-darker');
border-bottom: 2px solid color('base-light');
}
//No border for the very top element
thead tr:first-child th:first-child {
border-top: none;
}
//No border for very bottom element
tbody tr:last-of-type {
td, th {
padding: units(2) units(4) units(2) 0;
}
// Hack fix to the overly specific selector above that broke utility class usefulness
.padding-right-105 {
padding-right: .75rem;
}
thead tr:first-child th:first-child {
border-top: none;
border-bottom: 0;
}
}
td, th {
padding: units(2) units(4) units(2) 0;
}
// Hack fix to the overly specific selector above that broke utility class usefulness
.padding-right-105 {
padding-right: .75rem;
}
// Sortable headers
th[data-sortable][aria-sort=ascending],
th[data-sortable][aria-sort=descending] {