zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-05 17:28:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

header alignment on tables with search

Browse source
This commit is contained in:
Rachid Mrad 2024-07-19 16:24:14 -04:00
parent 80f1cdb032
commit 91571d4a3a
No known key found for this signature in database
2 changed files with 27 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -110,6 +110,26 @@ body {
}
}
.section--outlined__header--no-portfolio {
.section--outlined__search,
.section--outlined__utility-button {
margin-top: units(2);
}
@include at-media(tablet) {
display: flex;
column-gap: units(3);
.section--outlined__search,
.section--outlined__utility-button {
margin-top: 0;
}
.section--outlined__search {
flex-grow: 4;
}
}
}
.break-word {
word-break: break-word;
}

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

@ -1,14 +1,12 @@
{% load static %}
<section class="section--outlined domains{% if portfolio is not None %} margin-top-0{% endif %}" id="domains">
<div class="grid-row">
<div class="section--outlined__header margin-bottom-3 {% if portfolio is None %} section--outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
{% if portfolio is None %}
<div class="mobile:grid-col-12 desktop:grid-col-6">
<h2 id="domains-header" class="flex-6">Domains</h2>
</div>
<h2 id="domains-header" class="display-inline-block">Domains</h2>
{% endif %}
<div class="mobile:grid-col-12 desktop:grid-col-6">
<section aria-label="Domains search component" class="flex-6 margin-y-2">
<div class="section--outlined__search{% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %}">
<section aria-label="Domains search component" class="tablet: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-2 domains__reset-search display-none" type="button">
@ -32,9 +30,8 @@
</form>
</section>
</div>
{% if portfolio %}
<div class="mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3">
<section aria-label="Domains report component" class="flex-6 desktop:margin-top-205">
<div class="section--outlined__utility-button{% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
<section aria-label="Domains report component" class="tablet:margin-top-205">
<a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled">
<svg class="usa-icon usa-icon--big" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
@ -42,10 +39,9 @@
</a>
</section>
</div>
{% endif %}
</div>
{% if portfolio %}
<div class="display-flex flex-align-center margin-top-1">
<div class="display-flex flex-align-center">
<span class="margin-right-2 margin-top-neg-1 text-base-darker">Filter by</span>
<div class="usa-accordion usa-accordion--select margin-right-2">
<div class="usa-accordion__heading">
@ -178,18 +174,6 @@
<div class="domains__no-search-results display-none">
<p>No results found</p>
</div>
{% if not portfolio %}
<div class="grid-row">
<div class="grid-col">
<a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled">
<svg class="usa-icon usa-icon--big" 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
</a>
</div>
</div>
{% endif %}
</section>
<nav aria-label="Pagination" class="usa-pagination flex-justify" id="domains-pagination">
<span class="usa-pagination__counter text-base-dark padding-left-2 margin-bottom-1">