Merge pull request #190 from dod-ccpo/ui/reports-summary-layout

Ui/reports summary layout

atst/routes/workspaces.py

@@ -36,3 +36,10 @@ def workspace_members(workspace_id):
     return render_template(
         "workspace_members.html", workspace_id=workspace_id, members=members
     )
+
+
+@bp.route("/workspaces/<workspace_id>/reports")
+def workspace_reports(workspace_id):
+    return render_template(
+        "workspace_reports.html", workspace_id=workspace_id
+    )

styles/atat.scss

@@ -19,6 +19,7 @@
 @import 'elements/diff';
 @import 'elements/tooltip';
 @import 'elements/kpi';
+@import 'elements/graphs';
 
 @import 'components/topbar';
 @import 'components/global_layout';
@@ -38,3 +39,4 @@
 @import 'sections/projects_list';
 @import 'sections/project_edit';
 @import 'sections/member_edit';
+@import 'sections/reports';

styles/components/_alerts.scss

@@ -56,6 +56,16 @@
       }
     }
   }
+
+  .alert__actions {
+    .icon-link {
+      @include icon-link-color($color-primary, $color-white);
+
+      &:first-child {
+        margin-left: -$gap;
+      }
+    }
+  }
 }
 
 .alert {
@@ -64,13 +74,31 @@
 
   &.alert--success {
     @include alert-level('success');
+
+    .alert__actions {
+      .icon-link {
+        @include icon-link-color($color-green, $color-white);
+      }
+    }
   }
 
   &.alert--warning {
     @include alert-level('warning');
+
+    .alert__actions {
+      .icon-link {
+        @include icon-link-color($color-gold-dark, $color-white);
+      }
+    }
   }
 
   &.alert--error {
     @include alert-level('error');
+
+    .alert__actions {
+      .icon-link {
+        @include icon-link-color($color-red, $color-white);
+      }
+    }
   }
 }

styles/core/_variables.scss

@@ -70,6 +70,7 @@ $color-gray-warm-dark:       #494440;
 $color-gray-warm-light:      #e4e2e0;
 $color-gray-cool-light:      #dce4ef;
 
+$color-gold-dark:            #cd841b;
 $color-gold:                 #fdb81e;
 $color-gold-light:           #f9c642;
 $color-gold-lighter:         #fad980;

styles/elements/_graphs.scss

@@ -0,0 +1,19 @@
+meter {
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  background: $color-gray-lightest;
+
+  &::-webkit-meter-bar {
+    background: $color-gray-lightest;
+  }
+  &::-webkit-meter-optimum-value,
+  &::-webkit-meter-suboptimum-value,
+  &::-webkit-meter-even-less-good-value {
+    background: $color-primary;
+  }
+
+  &::-moz-meter-bar {
+    background: $color-primary;
+  }
+}

styles/elements/_typography.scss

