Merge pull request #198 from dod-ccpo/ui/reports-spend-table
Ui/reports spend table
This commit is contained in:
andrewdds
GitHub
commit
e631d0941d
24
js/components/toggler.js
Normal file
24
js/components/toggler.js
Normal file
@ -0,0 +1,24 @@
|
||||
export default {
|
||||
name: 'toggler',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false
|
||||
}
|
||||
},
|
||||
|
||||
render: function (createElement) {
|
||||
return createElement( this.$vnode.data.tag, [
|
||||
this.$scopedSlots.default({
|
||||
isVisible: this.isVisible,
|
||||
toggle: this.toggle
|
||||
})
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle: function (e) {
|
||||
this.isVisible = !this.isVisible
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,14 +8,15 @@ import checkboxinput from './components/checkbox_input'
|
||||
import DetailsOfUse from './components/forms/details_of_use'
|
||||
import poc from './components/forms/poc'
|
||||
import financial from './components/forms/financial'
|
||||
import toggler from './components/toggler'
|
||||
import NewProject from './components/forms/new_project'
|
||||
|
||||
Vue.use(VTooltip)
|
||||
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app-root',
|
||||
components: {
|
||||
toggler,
|
||||
optionsinput,
|
||||
textinput,
|
||||
checkboxinput,
|
||||
|
||||
@ -24,7 +24,7 @@ $lead-font-size: 2rem;
|
||||
$title-font-size: 5.2rem;
|
||||
$h1-font-size: 4rem;
|
||||
$h2-font-size: 3rem;
|
||||
$h3-font-size: 2rem;
|
||||
$h3-font-size: 2.3rem;
|
||||
$h4-font-size: 1.7rem;
|
||||
$h5-font-size: 1.5rem;
|
||||
$h6-font-size: 1.3rem;
|
||||
|
||||
@ -8,6 +8,28 @@
|
||||
@include panel-margin;
|
||||
min-width: 100%;
|
||||
|
||||
th, td {
|
||||
&.table-cell--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.table-cell--shrink {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
&.table-cell--expand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.table-cell--hide-small {
|
||||
display: none;
|
||||
|
||||
@include media($medium-screen) {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
th,
|
||||
@ -29,32 +51,12 @@
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-cell--shrink {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.table-cell--expand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-cell--hide-small {
|
||||
display: none;
|
||||
|
||||
@include media($medium-screen) {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
th, td {
|
||||
@include block-list-header;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
@ -6,13 +6,20 @@
|
||||
}
|
||||
|
||||
.funding-summary-row__col {
|
||||
@include grid-pad;
|
||||
|
||||
@include media($medium-screen) {
|
||||
@include grid-pad;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: 50%;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
align-items: stretch;
|
||||
@ -171,3 +178,102 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spend-table {
|
||||
.spend-table__header {
|
||||
@include panel-base;
|
||||
@include panel-theme-default;
|
||||
border-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $gap * 2;
|
||||
|
||||
.spend-table__title {
|
||||
@include h3;
|
||||
margin: 0;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.spend-table__month-select {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.current-month {
|
||||
background-color: $color-aqua-lightest;
|
||||
}
|
||||
|
||||
&.previous-month {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
&.meter-cell {
|
||||
padding-left: 0;
|
||||
|
||||
@include media($medium-screen) {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
meter {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: $color-white;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
@include media($medium-screen) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::-webkit-meter-bar {
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
left: $gap;
|
||||
@include h5;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spend-table__workspace {
|
||||
th, td {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.spend-table__project {
|
||||
.spend-table__project__toggler {
|
||||
@include icon-link-color($color-black-light, $color-gray-lightest);
|
||||
margin-left: -$gap;
|
||||
|
||||
.icon {
|
||||
@include icon-size(12);
|
||||
margin-right: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
.spend-table__project__env {
|
||||
margin-left: $gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{% extends "base_workspace.html" %}
|
||||
|
||||
{% from "components/alert.html" import Alert %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
@ -85,4 +86,109 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class='spend-table responsive-table-wrapper'>
|
||||
<div class='spend-table__header'>
|
||||
<h2 class='spend-table__title'>Total spend per month</h2>
|
||||
|
||||
<select name='month' id='month' class='spend-table__month-select'>
|
||||
<option value='06/2018'>June 2018</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
|
||||
<th scope='col' class='table-cell--align-right previous-month'>April 2018</th>
|
||||
<th scope='col' class='table-cell--align-right previous-month'>May 2018</th>
|
||||
<th scope='col' class='table-cell--align-right current-month'>June 2018</th>
|
||||
<td class='current-month'></td>
|
||||
</thead>
|
||||
|
||||
<tbody class='spend-table__workspace'>
|
||||
<tr>
|
||||
<th scope='row'>Workspace Total</th>
|
||||
<td class='table-cell--align-right previous-month'>$58,000</td>
|
||||
<td class='table-cell--align-right previous-month'>$60,000</td>
|
||||
<td class='table-cell--align-right current-month'>$62,000</td>
|
||||
<td class='table-cell--expand current-month meter-cell'>
|
||||
<meter value='62000' min='0' max='62000'></meter>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody is='toggler' class='spend-table__project'>
|
||||
<template slot-scope='{ isVisible, toggle }'>
|
||||
<tr>
|
||||
<th scope='rowgroup'>
|
||||
<button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
|
||||
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
|
||||
<template v-else>{{ Icon('caret_right') }}</template>
|
||||
Code.mil
|
||||
</button>
|
||||
</th>
|
||||
<td class='table-cell--align-right previous-month'>$29,000</td>
|
||||
<td class='table-cell--align-right previous-month'>$30,000</td>
|
||||
<td class='table-cell--align-right current-month'>$31,000</td>
|
||||
<td class='table-cell--expand current-month meter-cell'>
|
||||
<meter value='31000' min='0' max='62000' title='50%'></meter>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-show='isVisible'>
|
||||
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Production</a></th>
|
||||
<td class='table-cell--align-right previous-month'>$14,000</td>
|
||||
<td class='table-cell--align-right previous-month'>$15,000</td>
|
||||
<td class='table-cell--align-right current-month'>$16,000</td>
|
||||
<td class='table-cell--expand current-month'></td>
|
||||
</tr>
|
||||
|
||||
<tr v-show='isVisible'>
|
||||
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Development</a></th>
|
||||
<td class='table-cell--align-right previous-month'>$12,000</td>
|
||||
<td class='table-cell--align-right previous-month'>$13,000</td>
|
||||
<td class='table-cell--align-right current-month'>$14,000</td>
|
||||
<td class='table-cell--expand current-month'></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
|
||||
<tbody is='toggler' class='spend-table__project'>
|
||||
<template slot-scope='{ isVisible, toggle }'>
|
||||
<tr>
|
||||
<th scope='rowgroup'>
|
||||
<button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
|
||||
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
|
||||
<template v-else>{{ Icon('caret_right') }}</template>
|
||||
Digital Dojo
|
||||
</button>
|
||||
</th>
|
||||
<td class='table-cell--align-right previous-month'>$29,000</td>
|
||||
<td class='table-cell--align-right previous-month'>$30,000</td>
|
||||
<td class='table-cell--align-right current-month'>$31,000</td>
|
||||
<td class='table-cell--expand current-month meter-cell'>
|
||||
<meter value='31000' min='0' max='62000' title='50%'></meter>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-show='isVisible'>
|
||||
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Production</a></th>
|
||||
<td class='table-cell--align-right previous-month'>$14,000</td>
|
||||
<td class='table-cell--align-right previous-month'>$15,000</td>
|
||||
<td class='table-cell--align-right current-month'>$16,000</td>
|
||||
<td class='table-cell--expand current-month'></td>
|
||||
</tr>
|
||||
|
||||
<tr v-show='isVisible'>
|
||||
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Development</a></th>
|
||||
<td class='table-cell--align-right previous-month'>$12,000</td>
|
||||
<td class='table-cell--align-right previous-month'>$13,000</td>
|
||||
<td class='table-cell--align-right current-month'>$14,000</td>
|
||||
<td class='table-cell--expand current-month'></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user