Merge pull request #61 from dod-ccpo/request_form_new_layout

Request form new layout

atst/forms/request.py

@@ -11,7 +11,7 @@ class RequestForm(Form):
 
     # Details of Use: Overall Request Details
     dollar_value = IntegerField(
-        "What is the total estimated dollar value of the cloud resources you are requesting using the JEDI CSP Calculator? ",
+        "What is the total estimated dollar value of the cloud resources you are requesting using the <a href=\"#\" target=\"_blank\">JEDI CSP Calculator</a>?",
         validators=[InputRequired(), NumberRange(min=1)],
     )
 

scss/core/_base.scss

@@ -5,4 +5,12 @@
 
 body {
   background-color: $color-gray-lightest;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-height: 100vh;
+
+  > footer {
+    margin-top: auto;
+  }
 }

scss/core/_grid.scss

@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    max-width: $site-max-width;
   }
 }
 

scss/elements/_panels.scss

@@ -3,7 +3,7 @@
  * A generic block container
  */
 
-@mixin panel-base {
+ @mixin panel-base {
   background-color: $color-white;
   border-top-width: 1px;
   border-bottom-width: 1px;
@@ -28,6 +28,11 @@
   @include panel-base;
   @include panel-theme-default;
   @include panel-margin;
+
+  &__content {
+    padding-left: $gap*4;
+    padding-right: $gap*4;
+  }
 }
 
 /*
@@ -35,16 +40,19 @@
  * Grid container for panel blocks
  */
 
-.panel-container {
+ .panel-container {
   @include grid-row;
   @include grid-pad;
   @include margin(($site-margins-mobile * 2) null);
 
   @include media($medium-screen) {
     @include margin(($site-margins * 2) null);
+    flex-wrap: nowrap;
   }
 
   > .col {
     @include grid-pad;
   }
+
+
 }

scss/sections/_footer.scss

@@ -1,9 +1,6 @@
 footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 1em;
   background-color: $color-gray-lightest;
   border-top: 1px solid $color-gray-lighter;
+  padding-left: $gap*4;
+  padding-bottom: $gap*2;
 }

scss/sections/_sidenav.scss

@@ -2,13 +2,15 @@
   @include grid-pad;
   @include panel-margin;
   width: 100%;
-  display: flex;
-  flex-direction: column;
 
   @include media($large-screen) {
     width: 21rem;
   }
 
+  @include media($xlarge-screen) {
+    width: 30rem;
+  }
+
   .sidenav__link {
     display: block;
     border-top: 1px solid $color-black;
@@ -36,7 +38,7 @@
         background-color: $color-white;
 
         .sidenav__link {
-          &.sidenav__link--active {
+          &--active {
             @include h5;
             box-shadow: none;
           }
@@ -74,6 +76,8 @@
   }
 
   > ul {
+    @include panel-margin;
+
     > li {
       &:last-child {
         > .sidenav__link {

templates/footer.html.to

@@ -1,9 +1,3 @@
-<footer class="usa-footer usa-footer-slim">
+<footer>  
-
+  <h5>Joint Enterprise Defense Infrastructure</h5>
-  <div class="usa-grid">
-    <div class="usa-footer-logo">
-      <h5 class="usa-footer-slim-logo-heading">Joint Enterprise Defense Infrastructure</h5>
-    </div>
-  </div>
-
 </footer>

templates/requests/sidebar.html.to

@@ -1,23 +1,31 @@
-<ul class="usa-sidenav-list">
+<div class="sidenav">
+  <ul>
+    <li>
+      <a class="sidenav__link" href="/requests">&#8249; All requests</a>
+    </li>
+  </ul>
+
+  <ul>
     {% for i,s in enumerate(screens) %}
     <li>
       {% if i+1==current %}
-    <a class="usa-current" href="{{ reverse_url('request_form_update', i+1, request_id) if request_id else reverse_url('request_form_new',i+1) }}">
+      <a class="sidenav__link sidenav__link--active" href="{{ reverse_url('request_form_update', i+1, request_id) if request_id else reverse_url('request_form_new',i+1) }}">
         {{ i+1 }}. {{ s['title'] }}
       </a>
       {% if s.get('subitems') %}
-    <ul class="usa-sidenav-sub_list">
+      <ul>
         {% for j,t in enumerate(s['subitems']) %}
-      <li><a href="#{{ t['id'] }}">{{ t['title'] }}</a></li>
+        <li><a class="sidenav__link" href="#{{ t['id'] }}">{{ t['title'] }}</a></li>
         {% end %}
       </ul>
       {% end %}
 
       {% else %}
-    <a href="{{ reverse_url('request_form_update', i+1, request_id) if request_id else reverse_url('request_form_new',i+1) }}">
+      <a class="sidenav__link" href="{{ reverse_url('request_form_update', i+1, request_id) if request_id else reverse_url('request_form_new',i+1) }}">
         {{ i+1 }}. {{ s['title'] }}
       </a>
       {% end %}
     </li>
     {% end %}
-</ul>
+  </ul>
+</div>

templates/requests_new.html.to

@@ -1,18 +1,23 @@
 {% extends "base.html.to" %}
 
+
+{% block sidenav %}
+{% include 'requests/sidebar.html.to' %}
+{% end %}
+
+
 {% block content %}
 
+<div class="col col--grow">
+  
+  <div class="panel">
+
+    <main class="panel__content">
+      <div class="panel__heading">
+        <h1>New Request</h1>
+      </div>
       
 
-<div class="site-action"><a href="/requests">&#8249; All requests</a></div>
-
-<h1>New Request</h1>
-
-<aside class="sidenav usa-width-one-third">
-  {% include 'requests/sidebar.html.to' %}
-</aside>
-
-<main class="main-content usa-width-two-thirds">
       
         {% if request_id %}
         <form method='POST' action="{{ reverse_url('request_form_update', current, request_id) }}" autocomplete="off">
@@ -29,7 +34,17 @@
         {% end %}
         </form>
 
-</main>
+      
+
+      
+    </main>
+
+
+  </div>
+</div>
+
+
+
 
 
 {% end %}