Merge pull request #65 from dod-ccpo/request_form_styles

Update request form styles

atst/forms/financial.py

@@ -63,29 +63,29 @@ class FinancialForm(Form):
     )
 
     clin_0001 = StringField(
-        "CLIN 0001 - Unclassified IaaS and PaaS Amount", validators=[Required()]
+        "<dl><dt>CLIN 0001</dt> - <dd>Unclassified IaaS and PaaS Amount</dd></dl>", validators=[Required()]
     )
 
     clin_0003 = StringField(
-        "CLIN 0003 - Unclassified Cloud Support Package", validators=[Required()]
+        "<dl><dt>CLIN 0003</dt> - <dd>Unclassified Cloud Support Package</dd></dl>", validators=[Required()]
     )
 
     clin_1001 = StringField(
-        "CLIN 1001 - Unclassified IaaS and PaaS Amount OPTION PERIOD 1",
+        "<dl><dt>CLIN 1001</dt> - <dd>Unclassified IaaS and PaaS Amount <br> OPTION PERIOD 1</dd></dl>",
         validators=[Required()],
     )
 
     clin_1003 = StringField(
-        "CLIN 1003 - Unclassified Cloud Support Package OPTION PERIOD 1",
+        "<dl><dt>CLIN 1003</dt> - <dd>Unclassified Cloud Support Package <br> OPTION PERIOD 1</dd></dl>",
         validators=[Required()],
     )
 
     clin_2001 = StringField(
-        "CLIN 2001 - Unclassified IaaS and PaaS Amount OPTION PERIOD 2",
+        "<dl><dt>CLIN 2001</dt> - <dd>Unclassified IaaS and PaaS Amount <br> OPTION PERIOD 2</dd></dl>",
         validators=[Required()],
     )
 
     clin_2003 = StringField(
-        "CLIN 2003 - Unclassified Cloud Support Package OPTION PERIOD 2",
+        "<dl><dt>CLIN 2003</dt> - <dd>Unclassified Cloud Support Package <br> OPTION PERIOD 2</dd></dl>",
         validators=[Required()],
     )

atst/forms/request.py

@@ -16,7 +16,7 @@ class RequestForm(Form):
     )
 
     num_applications = IntegerField(
-        "Please estimate the number of applications that might be supported by this request",
+        "Estimate the number of applications that might be supported by this request",
         validators=[InputRequired(), NumberRange(min=1)],
     )
 
@@ -32,7 +32,7 @@ class RequestForm(Form):
     )
 
     app_description = TextAreaField(
-        "Please briefly describe how your team is expecting to use the JEDI Cloud"
+        "Describe how your team is expecting to use the JEDI Cloud"
     )
 
     supported_organizations = StringField(
@@ -70,11 +70,6 @@ class RequestForm(Form):
         validators=[InputRequired()],
     )
 
-    supporting_organization = TextAreaField(
-        "Please describe the organizations that are supporting you, include both government and contractor resources",
-        validators=[InputRequired()],
-    )
-
     has_migration_office = RadioField(
         "Do you have a migration office that you're working with to migrate to the cloud?",
         choices=[("yes", "Yes"), ("no", "No")],
@@ -82,6 +77,6 @@ class RequestForm(Form):
     )
 
     supporting_organization = StringField(
-        "Please describe the organizations that are supporting you, include both government and contractor resources.",
+        "Describe the organizations that are supporting you, include both government and contractor resources",
         validators=[InputRequired()],
     )

scss/elements/_panels.scss

@@ -67,5 +67,13 @@
     @include grid-pad;
   }
 
+  h1 {
+    margin-bottom: 0;
+  }
+
+  h2 {
+    color: $color-gray;
+  }
+
 
 }

scss/elements/_typography.scss

@@ -32,3 +32,8 @@ a > span {
     box-shadow 0.2s,
     color 0.2s,
 }
+
+dt {
+  display: inline;
+  font-weight: bold;
+}

templates/home.html.to

@@ -1,5 +1,9 @@
 {% extends "base.html.to" %}
 
+{% block sidenav %}
+{% include 'nav-side.html.to' %}
+{% end %}
+
 {% block content %}
 
 <main class="usa-section usa-content">
@@ -10,3 +14,5 @@
 
 {% end %}
 
+
+

templates/nav-side.html.to

@@ -1,40 +1,16 @@
-<aside class="usa-width-one-fourth usa-layout-docs-sidenav">
+<div class="sidenav">
-  <ul class="usa-sidenav-list">
+  <ul>
     <li>
-      <a href="#details-of-use">1. Details of Use</a>
+      <a class="sidenav__link" href="/home">Home</a>
-      <ul class="usa-sidenav-sub_list">
-        <li>
-          <a href="#application-details">Application Details</a>
-        </li>
-        <li>
-          <a href="#application-computation">Computation</a>
-        </li>
-        <li>
-          <a href="#application-storage">Storage</a>
-        </li>
-      </ul>
-    </li>
-
-    <li>
-      <a href="#">2. Organizational Info</a>
-      <ul class="usa-sidenav-sub_list">
-        <li>
-          <a href="#information-about-you">Information About You</a>
-        </li>
-        <li>
-          <a href="#information-about-your-collaborators">Information About Your Collaborators</a>
-        </li>
-      </ul>
-    </li>
-
-    <li>
-      <a href="#">3. Funding/Contracting</a>
     </li>
     <li>
-      <a href="#">4. Readiness Survey</a>
+      <a class="sidenav__link" href="/requests">Requests</a>
-    </li>
-    <li>
-      <a href="#">5. Review &amp; Submit</a>
     </li>
   </ul>
-</aside>
+
+  <ul>
+    <li>
+      <a class="sidenav__link" href="/">Logout</a>
+    </li>
+  </ul>
+</div>

