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 {
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
.spend-table__header {
@include panel-base;
@include panel-theme-default;
border-top: none;
border-bottom: 0;
display: flex;
flex-direction: row;
@ -212,8 +215,8 @@
padding: $gap * 2;
.spend-table__title {
@include h3;
margin: 0;
@include h4;
font-size: $lead-font-size;
flex: 2;
}
@ -224,6 +227,12 @@
}
table {
thead th {
text-transform: uppercase;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
}
th, td {
white-space: nowrap;
@ -231,10 +240,6 @@
margin: 0;
}
&.current-month {
background-color: $color-aqua-lightest;
}
&.previous-month {
color: $color-gray;
}
@ -283,13 +288,15 @@
.spend-table__portfolio {
th, td {
font-weight: bold;
border-bottom: 1px solid $color-gray-lightest;
}
}
.spend-table__application {
.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;
color: $color-blue;
.icon {
@include icon-size(12);
@ -297,14 +304,21 @@
}
}
.spend-table__application__env {
margin-left: $gap;
th, td {
border-bottom: none;
}
&:last-child {
td, th {
padding-bottom: $gap * 5;
box-shadow: inset 0 (-$gap * 2.5) 0 $color-gray-lightest;
.spend-table__application__env {
margin-left: 2 * $gap;
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__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'>
{% 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'>{{ prev_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>
<tbody class='spend-table__portfolio'>
<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(prev_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'>
<th scope='rowgroup'>
<a href='#' class='icon-link spend-table__application__env'>
{{ Icon('link') }}
<div class='icon-link spend-table__application__env'>
<span v-html='envName'></span>
</a>
</div>
</th>
<td class='table-cell--align-right previous-month'>