Apply grid fixes to new quest form

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">
-
-  <div class="usa-grid">
-    <div class="usa-footer-logo">
-      <h5 class="usa-footer-slim-logo-heading">Joint Enterprise Defense Infrastructure</h5>
-    </div>
-  </div>
-
-</footer>
+<footer>  
+  <h5>Joint Enterprise Defense Infrastructure</h5>
+</footer>

templates/requests/sidebar.html.to

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

templates/requests_new.html.to

@@ -1,35 +1,50 @@
 {% 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>
+      
+
+      
+        {% if request_id %}
+        <form method='POST' action="{{ reverse_url('request_form_update', current, request_id) }}" autocomplete="off">
+        {% else %}
+        <form method='POST' action="{{ reverse_url('request_form_new', current) }}" autocomplete="off">
+        {% end %}
+
+        {% module xsrf_form_html() %}
+        {% block form %}
+        form goes here
+        {% end %}
+        {% block next %}
+        <input type='submit' class='usa-button usa-button-primary' value='Save & Continue' />
+        {% end %}
+        </form>
+
+      
+
+      
+    </main>
 
 
-<div class="site-action"><a href="/requests">&#8249; All requests</a></div>
+  </div>
+</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">
-    {% else %}
-      <form method='POST' action="{{ reverse_url('request_form_new', current) }}" autocomplete="off">
-    {% end %}
-
-    {% module xsrf_form_html() %}
-    {% block form %}
-    form goes here
-    {% end %}
-    {% block next %}
-    <input type='submit' class='usa-button usa-button-primary' value='Save & Continue' />
-    {% end %}
-    </form>
-
-</main>
 
 
 {% end %}