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

Style tuning for domain request status page

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

@@ -51,23 +51,23 @@ $letter-space--xs: .0125em;
 }
 
 p,
-.usa-list li
+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 {
+a.withdraw {
-  box-shadow: inset 0 0 0 2px color('error');
+  background-color: color('error');
-  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 {
+a.withdraw_outline:hover,
-  box-shadow: inset 0 0 0 2px color('error');
-  color: color('error-dark');
-}
-
 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');

src/registrar/templates/application_status.html

@@ -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>
-<p><h1>Domain request for {{ domainapplication.requested_domain.name }}</h1></p>
+    <div
-
+        class="usa-summary-box dotgov-status-box margin-top-3" 
-<div
+        role="region"
-  class="usa-summary-box dotgov-status-box margin-top-3" 
+        aria-labelledby="summary-box-key-information"
-  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">
+      <div class="usa-summary-box__body">
-    Status:
+        <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
-  </span>
+           id="summary-box-key-information"
-  {% if domainapplication.status == 'approved' %} Approved 
+        > 
-  {% elif domainapplication.status == 'investigating' %} In Review 
+          <span class="text-bold text-primary-darker">
-  {% elif domainapplication.status == 'submitted' %} Received
+             Status:
-  {% else %}ERROR Please contact technical support/dev
+          </span>
-  {% endif %}
+          {% if domainapplication.status == 'approved' %} Approved 
-  </div></div><br>
+          {% elif domainapplication.status == 'investigating' %} In Review 
-  <p> <b class="review__step__name">Last updated:</b> {{domainapplication.updated_at|date:"F j, Y"}}<br>
+          {% elif domainapplication.status == 'submitted' %} Received
- <b class="review__step__name">Request #:</b> {{domainapplication.id}}</p>
+          {% 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>{% include "includes/domain_application.html" %}</p>
+  <div class="grid-col desktop:grid-offset-2 maxw-tablet">
+    <h2 class="text-primary-darker"> Summary of your domain request </h2> 
 
-<p><a href="{% url 'application-withdraw-confirmation' domainapplication.id %}" class="withdraw_outline usa-button usa-button--outline">Withdraw Request</a></p>
+    {% include "includes/summary_item.html" with title='Type of organization' value=domainapplication.get_organization_type_display %}
 
-<p><h2>Summary of your domain request</h2></p> 
+    {% if domainapplication.tribe_name %}
+      {% include "includes/summary_item.html" with title='Tribal government' value=domainapplication.tribe_name %}
 
-<section class="review__step">
+      {% if domainapplication.federally_recognized_tribe %}
-<p>
+        <p>Federally-recognized tribe</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>
       {% endif %}
-  {% if domainapplication.type_of_work %}
+      
-    <p>{{domainapplication.type_of_work}}</p>
+      {% if domainapplication.state_recognized_tribe %}
-    {% endif %}
+        <p>State-recognized tribe</p>
-  {% 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>
       {% 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 %}

src/registrar/templates/includes/domain_application.html

@@ -1,8 +1,10 @@
-<p class="font-body-sm margin-top-0 margin-bottom-2 
+<h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold" > 
-              text-primary-darker text-semibold"
+  Next steps
-    ><h2>Next steps</h2></p>
+</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 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold">
-    ><h2>Need to make changes?</h2></p>
+  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>

src/registrar/templates/includes/summary_item.html

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