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

Move move css to accordion file so it is more generalized

Browse Source
This commit is contained in:
leigh-mil 2019-12-06 13:37:39 -05:00
parent 1165b60fce
commit 0166e2fbc7
3 changed files with 55 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
styles/elements/_accordions.scss
View File

@ -1,5 +1,8 @@
.accordion { .accordion {
@include shadow-panel; @include shadow-panel;
margin-top: $gap;
margin-bottom: $gap;
max-width: $max-panel-width;
&__header { &__header {
margin: 0; margin: 0;
@ -7,5 +10,28 @@
&__content { &__content {
padding: 0 ($gap * 3) $gap; padding: 0 ($gap * 3) $gap;
&--list-item {
border-bottom: 1px solid $color-gray-lightest;
&:last-child {
border-bottom: none;
padding-bottom: $gap;
}
.col {
padding-right: $gap * 2;
}
h4 {
margin: $gap * 2 0 $gap;
}
h5 {
font-size: 1rem;
color: $color-gray;
margin: 0;
}
}
} }
} }

29
styles/sections/_task_order.scss
View File

@ -185,32 +185,3 @@
padding-bottom: $gap * 2.5; padding-bottom: $gap * 2.5;
} }
} }
.task-order__list {
margin-top: $gap;
margin-bottom: $gap;
max-width: $max-panel-width;
&--item {
border-bottom: 1px solid $color-gray-lightest;
&:last-child {
border-bottom: none;
padding-bottom: $gap;
}
.col {
padding-right: $gap * 2;
}
h4 {
margin: $gap * 2 0 $gap;
}
h5 {
font-size: 1rem;
color: $color-gray;
margin: 0;
}
}
}

60
templates/task_orders/index.html
View File

@ -14,39 +14,37 @@
{% macro TaskOrderList(task_orders, status) %} {% macro TaskOrderList(task_orders, status) %}
{% set status = "All Task Orders" %} {% set status = "All Task Orders" %}
<section class="task-order__list"> {% call Accordion(title=status, id=status, heading_tag="h4") %}
{% call Accordion(title=status, id=status, heading_tag="h4") %} {% for task_order in task_orders %}
{% for task_order in task_orders %} <div class="accordion__content--list-item">
<div class="task-order__list--item"> <h4><a href="{{ url_for('task_orders.review_task_order', task_order_id=task_order.id) }}">Task Order #{{ task_order.number }} {{ Icon("caret_right", classes="icon--tiny icon--blue" ) }}</a></h4>
<h4><a href="{{ url_for('task_orders.review_task_order', task_order_id=task_order.id) }}">Task Order #{{ task_order.number }} {{ Icon("caret_right", classes="icon--tiny icon--blue" ) }}</a></h4> <div class="row">
<div class="row"> <div class="col col--grow">
<div class="col col--grow"> <h5>
<h5> Current Period of Performance
Current Period of Performance </h5>
</h5> <p>
<p> {{ task_order.start_date | formattedDate(formatter="%b %d, %Y") }}
{{ task_order.start_date | formattedDate(formatter="%b %d, %Y") }} -
- {{ task_order.end_date | formattedDate(formatter="%b %d, %Y") }}
{{ task_order.end_date | formattedDate(formatter="%b %d, %Y") }} </p>
</p> </div>
</div> <div class="col col--grow">
<div class="col col--grow"> <h5>Total Value</h5>
<h5>Total Value</h5> <p>{{ task_order.total_contract_amount | dollars }}</p>
<p>{{ task_order.total_contract_amount | dollars }}</p> </div>
</div> <div class="col col--grow">
<div class="col col--grow"> <h5>Total Obligated</h5>
<h5>Total Obligated</h5> <p>{{ task_order.total_obligated_funds | dollars }}</p>
<p>{{ task_order.total_obligated_funds | dollars }}</p> </div>
</div> <div class="col col--grow">
<div class="col col--grow"> <h5>Total Expended</h5>
<h5>Total Expended</h5> <p>$0</p>
<p>$0</p>
</div>
</div> </div>
</div> </div>
{% endfor %} </div>
{% endcall %} {% endfor %}
</section> {% endcall %}
{% endmacro %} {% endmacro %}