zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-22 10:46:06 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3560 from cisagov/nl/2855-add-searchbar-visible-labels

Browse source 
#2855 - Update search bar with visible label for org and non-org [-NL]
This commit is contained in:
CuriousX 2025-03-10 10:13:21 -06:00 • committed by GitHub
commit 5c2c2e1fe3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 72 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -99,9 +99,7 @@ body {
}
.section-outlined__search {
flex-grow: 4;
// Align right
max-width: 383px;
margin-left: auto;
}
}
}

16
src/registrar/templates/home.html
View file

@ -15,14 +15,14 @@
{% include "includes/form_messages.html" %}
{% endblock %}
<h1>Manage your domains</h1>
<p class="margin-top-4">
<button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link"
>
Start a new domain request
</button>
</p>
<div class="grid-row margin-bottom-3">
<h1 class="flex-fill">Manage your domains</h1>
<div>
<button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link">
Start a new domain request
</button>
</div>
</div>
{% include "includes/domains_table.html" with user_domain_count=user_domain_count %}
{% include "includes/domain_requests_table.html" %}

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

@ -4,49 +4,20 @@
{% url 'get_domain_requests_json' as url %}
<span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
<section class="section-outlined domain-requests {% if portfolio %}section-outlined--border-base-light{% endif %}" id="domain-requests">
<div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
<section class="section-outlined domain-requests {% if portfolio %}margin-top-0 section-outlined--border-base-light{% endif %}" id="domain-requests">
<div class="section-outlined__header margin-bottom-3 grid-row">
{% if not portfolio %}
<h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2>
<div class="grid-row grid-col-12">
<h2 id="domain-requests-header" class="display-inline-block flex-fill">Domain requests</h2>
</div>
{% else %}
<!-- Embedding the portfolio value in a data attribute -->
<span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
{% endif %}
<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
<section aria-label="Domain requests search component" id="domain-requests-search-component" class="margin-top-2">
<form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domain-requests__reset-search" type="button" aria-labelledby="domain-requests-search-component">
<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="domain-requests__search-field"
type="search"
name="domain-requests-search"
{% if portfolio %}
placeholder="Search by domain name or creator"
{% else %}
placeholder="Search by domain name"
{% endif %}
aria-labelledby="domain-requests-search-component"
/>
<div class="usa-sr-only" id="domain-requests-search-button__description">Click to search</div>
<button class="usa-button" type="submit" id="domain-requests__search-field-submit" aria-labelledby="domain-requests-search-component" aria-describedby="domain-requests-search-button__description">
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</form>
</section>
</div>
<!-- ---------- SEARCH ---------- -->
{% with label_text=portfolio|yesno:"Search by domain name or creator,Search by domain name" item_name="domain-requests" aria_label_text="Domain requests search component"%}
{% include "includes/search.html" %}
{% endwith %}
</div>
{% if portfolio %}

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

@ -26,56 +26,32 @@
{% endif %}
<section class="section-outlined domains margin-top-0{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domains">
<div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
<div class="section-outlined__header margin-bottom-3 grid-row">
{% if not portfolio %}
<h2 id="domains-header" class="display-inline-block">Domains</h2>
<div class="grid-row grid-col-12">
<h2 id="domains-header" class="display-inline-block flex-fill">Domains</h2>
<!-- ---------- EXPORT (non-org placement) ---------- -->
{% if user_domain_count and user_domain_count > 0 %}
{% with export_aria="Domains report component" export_url='export_data_type_user' %}
{% include "includes/export.html" %}
{% endwith %}
{% endif %}
</div>
{% else %}
<!-- Embedding the portfolio value in a data attribute -->
<span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
{% endif %}
<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
<section aria-label="Domains search component" class="margin-top-2" id="domains-search-component">
<form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domains__reset-search" type="button" aria-labelledby="domains-search-component">
<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="domains__search-field"
type="search"
name="domains-search"
placeholder="Search by domain name"
aria-labelledby="domains-search-component"
/>
<div class="usa-sr-only" id="domains-search-button__description">Click to search</div>
<button class="usa-button" type="submit" id="domains__search-field-submit" aria-labelledby="domains-search-component" aria-describedby="domains-search-button__description">
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</form>
</section>
</div>
{% if user_domain_count and user_domain_count > 0 %}
<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
<section aria-label="Domains report component" class="margin-top-205" id="domains-report-component">
<div class="usa-sr-only" id="domains-export-button__description">Click to export as csv</div>
<button data-href="{% url 'export_data_type_user' %}" class="use-button-as-link usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" aria-labelledby="domains-report-component" aria-describedby="domains-export-button__description">
<svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg>Export as CSV
</button>
</section>
</div>
<!-- ---------- SEARCH ---------- -->
{% with label_text="Search by domain name" item_name="domains" aria_label_text="Domains search component"%}
{% include "includes/search.html" %}
{% endwith %}
<!-- ---------- EXPORT (org placement) ---------- -->
{% if user_domain_count and user_domain_count > 0 and portfolio%}
{% with export_aria="Domains report component" export_url='export_data_type_user' %}
{% include "includes/export.html" %}
{% endwith %}
{% endif %}
</div>
<!-- Non org model banner -->
{% if num_expiring_domains > 0 and not portfolio %}
<section class="usa-site-alert--slim usa-site-alert--info margin-bottom-2 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">

