Add nested menu items and update main region with divs instead of tables

This commit is contained in:
Luis Cielak 2018-05-29 14:48:27 -04:00
parent 20fb102e1b
commit 73d88c6aad
3 changed files with 47 additions and 30 deletions

View File

@ -2,9 +2,9 @@ from atst.handler import BaseHandler
class Request(BaseHandler):
screens = [
{ 'title' : 'first screen', },
{ 'title' : 'second screen', },
{ 'title' : 'third screen', }
{ 'title' : 'Application Details', },
{ 'title' : 'Computation', },
{ 'title' : 'Storage', }
]
def initialize(self, page):

View File

@ -4,20 +4,18 @@
<main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
<table>
<tr>
<td style='width:30%;'>
{% include 'requests/sidebar.html.to' %}
</td>
<td>
{% block form %}
form goes here
{% end %}
{% block next %}
<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>next page</a>
{% end %}
</td>
</table>
<aside class="usa-width-one-fourth usa-layout-docs-sidenav">
{% include 'requests/sidebar.html.to' %}
</aside>
<div class="usa-width-three-fourths usa-layout-docs-main_content">
{% block form %}
form goes here
{% end %}
{% block next %}
<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>next page</a>
{% end %}
</div>
</main>
{% end %}

View File

@ -1,14 +1,33 @@
<b>this is the sidebar</b>
{% for i,s in enumerate(screens) %}
<li>
{% if i+1==current %}
<b>{{ s['title'] }}</b>
{% else %}
<a href="{{ reverse_url('request_form',i+1) }}">
{{ s['title'] }}
</a>
{% end %}
</li>
{% end %}
<ul>
<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">
{% for i,s in enumerate(screens) %}
<li>
{% if i+1==current %}
<a class="usa-current" href="{{ reverse_url('request_form',i+1) }}">
{{ s['title'] }}
</a>
{% else %}
<a href='{{ reverse_url('request_form',i+1) }}'>
{{ s['title'] }}
</a>
{% end %}
</li>
{% end %}
</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>