@@ -52,6 +52,7 @@ dl {
   }
   dd {
     -webkit-margin-start: 0;
+    margin-inline-start: 0;
 
     .label {
       margin-left: 0;

styles/sections/_reports.scss

@@ -0,0 +1,173 @@
+.funding-summary-row {
+
+  @include media($medium-screen) {
+    @include grid-row;
+    flex-wrap: wrap;
+  }
+
+  .funding-summary-row__col {
+    @include grid-pad;
+
+    @include media($medium-screen) {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: row;
+      flex-basis: 50%;
+    }
+
+    align-items: stretch;
+
+    .panel {
+      padding: $gap * 2;
+      flex-grow: 1;
+
+
+      // Spending Summary
+      // ===============================
+      &.spend-summary {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .row {
+          justify-content: space-between;
+        }
+
+        .spend-summary__heading {
+          @include h3;
+          margin: 0 $gap 0 0;
+        }
+
+        .spend-summary__budget {
+          margin: 0 0 0 $gap;
+
+          > div {
+            text-align: right;
+            margin: 0 0 ($gap / 2) 0;
+
+            dd, dt {
+              display: inline;
+            }
+
+            dt {
+              color: $color-gray;
+              margin-right: $gap;
+              font-weight: normal;
+            }
+
+            dd {
+              font-weight: bold;
+            }
+          }
+        }
+
+        meter {
+          width: 100%;
+          height: 3rem;
+          margin: ($gap * 2) 0 0;
+        }
+
+        .spend-summary__spent {
+          margin: $gap 0 0 0;
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: flex-end;
+
+          dd, dt {
+            @include h5;
+          }
+
+          dt {
+            font-weight: normal;
+            margin-left: $gap;
+          }
+        }
+      }
+
+
+
+      // Task Order Summary
+      // ===============================
+      &.to-summary {
+
+        .to-summary__row {
+          .to-summary__heading {
+            @include h3;
+            margin: 0;
+          }
+
+          .to-summary__to-number {
+            margin: 0;
+            dd {
+              &::before {
+                content: '#';
+                color: $color-gray;
+                margin-right: $gap;
+              }
+            }
+          }
+
+          @include media($xlarge-screen) {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+
+            .to-summary__to {
+              margin: 0 $gap 0 0;
+            }
+
+            .to-summary__expiration {
+              text-align: right;
+              flex-grow: 1;
+
+              dl {
+                margin: 0 0 0 $gap;
+
+                dd, dt {
+                  display: inline;
+                }
+              }
+            }
+          }
+        }
+
+        .to-summary__expiration {
+
+          dl {
+            margin: ($gap * 2) 0 0 0;
+
+            > div {
+              margin: 0 0 ($gap / 2) 0;
+
+              dd, dt {
+                display: block;
+              }
+
+              dt {
+                color: $color-gray;
+                margin-right: $gap;
+                font-weight: normal;
+              }
+
+              dd {
+                font-weight: bold;
+              }
+            }
+          }
+
+          .icon-link {
+            margin: 0 (-$gap);
+          }
+        }
+
+        .to-summary__co {
+          margin: ($gap * 2) 0 0 0;
+
+          @include media($xlarge-screen) {
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}

templates/components/alert.html

@@ -38,7 +38,22 @@
       {% endif %}
 
       {% if actions %}
-        <div class='alert__actions'>{{ actions | safe }}</div>
+        <div class='alert__actions'>
+          {% if actions is string %}
+
+            {{ actions | safe }}
+
+          {% elif actions is iterable %}
+
+            {% for action in actions %}
+              <a href={{ action["href"] }} class='icon-link'>
+                {% if 'icon' in action %}{{ Icon(action["icon"]) }}{% endif %}
+                <span>{{ action["label"] }}</span>
+              </a>
+            {% endfor %}
+
+          {% endif %}
+        </div>
       {% endif %}
     </div>
   </div>

templates/navigation/workspace_navigation.html

@@ -32,7 +32,7 @@
 
     {{ SidenavItem(
       "Funding & Reports",
-      href='/workspace_reports/123456',
+      href='/workspaces/123456/reports',
       active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
     ) }}
   </ul>

templates/workspace_reports.html

@@ -0,0 +1,88 @@
+{% extends "base_workspace.html" %}
+
+{% from "components/alert.html" import Alert %}
+
+{% block workspace_content %}
+
+  {{ Alert("Funding Information & Reports for Workspace " + workspace_id,
+    message="<p>On this screen you'll find detailed reporting information on this workspace. This message needs to be written better and be dismissable.</p>",
+    actions=[
+      {"label": "Learn More", "href": "/", "icon": "info"},
+      {"label": "Dismiss", "href": "/"}
+    ]  ) }}
+
+  <div class='funding-summary-row'>
+
+    <div class='funding-summary-row__col'>
+      <div class='panel spend-summary'>
+        <div class='row'>
+          <h2 class='spend-summary__heading col'>Workspace Total Spend</h2>
+          <dl class='spend-summary__budget'>
+            <div>
+              <dt>Budget </dt>
+              <dd>$100,000,000</dd>
+            </div>
+
+            <div>
+              <dt>Remaining</dt>
+              <dd>$60,000,000</dd>
+            </div>
+          </dl>
+        </div>
+
+        <div>
+          <meter value='40000000' min='0' max='100000000' title='$40,000,000 Total spend to date'></meter>
+
+          <dl class='spend-summary__spent'>
+            <dt>Total spend to date</dt>
+            <dd>$40,000,00</dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+
+    <div class='funding-summary-row__col'>
+      <div class='panel to-summary'>
+        <div class='to-summary__row'>
+
+          <div class='to-summary__to'>
+            <h2 class='to-summary__heading'>Task Order</h2>
+            <dl class='to-summary__to-number'>
+              <dt class='usa-sr-only'>Task Order Number</dt>
+              <dd>1234567890</dd>
+            </dl>
+          </div>
+
+          <div class='to-summary__expiration'>
+            <dl>
+              <div>
+                <dt>Expires</dt>
+                <dd>November 1, 2019</dd>
+              </div>
+
+              <div>
+                <dt>Remaining</dt>
+                <dd>200 days</dd>
+              </div>
+            </dl>
+
+            <a href='/' class='icon-link'>
+              Manage Task Order
+            </a>
+          </div>
+        </div>
+
+        <dl class='to-summary__co'>
+          <dt>Contracting Officer</dt>
+          <dd>
+            Pietro Quirines
+            <a class='icon-link' href='mailto:email@email.com'>email@email.com</a>
+          </dd>
+        </dl>
+
+      </div>
+    </div>
+
+  </div>
+
+{% endblock %}