pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #84 from dod-ccpo/ui-progress-bar

Browse Source 
UI progress bar
This commit is contained in:
luisgov 2018-07-20 14:50:41 -04:00 committed by GitHub
commit e3833c21a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 162 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/atat.scss
View File

@ -19,5 +19,9 @@
@import 'components/site_action';
@import 'components/empty_state';
@import 'sections/main';
@import 'sections/topbar';
@import 'sections/sidenav';
@import 'sections/progress_menu';
@import 'sections/footer';
@import 'sections/login';

13
scss/elements/_typography.scss
View File

@ -28,14 +28,17 @@ h2 {
margin-top: 0;
}
a,
a:hover {
transition:
background $hover-transition-time,
border $hover-transition-time,
box-shadow $hover-transition-time,
color $hover-transition-time,
background 0.2s,
border 0.2s,
box-shadow 0.2s,
color 0.2s;
}
a:visited {
color: $color-blue;
}
dt {

103
scss/sections/_progress_menu.scss Normal file
View File

@ -0,0 +1,103 @@
.progress-menu {
display: block;
ul {
list-style: none;
margin: 0;
padding: 0;
}
&--three {
.progress-menu__item {
width: 32%;
}
}
&--four {
.progress-menu__item {
width: 24%;
}
}
&--five {
.progress-menu__item {
width: 19%;
}
}
&__item {
display: inline-block;
font-weight: $font-bold;
position: relative;
vertical-align: top;
a {
display: block;
position: relative;
padding: ($gap * 4) ($gap * 2);
margin: 0 ($gap * 2);
text-decoration: none;
text-align: center;
z-index: 2;
color: $color-black;
}
a.active {
color: $color-blue;
}
&:first-child:after {
display: none;
}
&:after {
display: inline-block;
height: 1px;
content: " ";
color: $color-gray-lightest;
text-shadow: none;
background-color: $color-gray-light;
position: absolute;
top: 1.1rem;
width: 100%;
right: 50%;
border-right: 2.2rem solid transparent;
border-left: 2.2rem solid transparent;
background-clip: padding-box;
z-index: 1;
}
&:before {
content: "";
display: block;
text-align: center;
width: 2rem;
height: 2rem;
border: 1px solid $color-gray;
border-radius: 100%;
position: absolute;
left: 50%;
margin-left: -1rem;
z-index: 1;
}
&--active:before {
border: 2px solid $color-blue;
}
&--complete:before {
content: url('/static/icons/checkmark.svg');
background-color: $color-blue;
border: 2px solid $color-blue;
font-size: $h6-font-size;
padding: 1px 2px;
}
&--incomplete:before {
border: 2px solid $color-gray-light;
}
}
}

1
static/icons/checkmark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.182 11.501l9.08-10.168c.367-.412.997-.446 1.406-.078.41.369.445 1.001.078 1.412l-9.821 11c-.396.444-1.089.444-1.485 0L.254 8.98c-.367-.411-.332-1.044.078-1.412.41-.369 1.04-.334 1.407.077l3.443 3.857z" fill="#fff" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

13
templates/requests/menu.html.to Normal file
View File

@ -0,0 +1,13 @@
<div class="progress-menu progress-menu--five">
<ul>
{% for i,s in enumerate(screens) %}
<li class="progress-menu__item">
<a href="{{ reverse_url('request_form_update', i+1, request_id) if request_id else reverse_url('request_form_new',i+1) }}"
{% if matchesPath('/requests/new/'+str(i+1)) %}class="active"{% end %}
>
{{ s['title'] }}
</a>
</li>
{% end %}
</ul>
</div>

10
templates/requests_new.html.to
View File

@ -1,14 +1,10 @@
{% extends "base.html.to" %}
{% block sidenav %}
{% include 'requests/sidebar.html.to' %}
{% end %}
{% block content %}
<div class="col col--grow">
<div class="col">
{% include 'requests/menu.html.to' %}
<div class="panel">

30
templates/styleguide.html.to
View File

@ -26,6 +26,35 @@
{% block content %}
<div class='col col--grow'>
<div class="progress-menu progress-menu--three">
<ul>
<li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li>
<li class="progress-menu__item progress-menu__item--active"><a href="#">Step Two</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Three</a></li>
</ul>
</div>
<div class="progress-menu progress-menu--four">
<ul>
<li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li>
<li class="progress-menu__item progress-menu__item--active"><a href="#">Step Two</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Three</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Four</a></li>
</ul>
</div>
<div class="progress-menu progress-menu--five">
<ul>
<li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li>
<li class="progress-menu__item progress-menu__item--active"><a href="#">Step Two</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Three</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Four</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Five</a></li>
</ul>
</div>
<div class='panel'>
<div class='panel__content'>
<em>This is a panel content</em>
@ -91,6 +120,7 @@
<span class='nowrap'>{% module Icon('alert') %} 'alert'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('link') %} 'link'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('ok') %} 'ok'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('checkmark') %} 'checkmark'&nbsp;&nbsp;&nbsp;</span>
</div>
</div>