Merge pull request #61 from dod-ccpo/request_form_new_layout
Request form new layout
This commit is contained in:
luisgov
GitHub
commit
d630e047a0
@ -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)],
|
||||
)
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
max-width: $site-max-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
@ -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">‹ 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>
|
||||
@ -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">‹ 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 %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user