templates/requests.html.to

@@ -1,39 +1,57 @@
 {% extends "base.html.to" %}
 
+{% block sidenav %}
+{% include 'nav-side.html.to' %}
+{% end %}
+
 {% block content %}
 
-<main class="usa-section usa-content">
-
-  <h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1>
-
-  <table class="usa-table-borderless" width="100%">
-    <thead>
-      <tr>
-        <th scope="col">Order ID</th>
-        <th scope="col">Request Date</th>
-        <th scope="col">Requester</th>
-        <th scope="col">Total Apps</th>
-        <th scope="col">Status</th>
-        <th scope="col">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-    {% for r in requests %}
-    <tr>
-        <th scope="row"><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a>
-            {% if r['is_new'] %}<span class="usa-label">New</span></th>{% end %}
-        <td>{{ r['date'] }}</td>
-        <td>{{ r['full_name'] }}</td>
-        <td>{{ r['app_count'] }}</td>
-        <td>{{ r['status'] }}</td>
-        <td><a href="">Download</a></td>
-    </tr>
-    {% end %}
-    </tbody>
-  </table>
 
 
-</main>
+
+<div class="col col--grow">
+
+  <div class="panel">
+
+    <div class="panel__content">
+
+      <div class="panel__heading">
+        <h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1>
+      </div>
+
+      <table class="usa-table-borderless" width="100%">
+        <thead>
+          <tr>
+            <th scope="col">Order ID</th>
+            <th scope="col">Request Date</th>
+            <th scope="col">Requester</th>
+            <th scope="col">Total Apps</th>
+            <th scope="col">Status</th>
+            <th scope="col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for r in requests %}
+          <tr>
+            <th scope="row"><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a>
+              {% if r['is_new'] %}<span class="usa-label">New</span>
+            </th>
+            {% end %}
+            <td>{{ r['date'] }}</td>
+            <td>{{ r['full_name'] }}</td>
+            <td>{{ r['app_count'] }}</td>
+            <td>{{ r['status'] }}</td>
+            <td><a href="">Download</a></td>
+          </tr>
+          {% end %}
+        </tbody>
+      </table>
+
+
+
+    </div>
+  </div>
+</div>
 
 {% end %}
 

templates/requests/screen-1.html.to

@@ -13,7 +13,7 @@
 <!-- Overall Request Details -->
 
 <h3 id="overall-request-details">Overall Request Details</h3>
-<p>Please help us understand the size and scope of your resource request.</p>
+<p class="usa-font-lead">Please help us understand the size and scope of your resource request.</p>
 
 {{ f.dollar_value.label }}
 {{ f.dollar_value(placeholder="Total dollar amount to be associated with the Task Order")}}
@@ -59,7 +59,7 @@
 <!-- Cloud Resources -->
 
 <h3 id="cloud-resources">Cloud Resources</h3>
-<p>Please tell us about your expected cloud resource usage as best as you can. Refer to the <a href="">Cloud Service Provider</a> as necessary.</p>
+<p class="usa-font-lead">Please tell us about your expected cloud resource usage as best as you can. Refer to the <a href="">Cloud Service Provider</a> as necessary.</p>
 
 {{ f.total_cores.label }}
 {{ f.total_cores(placeholder="Expected total cores", min="1", max="32") }}
@@ -105,7 +105,7 @@
 <!-- Support Staff -->
 
 <h3 id="support-staff">Support Staff</h3>
-<p>We want to learn more about the people helping you with the cloud.</p>
+<p class="usa-font-lead">We want to learn more about the people helping you with the cloud.</p>
 
 
 <fieldset class="usa-fieldset-inputs">

templates/requests/screen-2.html.to

@@ -9,7 +9,7 @@
 
 
 <h2 id="Information About You">Information About You</h2>
-<p>Please tell us more about yourself.</p>
+<p class="usa-font-lead">Please tell us more about yourself.</p>
 
 {{ f.fname_request.label }}
 {{ f.fname_request(placeholder="Your first name") }}

templates/requests/screen-3.html.to

@@ -8,7 +8,7 @@
 {% end %}
 
 <h2 id="primary-poc">Primary Government/Military <br> Point of Contact (POC)</h2>
-<p>Please designate a Primary Point of Contact that will be responsible for owning the workspace in the JEDI Cloud.</p>
+<p class="usa-font-lead">Please designate a Primary Point of Contact that will be responsible for owning the workspace in the JEDI Cloud.</p>
 <p>The Point of Contact will become the primary owner of the <em>workspace</em> created to use the JEDI Cloud. As a workspace owner, this person will have the ability to:
   <ul>
     <li>Create multiple application stacks and environments in the workspace to access the commercial cloud service provider portal</li>

templates/requests/screen-4.html.to

@@ -13,6 +13,8 @@
 
 <h2 id="review-submit">Review &amp; Submit</h2>
 
+<p class="usa-font-lead">Before you can submit your request, please take a moment to review the information entered in the form. You may make changes by clicking the edit link on each section. When all information looks right, go ahead and submit.</p>
+
 <h3>Details of Use <a href="{{ reverse_url('request_form_update', 1, request_id) }}">Edit</a></h3>
 
 <h4>Overall Request Details</h4>

templates/requests/screen-5.html.to

@@ -9,7 +9,7 @@
 
 
 <h2 id="financial-verification">Financial Verification</h2>
-<p>In order to get you access to the JEDI Cloud, we will need you to enter the details below that will help us verify and account for your Task Order.</p>
+<p class="usa-font-lead">In order to get you access to the JEDI Cloud, we will need you to enter the details below that will help us verify and account for your Task Order.</p>
 
 {{ f.task_order_id.label }}
 {{ f.task_order_id(placeholder="Example: 1234567899C0001") }}