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

Update styles on spend table in reports

Browse Source
This commit is contained in:
Patrick Smith 2019-02-09 18:05:32 -05:00
parent fede9f81ee
commit 7278650395
2 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
styles/sections/_reports.scss
View File

@ -200,9 +200,12 @@
.spend-table { .spend-table {
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
.spend-table__header { .spend-table__header {
@include panel-base; @include panel-base;
@include panel-theme-default; @include panel-theme-default;
border-top: none;
border-bottom: 0; border-bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -212,8 +215,8 @@
padding: $gap * 2; padding: $gap * 2;
.spend-table__title { .spend-table__title {
@include h3; @include h4;
margin: 0; font-size: $lead-font-size;
flex: 2; flex: 2;
} }
@ -224,6 +227,12 @@
} }
table { table {
thead th {
text-transform: uppercase;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
}
th, td { th, td {
white-space: nowrap; white-space: nowrap;
@ -231,10 +240,6 @@
margin: 0; margin: 0;
} }
&.current-month {
background-color: $color-aqua-lightest;
}
&.previous-month { &.previous-month {
color: $color-gray; color: $color-gray;
} }
@ -283,13 +288,15 @@
.spend-table__portfolio { .spend-table__portfolio {
th, td { th, td {
font-weight: bold; font-weight: bold;
border-bottom: 1px solid $color-gray-lightest;
} }
} }
.spend-table__application { .spend-table__application {
.spend-table__application__toggler { .spend-table__application__toggler {
@include icon-link-color($color-black-light, $color-gray-lightest); @include icon-link-color($color-blue, $color-gray-lightest);
margin-left: -$gap; margin-left: -$gap;
color: $color-blue;
.icon { .icon {
@include icon-size(12); @include icon-size(12);
@ -297,14 +304,21 @@
} }
} }
.spend-table__application__env { th, td {
margin-left: $gap; border-bottom: none;
}
&:last-child { .spend-table__application__env {
td, th { margin-left: 2 * $gap;
padding-bottom: $gap * 5;
box-shadow: inset 0 (-$gap * 2.5) 0 $color-gray-lightest; th, td {
.icon-link {
font-weight: $font-normal;
font-size: $base-font-size;
} }
border-bottom: 1px dashed $color-white;
background-color: $color-blue-light;
} }
} }
} }

11
templates/portfolios/reports/index.html
View File

@ -342,7 +342,7 @@
<div class='spend-table responsive-table-wrapper'> <div class='spend-table responsive-table-wrapper'>
<div class='spend-table__header'> <div class='spend-table__header'>
<h2 class='spend-table__title'>Total spend per month </h2> <h2 class='spend-table__title'>Total spent per month</h2>
<select name='month' id='month' onchange='location = this.value' class='spend-table__month-select'> <select name='month' id='month' onchange='location = this.value' class='spend-table__month-select'>
{% for m in cumulative_budget["months"] %} {% for m in cumulative_budget["months"] %}
@ -379,12 +379,12 @@
<th scope='col' class='table-cell--align-right previous-month'>{{ two_months_ago.strftime('%B %Y') }}</th> <th scope='col' class='table-cell--align-right previous-month'>{{ two_months_ago.strftime('%B %Y') }}</th>
<th scope='col' class='table-cell--align-right previous-month'>{{ prev_month.strftime('%B %Y') }}</th> <th scope='col' class='table-cell--align-right previous-month'>{{ prev_month.strftime('%B %Y') }}</th>
<th scope='col' class='table-cell--align-right current-month'>{{ current_month.strftime('%B %Y') }}</th> <th scope='col' class='table-cell--align-right current-month'>{{ current_month.strftime('%B %Y') }}</th>
<th class='current-month'>% of total spend this month</th> <th class='current-month'></th>
</thead> </thead>
<tbody class='spend-table__portfolio'> <tbody class='spend-table__portfolio'>
<tr> <tr>
<th scope='row'>Total</th> <th scope='row'>Portfolio Total</th>
<td class='table-cell--align-right previous-month'>{{ portfolio_totals.get(two_months_ago_index, 0) | dollars }}</td> <td class='table-cell--align-right previous-month'>{{ portfolio_totals.get(two_months_ago_index, 0) | dollars }}</td>
<td class='table-cell--align-right previous-month'>{{ portfolio_totals.get(prev_month_index, 0) | dollars }}</td> <td class='table-cell--align-right previous-month'>{{ portfolio_totals.get(prev_month_index, 0) | dollars }}</td>
<td class='table-cell--align-right current-month'>{{ portfolio_totals.get(current_month_index, 0) | dollars }}</td> <td class='table-cell--align-right current-month'>{{ portfolio_totals.get(current_month_index, 0) | dollars }}</td>
@ -429,10 +429,9 @@
<tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible' class='spend-table__application__env'> <tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible' class='spend-table__application__env'>
<th scope='rowgroup'> <th scope='rowgroup'>
<a href='#' class='icon-link spend-table__application__env'> <div class='icon-link spend-table__application__env'>
{{ Icon('link') }}
<span v-html='envName'></span> <span v-html='envName'></span>
</a> </div>
</th> </th>
<td class='table-cell--align-right previous-month'> <td class='table-cell--align-right previous-month'>