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

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

View file

@ -51,8 +51,8 @@ $letter-space--xs: .0125em;
}
p,
.usa-list li
{
address,
.usa-list li {
@include typeset('sans', 'sm', 5);
max-width: measure(5);
}
@ -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');

View file

@ -1,14 +1,12 @@
{% 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 %}
<main id="main-content" class="grid-container register-form-step">
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
<p><h1>Domain request for {{ domainapplication.requested_domain.name }}</h1></p>
<h1>Domain request for {{ domainapplication.requested_domain.name }}</h1>
<div
class="usa-summary-box dotgov-status-box margin-top-3"
role="region"
@ -26,89 +24,76 @@
{% elif domainapplication.status == 'submitted' %} Received
{% else %}ERROR Please contact technical support/dev
{% endif %}
</div></div><br>
</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="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><a href="{% url 'application-withdraw-confirmation' domainapplication.id %}" class="usa-button usa-button--outline withdraw_outline">
Withdraw Request</a>
</p>
</div>
<div class="grid-col desktop:grid-offset-2 maxw-tablet">
<h2 class="text-primary-darker"> Summary of your domain request </h2>
{% include "includes/summary_item.html" with title='Type of organization' value=domainapplication.get_organization_type_display %}
{% if domainapplication.tribe_name %}
<p>{{ domainapplication.tribe_name }}</p>
{% endif %}
{% include "includes/summary_item.html" with title='Tribal government' value=domainapplication.tribe_name %}
{% if domainapplication.federally_recognized_tribe %}
<p>Federally-recognized tribe</p>
{% endif %}
{% if domainapplication.state_recognized_tribe %}
<p>State-recognized tribe</p>
{% endif %}
{% endif %}
{% if domainapplication.get_federal_type_display %}
<p><hr><div class="review__step__name">Federal government branch</div>
{{ domainapplication.get_federal_type_display }}</p>
{% include "includes/summary_item.html" with title='Federal government branch' value=domainapplication.get_federal_type_display %}
{% endif %}
{% if domainapplication.is_election_board %}
<p><hr><div class="review__step__name">Election Office</div>{{ domainapplication.is_election_board}}</p>
{% include "includes/summary_item.html" with title='Election office' value=domainapplication.is_election_board %}
{% endif %}
{% if domainapplication.organization_name %}
<p><hr><div class="review__step__name">Organization address</div>
{% include "includes/organization_address.html" with organization=domainapplication %}</p>
{% include "includes/summary_item.html" with title='Organization address' value=domainapplication address='true' %}
{% endif %}
{% if domainapplication.type_of_work %}
<p>{{domainapplication.type_of_work}}</p>
{% include "includes/summary_item.html" with title='Type of work' value=domainapplication.type_of_work %}
{% endif %}
{% if domainapplication.more_organization_information %}
<p>{{domainapplication.more_organization_information}}</p>
{% include "includes/summary_item.html" with title='Further information about the government organization' value=domainapplication.more_organization_information %}
{% 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>
{% include "includes/summary_item.html" with title='Authorizing official' value=domainapplication.authorizing_official contact='true' %}
{% 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>
{% 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 %}
<p><hr><div class="review__step__name">Purpose of your domain </div>
{{ domainapplication.purpose }}</p>
{% include "includes/summary_item.html" with title='Purpose of your domain' value=domainapplication.purpose %}
{% 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>
{% include "includes/summary_item.html" with title='Your contact information' value=domainapplication.submitter contact='true'%}
{% 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>
{% 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 %}

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. Well 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>
<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>

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 %}