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

UI progress bar

scss/atat.scss

@@ -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';

scss/elements/_typography.scss

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

scss/sections/_progress_menu.scss

@@ -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;
+    }
+
+  }
+}

static/icons/checkmark.svg

@@ -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>

templates/requests/menu.html.to

@@ -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>

templates/requests_new.html.to

@@ -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">
 

templates/styleguide.html.to

@@ -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>