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

Header refactor wip

Browse source
This commit is contained in:
Rachid Mrad 2025-01-14 14:46:47 -05:00
parent 20e8ad5e1e
commit 3337e5dc9c
No known key found for this signature in database
15 changed files with 50 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/registrar/assets/src/js/getgov/table-edit-member-domains.js
View file

@ -259,7 +259,7 @@ export class EditMemberDomainsTable extends BaseTable {
// Append unassigned domains section
if (this.removedDomains.length) {
const unassignedHeader = document.createElement('h3');
unassignedHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
unassignedHeader.classList.add('margin-bottom-1');
unassignedHeader.textContent = 'Unassigned domains';
domainAssignmentSummary.appendChild(unassignedHeader);
domainAssignmentSummary.appendChild(unassignedDomainsList);
@ -268,7 +268,7 @@ export class EditMemberDomainsTable extends BaseTable {
// Append assigned domains section
if (this.addedDomains.length) {
const assignedHeader = document.createElement('h3');
assignedHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
assignedHeader.classList.add('margin-bottom-1');
assignedHeader.textContent = 'Assigned domains';
domainAssignmentSummary.appendChild(assignedHeader);
domainAssignmentSummary.appendChild(assignedDomainsList);
@ -276,7 +276,7 @@ export class EditMemberDomainsTable extends BaseTable {
// Append total assigned domains section
const totalHeader = document.createElement('h3');
totalHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
totalHeader.classList.add('margin-bottom-1');
totalHeader.textContent = 'Total assigned domains';
domainAssignmentSummary.appendChild(totalHeader);
const totalCount = document.createElement('p');

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

@ -271,9 +271,3 @@ abbr[title] {
.maxw-fit-content {
max-width: fit-content;
}
.summary-item__title {
// match h3 at 18.72px and semibold
font-size: 1.17em;
font-weight: 600;
}

18
src/registrar/assets/src/sass/_theme/_forms.scss
View file

@ -2,6 +2,14 @@
@use "cisa_colors" as *;
@use "typography" as *;
// Normalize typography in forms
.usa-form,
.usa-form fieldset {
font-size: 1rem;
.usa-legend {
font-size: 1rem;
}
}
.usa-form .usa-button {
margin-top: units(3);
}
@ -69,16 +77,6 @@ legend.float-left-tablet + button.float-right-tablet {
}
}
.read-only-label {
@extend .h4--sm-05;
font-weight: bold;
color: color('primary-dark');
}
.read-only-value {
margin-top: units(0);
}
.bg-gray-1 .usa-radio {
background: color('gray-1');
}

4
src/registrar/assets/src/sass/_theme/_register-form.scss
View file

@ -12,11 +12,7 @@
margin-top: units(1);
}
// header--body is used on the summary page and
// should not be styled like the register form headers
.register-form-step h3 {
color: color('primary-dark');
letter-spacing: $letter-space--xs;
margin-top: units(3);
margin-bottom: 0;

33
src/registrar/assets/src/sass/_theme/_typography.scss
View file

@ -15,6 +15,7 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
font-size: 2.125rem;
@include typeset('sans', '2xl', 2);
margin: 0 0 units(2);
}
@ -23,35 +24,23 @@ h2 {
margin: units(4) 0 units(1);
}
h3, h4 {
h3, .h3 {
font-size: 1.25rem;
font-weight: font-weight('semibold');
}
.header--body {
margin-top: units(2);
h4, .h4 {
font-size: 1.15rem;
font-weight: font-weight('semibold');
// The units mixin can only get us close, so it's between
// hardcoding the value and using in markup
font-size: 16.96px;
}
.h4--sm-05 {
font-size: size('body', 'sm');
font-weight: normal;
color: color('primary');
margin-bottom: units(0.5);
}
// Normalize typography in forms
.usa-form,
.usa-form fieldset {
font-size: 1rem;
.usa-legend {
font-size: 1rem;
}
}
.p--blockquote {
padding-left: units(1);
border-left: 2px solid color('base-lighter');
}
.summary-item__title {
// match h3 at 18.72px and semibold
font-size: 1.25em;
font-weight: 600;
}

6
src/registrar/templates/domain_dnssec.html
View file

@ -33,7 +33,7 @@
<form class="usa-form usa-form--text-width" method="post">
{% csrf_token %}
{% if has_dnssec_records %}
<div
class="usa-summary-box "
role="region"
@ -62,7 +62,7 @@
data-open-modal
>Disable DNSSEC</a
>
{% else %}
<div id="enable-dnssec">
<div class="usa-alert usa-alert--info">
<div class="usa-alert__body">
@ -71,7 +71,7 @@
</div>
<a href="{% url 'domain-dns-dnssec-dsdata' pk=domain.id %}" class="usa-button">Enable DNSSEC</a>
</div>
{% endif %}
</form>
<div

4
src/registrar/templates/includes/input_read_only.html
View file

@ -3,7 +3,7 @@ Template include for read-only form fields
{% endcomment %}
<h4 class="read-only-label">{{ field.label }}</h4>
<h4 class="margin-bottom-05">{{ field.label }}</h4>
{% if label_description %}
<p class="usa-hint margin-top-0 margin-bottom-05">{{ label_description }}</p>
{% endif %}
@ -11,4 +11,4 @@ Template include for read-only form fields
This allows us to customize the displayed value.
For instance, Select fields will display the id by default.
{% endcomment %}
<p class="read-only-value">{{ value|default:field.value }}</p>
<p class="margin-top-0">{{ value|default:field.value }}</p>

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

@ -46,7 +46,7 @@
{% endwith %}
{% if domain_request.alternative_domains.all %}
<h3 class="header--body text-primary-dark margin-bottom-0">Alternative domains</h3>
<h3 class="h4 margin-bottom-0">Alternative domains</h3>
<ul class="usa-list usa-list--unstyled margin-top-0">
{% for site in domain_request.alternative_domains.all %}
<li>{{ site.website }}</li>

10
src/registrar/templates/includes/request_review_steps.html
View file

@ -88,7 +88,7 @@
{% endwith %}
{% if domain_request.alternative_domains.all %}
<h3 class="header--body text-primary-dark margin-bottom-0">Alternative domains</h3>
<h3 class="h4 margin-bottom-0">Alternative domains</h3>
<ul class="usa-list usa-list--unstyled margin-top-0">
{% for site in domain_request.alternative_domains.all %}
<li>{{ site.website }}</li>
@ -132,8 +132,8 @@
{% with title=form_titles|get_item:step %}
{% if domain_request.has_additional_details %}
{% include "includes/summary_item.html" with title="Additional Details" value=" " heading_level=heading_level editable=is_editable edit_link=domain_request_url %}
<h3 class="header--body text-primary-dark margin-bottom-0">CISA Regional Representative</h3>
<ul class="usa-list usa-list--unstyled margin-top-0">
<h4 class="margin-bottom-0">CISA Regional Representative</h4>
<ul class="usa-list usa-list--unstyled margin-top-05">
{% if domain_request.cisa_representative_first_name %}
<li>{{domain_request.cisa_representative_first_name}} {{domain_request.cisa_representative_last_name}}</li>
{% if domain_request.cisa_representative_email %}
@ -144,8 +144,8 @@
{% endif %}
</ul>
<h3 class="header--body text-primary-dark margin-bottom-0">Anything else</h3>
<ul class="usa-list usa-list--unstyled margin-top-0">
<h4 class="margin-bottom-0">Anything else</h4>
<ul class="usa-list usa-list--unstyled margin-top-05">
{% if domain_request.anything_else %}
{{domain_request.anything_else}}
{% else %}

4
src/registrar/templates/includes/request_status_manage.html
View file

@ -198,7 +198,7 @@
{# We always show this field even if None #}
{% if DomainRequest %}
<h3 class="header--body text-primary-dark margin-bottom-0">CISA Regional Representative</h3>
<h4 class="margin-bottom-0">CISA Regional Representative</h4>
<ul class="usa-list usa-list--unstyled margin-top-0">
{% if DomainRequest.cisa_representative_first_name %}
{{ DomainRequest.get_formatted_cisa_rep_name }}
@ -206,7 +206,7 @@
No
{% endif %}
</ul>
<h3 class="header--body text-primary-dark margin-bottom-0">Anything else</h3>
<h4 class="margin-bottom-0">Anything else</h4>
<ul class="usa-list usa-list--unstyled margin-top-0">
{% if DomainRequest.anything_else %}
{{DomainRequest.anything_else}}

6
src/registrar/templates/includes/summary_item.html
View file

@ -20,7 +20,7 @@
</h3>
{% endif %}
{% if sub_header_text %}
<h4 class="header--body text-primary-dark margin-bottom-0">{{ sub_header_text }}</h4>
<h4 class="margin-bottom-0">{{ sub_header_text }}</h4>
{% endif %}
{% if permissions %}
{% include "includes/member_permissions.html" with permissions=value %}
@ -38,7 +38,7 @@
{% for item in value %}
<dt>
<h4 class="summary-item__title
<h4 class="
margin-bottom-05
padding-right-1">
Contact {{forloop.counter}}
@ -115,7 +115,7 @@
{% endif %}
{% endif %}
{% if value.invitations.all %}
<h4 class="h4--sm-05">Invited domain managers</h4>
<h4 class="margin-bottom-05">Invited domain managers</h4>
<ul class="usa-list usa-list--unstyled margin-top-0">
{% for item in value.invitations.all %}
<li>{{ item.email }}</li>

2
src/registrar/templates/portfolio_member_permissions.html
View file

@ -103,7 +103,7 @@
<h3 class="
margin-bottom-0
margin-top-3">Organization members</h3>
margin-top-4">Organization members</h3>
{% with group_classes="usa-form-editable usa-form-editable--no-border bg-gray-1 padding-top-0" %}
{% input_with_errors form.member_permission_admin %}
{% endwith %}

2
src/registrar/templates/portfolio_members_add_new.html
View file

@ -76,7 +76,7 @@
<h3 class="
margin-bottom-0
margin-top-3">Organization members</h3>
margin-top-4">Organization members</h3>
{% with group_classes="usa-form-editable usa-form-editable--no-border bg-gray-1 padding-top-0" %}
{% input_with_errors form.member_permission_admin %}
{% endwith %}

8
src/registrar/templates/portfolio_organization.html
View file

@ -37,8 +37,8 @@
{% include "includes/required_fields.html" %}
<form class="usa-form usa-form--large desktop:margin-top-4" method="post" novalidate>
{% csrf_token %}
<h4 class="read-only-label">Organization name</h4>
<p class="read-only-value">
<h4 class="margin-bottom-05">Organization name</h4>
<p class="margin-top-0">
{{ portfolio.federal_agency }}
</p>
{% input_with_errors form.address_line1 %}
@ -53,8 +53,8 @@
</button>
</form>
{% else %}
<h4 class="read-only-label">Organization name</h4>
<p class="read-only-value">
<h4 class="margin-bottom-05">Organization name</h4>
<p class="margin-top-0">
{{ portfolio.federal_agency }}
</p>
{% if form.address_line1.value is not None %}

12
src/registrar/tests/test_views_portfolio.py
View file

@ -211,11 +211,11 @@ class TestPortfolio(WebTest):
# Assert the response is a 200
self.assertEqual(response.status_code, 200)
# The label for Federal agency will always be a h4
self.assertContains(response, '<h4 class="read-only-label">Organization name</h4>')
self.assertContains(response, '<h4 class="margin-bottom-05">Organization name</h4>')
# The read only label for city will be a h4
self.assertContains(response, '<h4 class="read-only-label">City</h4>')
self.assertContains(response, '<h4 class="margin-bottom-05">City</h4>')
self.assertNotContains(response, 'for="id_city"')
self.assertContains(response, '<p class="read-only-value">Los Angeles</p>')
self.assertContains(response, '<p class="margin-top-0">Los Angeles</p>')
@less_console_noise_decorator
def test_portfolio_organization_page_edit_access(self):
@ -236,10 +236,10 @@ class TestPortfolio(WebTest):
# Assert the response is a 200
self.assertEqual(response.status_code, 200)
# The label for Federal agency will always be a h4
self.assertContains(response, '<h4 class="read-only-label">Organization name</h4>')
self.assertContains(response, '<h4 class="margin-bottom-05">Organization name</h4>')
# The read only label for city will be a h4
self.assertNotContains(response, '<h4 class="read-only-label">City</h4>')
self.assertNotContains(response, '<p class="read-only-value">Los Angeles</p>')
self.assertNotContains(response, '<h4 class="margin-bottom-05">City</h4>')
self.assertNotContains(response, '<p class="margin-top-0">Los Angeles</p>')
self.assertContains(response, 'for="id_city"')
@less_console_noise_decorator