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

Merge pull request #539 from cisagov/ik/submit-style-tune

Browse source 
Style tuning for domain request status page
This commit is contained in:
Igor Korenfeld 2023-04-21 16:41:29 -04:00 • committed by GitHub
commit 2c0dac98b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 157 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss
View file

@ -51,23 +51,23 @@ $letter-space--xs: .0125em;
}
p,
.usa-list li
{
@include typeset('sans', 'sm', 5);
address,
.usa-list li {
@include typeset('sans', 'sm', 5);
max-width: measure(5);
}
h1 {
h1 {
@include typeset('sans', '2xl', 2);
margin: 0 0 units(2);
color: color('primary-darker');
}
}
h2 {
h2 {
font-weight: font-weight('semibold');
line-height: line-height('heading', 3);
margin: units(4) 0 units(1);
}
}
.register-form-step > h1 {
//align to top of sidebar on first page of the form
@ -133,47 +133,35 @@ a.breadcrumb__back {
}
}
a.withdraw_outline {
box-shadow: inset 0 0 0 2px color('error');
color: color('error');
a.withdraw {
background-color: color('error');
}
a.withdraw_outline,
a.withdraw_outline:visited {
box-shadow: inset 0 0 0 2px color('error');
color: color('error');
}
a.withdraw_outline:hover {
box-shadow: inset 0 0 0 2px color('error');
color: color('error-dark');
}
a.withdraw_outline:hover,
a.withdraw_outline:focus {
box-shadow: inset 0 0 0 2px color('error');
box-shadow: inset 0 0 0 2px color('error-dark');
color: color('error-dark');
}
a.withdraw_outline:active {
box-shadow: inset 0 0 0 2px color('error');
box-shadow: inset 0 0 0 2px color('error-darker');
color: color('error-darker');
}
a.withdraw:hover,
a.withdraw:focus {
background-color: color('error-dark');
}
a.withdraw:hover {
background-color: color('error-dark');
}
a.withdraw:active {
background-color: color('error-darker');
}
a.withdraw {
background-color: color('error');
}
.usa-sidenav {
.usa-sidenav__item {
span {
@ -222,6 +210,7 @@ a.withdraw {
margin-top: units(3);
}
.summary-item hr,
.review__step hr {
border: none; //reset
border-top: 1px solid color('primary-dark');

183
src/registrar/templates/application_status.html
View file

@ -1,114 +1,99 @@
{% extends 'base.html' %}
{% block title %}Domain request status- {{ domainapplication.requested_domain.name }}{% endblock %}
{% block title %}Domain request status | {{ domainapplication.requested_domain.name }} | {% endblock %}
{% load static url_helpers %}
{% block content %}
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
<main id="main-content" class="grid-container register-form-step">
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
<h1>Domain request for {{ domainapplication.requested_domain.name }}</h1>
<div
class="usa-summary-box dotgov-status-box margin-top-3"
role="region"
aria-labelledby="summary-box-key-information"
>
<div class="usa-summary-box__body">
<p class="usa-summary-box__heading font-sans-md margin-bottom-0"
id="summary-box-key-information"
>
<span class="text-bold text-primary-darker">
Status:
</span>
{% if domainapplication.status == 'approved' %} Approved
{% elif domainapplication.status == 'investigating' %} In Review
{% elif domainapplication.status == 'submitted' %} Received
{% else %}ERROR Please contact technical support/dev
{% endif %}
</p>
</div>
</div>
<br>
<p> <b class="review__step__name">Last updated:</b> {{domainapplication.updated_at|date:"F j, Y"}}<br>
<b class="review__step__name">Request #:</b> {{domainapplication.id}}</p>
<p>{% include "includes/domain_application.html" %}</p>
<p><a href="{% url 'application-withdraw-confirmation' domainapplication.id %}" class="usa-button usa-button--outline withdraw_outline">
Withdraw Request</a>
</p>
</div>
<p><h1>Domain request for {{ domainapplication.requested_domain.name }}</h1></p>
<div class="grid-col desktop:grid-offset-2 maxw-tablet">
<h2 class="text-primary-darker"> Summary of your domain request </h2>
<div
class="usa-summary-box dotgov-status-box margin-top-3"
role="region"
aria-labelledby="summary-box-key-information"
>
<div class="usa-summary-box__body">
<p class="usa-summary-box__heading font-sans-md margin-bottom-0"
id="summary-box-key-information"
>
<span class="text-bold text-primary-darker">
Status:
</span>
{% if domainapplication.status == 'approved' %} Approved
{% elif domainapplication.status == 'investigating' %} In Review
{% elif domainapplication.status == 'submitted' %} Received
{% else %}ERROR Please contact technical support/dev
{% endif %}
</div></div><br>
<p> <b class="review__step__name">Last updated:</b> {{domainapplication.updated_at|date:"F j, Y"}}<br>
<b class="review__step__name">Request #:</b> {{domainapplication.id}}</p>
{% include "includes/summary_item.html" with title='Type of organization' value=domainapplication.get_organization_type_display %}
<p>{% include "includes/domain_application.html" %}</p>
{% if domainapplication.tribe_name %}
{% include "includes/summary_item.html" with title='Tribal government' value=domainapplication.tribe_name %}
<p><a href="{% url 'application-withdraw-confirmation' domainapplication.id %}" class="withdraw_outline usa-button usa-button--outline">Withdraw Request</a></p>
<p><h2>Summary of your domain request</h2></p>
<section class="review__step">
<p>
<hr><div class="review__step__name">Type of organization</div>
{{ domainapplication.get_organization_type_display }}
</p>
{% if domainapplication.tribe_name %}
<p>{{ domainapplication.tribe_name }}</p>
{% endif %}
{% if domainapplication.federally_recognized_tribe %}
<p>Federally-recognized tribe</p>
{% endif %}
{% if domainapplication.state_recognized_tribe %}
<p>State-recognized tribe</p>
{% endif %}
{% if domainapplication.get_federal_type_display %}
<p><hr><div class="review__step__name">Federal government branch</div>
{{ domainapplication.get_federal_type_display }}</p>
{% endif %}
{% if domainapplication.is_election_board %}
<p><hr><div class="review__step__name">Election Office</div>{{ domainapplication.is_election_board}}</p>
{% endif %}
{% if domainapplication.organization_name %}
<p><hr><div class="review__step__name">Organization address</div>
{% include "includes/organization_address.html" with organization=domainapplication %}</p>
{% if domainapplication.federally_recognized_tribe %}
<p>Federally-recognized tribe</p>
{% endif %}
{% if domainapplication.type_of_work %}
<p>{{domainapplication.type_of_work}}</p>
{% endif %}
{% if domainapplication.more_organization_information %}
<p>{{domainapplication.more_organization_information}}</p>
{% endif %}
{% if domainapplication.authorizing_official %}
<p><hr><div class="review__step__name">Authorizing Official</div>
{% include "includes/contact.html" with contact=domainapplication.authorizing_official %}</p>
{% endif %}
<p><hr><div class="review__step__name">Organization website</div><ul class="add-list-reset">
{% for site in domainapplication.current_websites.all %}
<li>{{ site.website }}</li>
{% empty %}
<li>None</li>
{% endfor %}</ul></p>
{% if domainapplication.requested_domain.name %}
<p><hr><div class="review__step__name"> .gov domain </div> <ul class="add-list-reset margin-bottom-105">
<li>{{ domainapplication.requested_domain.name|default:"Incomplete" }}</li>
</ul>
<ul class="add-list-reset">
{% for site in domainapplication.alternative_domains.all %}
<li>{{ site.website }}</li>
{% endfor %}
</ul></p>
{% endif %}
{% if domainapplication.purpose %}
<p><hr><div class="review__step__name">Purpose of your domain </div>
{{ domainapplication.purpose }}</p>
{% if domainapplication.state_recognized_tribe %}
<p>State-recognized tribe</p>
{% endif %}
{% if domainapplication.submitter %}
<p><hr><div class="review__step__name">Your contact information</div>
<div class="margin-bottom-105">
{% include "includes/contact.html" with contact=domainapplication.submitter %}
</div>
{% endif %}
{% for other in domainapplication.other_contacts.all %}
<div class="margin-bottom-105">
{% include "includes/contact.html" with contact=other %}
</div>
{% empty %}
None
{% endfor %}</p>
<p><hr><div class="review__step__name">Anything else we should know?</div></p>
{{ domainapplication.anything_else|default:"No" }}
</div>
</section>
{% if domainapplication.get_federal_type_display %}
{% include "includes/summary_item.html" with title='Federal government branch' value=domainapplication.get_federal_type_display %}
{% endif %}
{% if domainapplication.is_election_board %}
{% include "includes/summary_item.html" with title='Election office' value=domainapplication.is_election_board %}
{% endif %}
{% if domainapplication.organization_name %}
{% include "includes/summary_item.html" with title='Organization address' value=domainapplication address='true' %}
{% endif %}
{% if domainapplication.type_of_work %}
{% include "includes/summary_item.html" with title='Type of work' value=domainapplication.type_of_work %}
{% endif %}
{% if domainapplication.more_organization_information %}
{% include "includes/summary_item.html" with title='Further information about the government organization' value=domainapplication.more_organization_information %}
{% endif %}
{% if domainapplication.authorizing_official %}
{% include "includes/summary_item.html" with title='Authorizing official' value=domainapplication.authorizing_official contact='true' %}
{% endif %}
{% if domainapplication.current_websites.all %}
{% include "includes/summary_item.html" with title='Current website for your organization' value=domainapplication.current_websites.all list='true' %}
{% endif %}
{% if domainapplication.purpose %}
{% include "includes/summary_item.html" with title='Purpose of your domain' value=domainapplication.purpose %}
{% endif %}
{% if domainapplication.submitter %}
{% include "includes/summary_item.html" with title='Your contact information' value=domainapplication.submitter contact='true'%}
{% endif %}
{% include "includes/summary_item.html" with title='Other employees from your organization' value=domainapplication.other_contacts.all contact='true' list='true' %}
{% include "includes/summary_item.html" with title='Anything else we should know' value=domainapplication.anything_else|default:"No" %}
</div>
</main>
{% endblock %}

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

@ -1,8 +1,10 @@
<p class="font-body-sm margin-top-0 margin-bottom-2
text-primary-darker text-semibold"
><h2>Next steps</h2></p>
<h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold" >
Next steps
</h2>
<p>We received your .gov domain request. Our next step is to review your request. This usually takes two weeks. We’ll email you with questions or when we complete our review. Contact us with any questions.</p>
<p class="font-body-sm margin-top-0 margin-bottom-2
text-primary-darker text-semibold"
><h2>Need to make changes?</h2></p>
<p>If you need to change your request you have to first withdraw it. Once you withdraw the request you can edit it and submit it again. Changing your request might add to the wait time.</p>
<h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold">
Need to make changes?
</h2>
<p>If you need to change your request you have to first withdraw it. Once you withdraw the request you can edit it and submit it again. Changing your request might add to the wait time.</p>

49
src/registrar/templates/includes/summary_item.html Normal file
View file

@ -0,0 +1,49 @@
<section class="summary-item margin-top-3">
<hr class="" />
<p class="summary-item__title
text-primary-dark text-semibold
margin-top-0 margin-bottom-05"
>
{{ title }}
</p>
{% if address %}
{% include "includes/organization_address.html" with organization=value %}
{% elif contact %}
{% if list %}
{% if value|length == 1 %}
{% include "includes/contact.html" with contact=value|first %}
{% else %}
<ul class="usa-list usa-list--unstyled margin-top-0">
{% for item in value %}
<li>
<p class="text-semibold margin-top-1 margin-bottom-0">
Conatct {{forloop.counter}}
</p>
{% include "includes/contact.html" with contact=item %}</li>
{% empty %}
<li>None</li>
{% endfor %}</ul></p>
</ul>
{% endif %}
{% else %}
{% include "includes/contact.html" with contact=value %}
{% endif %}
{% elif list %}
{% if value|length == 1 %}
<p class="margin-top-0">{{ value | first }} </p>
{% else %}
<ul class="usa-list margin-top-0">
{% for item in value %}
<li>{{ item }}</li>
{% empty %}
<li>None</li>
{% endfor %}</ul></p>
</ul>
{% endif %}
{% else %}
<p class="margin-top-0">
{{ value }}
</p>
{% endif %}