zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-06 09:45:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

base dropdown UI

Browse source
This commit is contained in:
Rachid Mrad 2024-06-20 15:16:23 -04:00
parent 2315013ac7
commit 38610d2044
No known key found for this signature in database
4 changed files with 144 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/registrar/assets/sass/_theme/_accordions.scss Normal file
View file

@ -0,0 +1,36 @@
@use "uswds-core" as *;
.usa-accordion--select {
display: inline-block;
width: auto;
position: relative;
.usa-accordion__button {
background: color('white');
border: solid 1px color('base-lighter');
border-radius: 4px;
padding: units(1) units(2);
color: color('primary-darker');
font-weight: font-weight('normal');
font-size: size('ui', 'xs');
}
.usa-accordion__button[aria-expanded=false],
.usa-accordion__button[aria-expanded=false]:hover {
background-image: none;
}
.usa-accordion__content {
// Note, width is determined by a custom width class on one of the children
position: absolute;
z-index: 1;
top: 36.48px;
left: 0;
}
h2 {
font-size: size('body', 'sm');
}
.usa-button {
width: 100%;
}
.margin-top-0 {
margin-top: 0 !important;
}
}

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

@ -211,3 +211,7 @@ abbr[title] {
.usa-logo button.usa-button--unstyled.disabled-button:hover{
color: #{$dhs-dark-gray-85};
}
.width-145 {
width: 145px;
}

1
src/registrar/assets/sass/_theme/styles.scss
View file

@ -12,6 +12,7 @@
@forward "typography";
@forward "links";
@forward "lists";
@forward "accordions";
@forward "buttons";
@forward "pagination";
@forward "forms";

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

@ -33,6 +33,109 @@
</section>
</div>
</div>
{% if portfolio %}
<div class="usa-accordion usa-accordion--select">
<div class="usa-accordion__heading">
<button
type="button"
class="usa-accordion__button"
aria-expanded="false"
aria-controls="a1"
>
Status
<span class="position-relative top-1px">
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#expand_more"></use>
</svg>
</span>
</button>
</div>
<div id="a1" class="usa-accordion__content usa-prose shadow-1">
<h2>Status</h2>
<fieldset class="usa-fieldset margin-top-0">
<legend class="usa-legend width-145">Select to apply <span class="sr-only">status</span> filter</legend>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="check-historical-truth"
type="checkbox"
name="historical-figures"
value="sojourner-truth"
checked="checked"
/>
<label class="usa-checkbox__label" for="check-historical-truth"
>DNS Needed</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="check-historical-douglass"
type="checkbox"
name="historical-figures"
value="frederick-douglass"
/>
<label class="usa-checkbox__label" for="check-historical-douglass"
>Ready</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="check-historical-washington"
type="checkbox"
name="historical-figures"
value="booker-t-washington"
/>
<label class="usa-checkbox__label" for="check-historical-washington"
>On hold</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="check-historical-carver"
type="checkbox"
name="historical-figures"
value="george-washington-carver"
/>
<label class="usa-checkbox__label" for="check-historical-carver"
>Expired</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="check-historical-carver"
type="checkbox"
name="historical-figures"
value="george-washington-carver"
/>
<label class="usa-checkbox__label" for="check-historical-carver"
>Deleted</label
>
</div>
</fieldset>
<!-- The button width will determine the dropdown width -->
<button
type="button"
class="usa-button"
>
Apply filter
</button>
<button
type="button"
class="usa-button usa-button--unstyled padding-2"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#close"></use>
</svg>
Clear <span class="sr-only">selection. This will not reset the filters on the page.</span>
</button>
</div>
</div>
{% endif %}
<div class="domains__table-wrapper display-none">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked domains__table">
<caption class="sr-only">Your registered domains</caption>