Add sidebar navigation and placeholder text

This commit is contained in:
Luis Cielak 2018-05-24 13:56:35 -04:00 committed by Brian Duggan
parent 39adcf94a1
commit 077df3bdcf
4 changed files with 60 additions and 6 deletions

View File

@ -1,2 +1,2 @@
@import 'variables.scss';
@import '../node_modules/uswds/src/stylesheets/uswds.scss';
@import 'variables.scss';

View File

@ -1 +0,0 @@

View File

@ -11,7 +11,7 @@
<nav role="navigation" class="usa-nav">
<ul class="usa-nav-primary usa-accordion">
<li><a class="usa-nav-link" href="#"><span>Home</span></a></li>
<li><a class="usa-nav-link" href="#"><span>JEDI Requests</span></a></li>
<li><a class="usa-nav-link usa-current" href="#"><span>JEDI Requests</span></a></li>
<li><a class="usa-nav-link" href="#"><span>Users</span></a></li>
<li><a class="usa-nav-link" href="#"><span>Reports</span></a></li>
<li><a class="usa-nav-link" href="#"><span>Usage Calculator</span></a></li>

View File

@ -1,11 +1,66 @@
{% extends "base.html.to" %}
{% block title %}
hello
AT-AT
{% end %}
{% block content %}
<h1>Hello!</h1>
is it me you're looking for?
<main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
<h1>New JEDI Request</h1><br>
<aside class="usa-width-one-fourth usa-layout-docs-sidenav">
<ul class="usa-sidenav-list">
<li>
<a class="usa-current" href="#details-of-use">1. Details of Use</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>
</li>
<li>
<a href="#">3. Funding/Contracting</a>
</li>
<li>
<a href="#">4. Readiness Survey</a>
</li>
<li>
<a href="#">5. Review &amp; Submit</a>
</li>
</ul>
</aside>
<div class="usa-width-three-fourths usa-layout-docs-main_content">
<h2 id="details-of-use">Details of Use</h2>
<p class="usa-font-lead">
To use JEDI, we want to know more about your needs for cloud services. Please fill out the form regarding computation, storage, and usage.
</p>
<h3 id="application-details">Application Details</h3>
<p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
<h3 id="application-details">Computation</h3>
<p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
<h3 id="application-storage">Storage</h3>
<p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, its a good practice to follow the inverted pyramid structure when writing copy: Begin with the information thats most important to your users and then present information of less importance.</p>
<p>Keep each section and subsection focused — a good approach is to include one theme (topic) per section.</p>
</div>
</main>
{% end %}