12
src/registrar/templates/includes/export.html Normal file
View file

@ -0,0 +1,12 @@
{% load static %}
<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} flex-auto desktop:padding-left-3{% endif %} margin-top-0">
<section aria-label="{{export_aria}}" class="margin-top-205">
<button data-href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right use-button-as-link">
<svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg>Export as CSV
</button>
</section>
</div>

49
src/registrar/templates/includes/members_table.html
View file

@ -7,47 +7,14 @@
<span id="get_members_json_url" class="display-none">{{url}}</span>
<section class="section-outlined members margin-top-0 section-outlined--border-base-light" id="members">
<div class="section-outlined__header margin-bottom-3 grid-row">
<!-- ---------- SEARCH ---------- -->
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-6 section-outlined__search--widescreen">
<section aria-label="Members search component" class="margin-top-2" id="members-search-component">
<form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %}
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="members__reset-search" type="button" aria-labelledby="members-search-component">
<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="members__search-field"
type="search"
name="members-search"
placeholder="Search by member name"
aria-labelledby="members-search-component"
/>
<div class="usa-sr-only" id="members-search-button__description">Click to search</div>
<button class="usa-button" type="submit" id="members__search-field-submit" aria-labelledby="members-search-component" aria-describedby="members-search-button__description">
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</form>
</section>
</div>
<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
<section aria-label="Members report component" class="margin-top-205" id="members-report-component">
<div class="usa-sr-only" id="members-export-button__description">Click to export as csv</div>
<button href="{% url 'export_members_portfolio' %}" class="use-button-as-link usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" aria-labelledby="members-report-component" aria-describedby="members-export-button__description">
<svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
</svg>Export as CSV
</button>
</section>
</div>
</div>
<!-- ---------- SEARCH ---------- -->
{% with label_text="Search by member name" item_name="members" aria_label_text="Members search component"%}
{% include "includes/search.html" %}
{% endwith %}
{% with export_aria="Members report component" export_url='export_members_portfolio' %}
{% include "includes/export.html" %}
{% endwith %}
</div>
<!-- ---------- MAIN TABLE ---------- -->
<div class="display-none margin-top-0" id="members__table-wrapper">

16
src/registrar/templates/includes/search.html
View file

@ -1,26 +1,28 @@
{% load static %}
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
<div class="section-outlined__search tablet:grid-col">
<section aria-label="{{aria_label_text}}">
<form class="usa-search usa-search--show-label" method="POST" role="search">
<form class="usa-search {% if use_search_icon %} usa-search--small {% else %} usa-search--default {% endif %}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 id="{{item_name}}__search-label" class="usa-label display-block maxw-none margin-top-2 margin-bottom-1" for="{{item_name}}__search-field">
{{ label_text }}
</label>
<div class="usa-search--show-label__input-wrapper flex-align-self-end">
</label>
<div class="usa-search--show-label__input-wrapper">
<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>
<button class="usa-button" type="submit" id="{{item_name}}__search-field-submit" aria-labelledby="{{item_name}}__search-label">
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
{% if not use_search_icon %}
<span class="usa-search__submit-text">Search </span>
{% endif %}
</button>
<button class="usa-button usa-button--unstyled margin-left-3 display-none flex-1" id="{{item_name}}__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">

16
src/registrar/templates/portfolio_requests.html
View file

@ -16,15 +16,14 @@
{% endblock messages%}
<div id="main-content">
<h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
<div class="grid-row grid-gap">
<div class="grid-row grid-gap margin-bottom-3">
<div class="mobile:grid-col-12 tablet:grid-col-6">
<h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
<p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
</div>
{% if has_edit_request_portfolio_permission %}
<div class="mobile:grid-col-12 tablet:grid-col-6">
<p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
</div>
<div class="mobile:grid-col-12 tablet:grid-col-6">
<p class="float-right-tablet tablet:margin-y-0">
<button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link"
>
@ -32,10 +31,9 @@
</button>
</p>
</div>
{% else %}
<p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
{% endif %}
</div>
{% include "includes/domain_requests_table.html" with portfolio=portfolio %}