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

revise UI of search bars with labels, create component

Browse source
This commit is contained in:
Rachid Mrad 2025-02-05 16:05:49 -05:00
parent d3bac5a06a
commit dc3351e8c0
No known key found for this signature in database
3 changed files with 50 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/registrar/templates/includes/member_domains_edit_table.html
View file

@ -36,47 +36,9 @@
<div class="section-outlined__header margin-bottom-3 grid-row">
<!-- ---------- SEARCH ---------- -->
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
<section aria-label="Member domains search component">
<form class="usa-search usa-search--show-label" method="POST" role="search">
{% csrf_token %}
<label class="usa-label display-block margin-bottom-05" for="edit-member-domains__search-field">
{% if has_edit_members_portfolio_permission %}
Search all domains
{% else %}
Search domains assigned to
{% if member %}
{{ member.email }}
{% else %}
{{ portfolio_invitation.email }}
{% endif %}
{% endif %}
</label>
<div class="usa-search--show-label__input-wrapper">
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="edit-member-domains__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
<input
class="usa-input"
id="edit-member-domains__search-field"
type="search"
name="member-domains-search"
/>
<button class="usa-button" type="submit" id="edit-member-domains__search-field-submit">
<span class="usa-search__submit-text">Search </span>
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</div>
</form>
</section>
</div>
{% with label_text="Search all domains" item_name="edit-member-domains" aria_label_text="Member domains search component" %}
{% include "includes/search.html" %}
{% endwith %}
</div>
<!-- ---------- MAIN TABLE ---------- -->
@ -85,7 +47,7 @@
<caption class="sr-only">member domains</caption>
<thead>
<tr>
<th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105"><span class="sr-only">Assigned domains</span></th>
<th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6"><span class="sr-only">Assigned domains</span></th>
<!-- We override default sort to be name/ascending in the JSON endpoint. We add the correct aria-sort attribute here to reflect that in the UI -->
<th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
</tr>

52
src/registrar/templates/includes/member_domains_table.html
View file

@ -1,5 +1,3 @@
{% load static %}
{% if member %}
<span
id="portfolio-js-value"
@ -34,45 +32,19 @@
{% endif %}
</h2>
<div class="section-outlined__header margin-bottom-3 grid-row" id="edit-member-domains__search">
<div class="section-outlined__header margin-bottom-3 grid-row" id="edit-member-domains__search">
<!-- ---------- SEARCH ---------- -->
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
<section aria-label="Member domains search component">
<form class="usa-search usa-search--show-label" method="POST" role="search">
{% csrf_token %}
<label class="usa-label display-block margin-bottom-05" for="member-domains__search-field">
Search domains assigned to
{% if member %}
{{ member.email }}
{% else %}
{{ portfolio_invitation.email }}
{% endif %}
</label>
<div class="usa-search--show-label__input-wrapper">
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="member-domains__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
<input
class="usa-input"
id="member-domains__search-field"
type="search"
name="member-domains-search"
/>
<button class="usa-button" type="submit" id="member-domains__search-field-submit">
<span class="usa-search__submit-text">Search </span>
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</div>
</form>
</section>
</div>
{% with label_text="Domains assigned to " %}
{% if member %}
{% with label_text=label_text|add:member.email item_name="member-domains" aria_label_text="Member domains search component" %}
{% include "includes/search.html" %}
{% endwith %}
{% else %}
{% with label_text=label_text|add:portfolio_invitation.email item_name="member-domains" aria_label_text="Member domains search component" %}
{% include "includes/search.html" %}
{% endwith %}
{% endif %}
{% endwith %}
</div>
<!-- ---------- MAIN TABLE ---------- -->

34
src/registrar/templates/includes/search.html Normal file
View file

@ -0,0 +1,34 @@
{% load static %}
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
<section aria-label="{{aria_label_text}}">
<form class="usa-search usa-search--show-label" method="POST" role="search">
{% csrf_token %}
<label class="usa-label display-block margin-bottom-05 maxw-none" for="{{item_name}}__search-field">
{{ label_text }}
</label>
<div class="usa-search--show-label__input-wrapper flex-align-self-end">
<input
class="usa-input minw-15"
id="{{item_name}}__search-field"
type="search"
name="{{item_name}}-search"
/>
<button class="usa-button" type="submit" id="{{item_name}}__search-field-submit">
<span class="usa-search__submit-text">Search </span>
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
<button class="usa-button usa-button--unstyled margin-left-3 display-none" id="{{item_name}}__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
</div>
</form>
</section>
</div>