zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-25 12:08:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3547 from cisagov/rjm/3357-action-kebobs-position

Browse source 
#3357: Position action kebobs on the left on desktops - [RJM]
This commit is contained in:
Rachid Mrad 2025-03-03 17:00:19 -05:00 • committed by GitHub
commit b209616bcf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 25 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/registrar/assets/src/sass/_theme/_accordions.scss
View file

@ -25,7 +25,6 @@
// Note, width is determined by a custom width class on one of the children
position: absolute;
z-index: 1;
left: 0;
border-radius: 4px;
border: solid 1px color('base-lighter');
padding: units(2) units(2) units(3) units(2);
@ -42,6 +41,14 @@
}
}
// This will work in responsive tables if we overwrite the overflow value on the table container
// Works with styles in _tables
@include at-media(desktop) {
.usa-accordion--more-actions .usa-accordion__content {
left: 0;
}
}
.usa-accordion--select .usa-accordion__content {
top: 33.88px;
}
@ -59,10 +66,12 @@
// This won't work on the Members table rows because that table has show-more rows
// Currently, that's not an issue since that Members table is not wrapped in the
// reponsive wrapper.
tr:last-of-type .usa-accordion--more-actions .usa-accordion__content {
top: auto;
bottom: -10px;
right: 30px;
@include at-media-max("desktop") {
tr:last-of-type .usa-accordion--more-actions .usa-accordion__content {
top: auto;
bottom: -10px;
right: 30px;
}
}
// A CSS only show-more/show-less based on usa-accordion

5
src/registrar/assets/src/sass/_theme/_base.scss
View file

@ -226,11 +226,6 @@ abbr[title] {
}
}
// Boost this USWDS utility class for the accordions in the portfolio requests table
.left-auto {
left: auto!important;
}
.usa-banner__inner--widescreen {
max-width: $widescreen-max-width;
}

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

@ -152,3 +152,12 @@ th {
.usa-table--full-borderless th {
border: none !important;
}
// This is an override to overflow on certain tables (note the custom class)
// so that a popup menu can appear and starddle the edge of the table on large
// screen sizes. Works with styles in _accordions
@include at-media(desktop) {
.usa-table-container--scrollable.usa-table-container--override-overflow {
overflow-y: visible;
}
}

2
src/registrar/templates/includes/domain_requests_table.html
View file

@ -163,7 +163,7 @@
</div>
{% endif %}
<div class="display-none usa-table-container--scrollable margin-top-0" tabindex="0" id="domain-requests__table-wrapper">
<div class="display-none usa-table-container--scrollable usa-table-container--override-overflow margin-top-0" tabindex="0" id="domain-requests__table-wrapper">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your domain requests</caption>
<thead>

2
src/registrar/templates/includes/domains_table.html
View file

@ -198,7 +198,7 @@
</svg>
</button>
</div>
<div class="display-none usa-table-container--scrollable margin-top-0" tabindex="0" id="domains__table-wrapper">
<div class="display-none usa-table-container--scrollable usa-table-container--override-overflow margin-top-0" tabindex="0" id="domains__table-wrapper">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your registered domains</caption>
<thead>