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

Styling updates for Task Order index page:

Browse Source 
- Removed unused styling from _accordions css.
- Removed references to accordion classes from applications index page
since this will be restyled later.
- Added Accordion macro to the Task Order index page and created
temporary initial
toggle list of All Task Orders.
This commit is contained in:
leigh-mil
2019-12-04 11:48:05 -05:00
parent 9bdbe04829
commit d994365460
4 changed files with 32 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
templates/applications/index.html
View File

@@ -37,20 +37,20 @@
{% set section_name = "application-{}".format(application.id) %}
<toggler inline-template>
<div class='accordion application-list-item'>
<header class='accordion__header row'>
<div class='application-list-item'>
<header class='row'>
<div class='col col-grow'>
<h3 class='icon-link accordion__title' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
<p class='accordion__description'>
<h3 class='icon-link' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
<p class=''>
{{ application.description }}
</p>
<div class='accordion__actions'>
<div class=''>
<a class='icon-link' href='{{ url_for("applications.settings", application_id=application.id) }}'>
<span>{{ "portfolios.applications.app_settings_text" | translate }}</span>
</a>
<div class='separator'></div>
{% set has_environments = 0 < (application.environments|length) %}
<a class='icon-link triangle-box' v-on:click="toggleSection('{{ section_name }}')" disabled="{{ not has_environments }}">
<a class='icon-link' v-on:click="toggleSection('{{ section_name }}')" disabled="{{ not has_environments }}">
<span>Environments ({{ application.environments|length }})</span>
{% if has_environments %}
<span v-if="selectedSection === '{{ section_name }}'">
@@ -59,7 +59,7 @@
<span v-else>
{{ Icon('caret_down') }}
</span>
<div class="triangle-up" v-if="selectedSection === '{{ section_name }}'"></div>
<div class="" v-if="selectedSection === '{{ section_name }}'"></div>
{% endif %}
</a>
</div>
@@ -67,7 +67,7 @@
</header>
<ul v-show="selectedSection === '{{ section_name }}'">
{% for environment in application.environments %}
<li class='accordion__item application-list-item__environment'>
<li class='application-list-item__environment'>
<div class='application-list-item__environment__name'>
<span>{{ environment.displayname }}</span>
</div>

89
templates/task_orders/index.html
View File

@@ -1,3 +1,4 @@
{% from "components/accordion.html" import Accordion %}
{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}
{% from "components/sticky_cta.html" import StickyCTA %}
@@ -6,90 +7,24 @@
{% block portfolio_content %}
{% macro TaskOrderButton(task_order, route, text="Edit", secondary=False) %}
<a href="{{ url_for(route, task_order_id=task_order.id) }}" class="usa-button {{ 'usa-button-secondary' if secondary else '' }}">
{{ text }}
</a>
{% endmacro %}
{% macro TaskOrderDateTime(dt, className="") %}
<local-datetime timestamp="{{ dt }}" format="MMMM D, YYYY" class="{{ className }}"></local-datetime>
{% endmacro %}
{% macro TaskOrderDate(task_order) %}
<span class="datetime">
<!-- Draft: {Begins, Began} start_date -->
<!-- Everything else: {Starts, Started} start_date | {Ends, Ended} end_date -->
{% if task_order.is_draft %}
{% if task_order.has_begun %}
Started on
{% else %}
Starts on
{% endif %}
{{ TaskOrderDateTime(task_order.time_created) }}
{% else %}
{% if task_order.has_begun %}
Began
{% else %}
Begins
{% endif %}
{{ TaskOrderDateTime(task_order.start_date) }}
{% endif %}
{% if not task_order.is_draft %}
&nbsp;&nbsp;|&nbsp;&nbsp;
{% if task_order.has_ended %}
Ended
{% else %}
Ends
{% endif %}
{{ TaskOrderDateTime(task_order.end_date) }}
{% endif %}
</span>
{% endmacro %}
{% macro TaskOrderActions(task_order) %}
<div class="task-order-card__buttons">
{% if task_order.is_draft and user_can(permissions.EDIT_TASK_ORDER_DETAILS) %}
{{ TaskOrderButton(task_order, "task_orders.edit")}}
{% elif task_order.is_expired %}
{{ TaskOrderButton(task_order, "task_orders.review_task_order", text="View") }}
{% elif task_order.is_unsigned %}
{% if user_can(permissions.EDIT_TASK_ORDER_DETAILS) %}
{{ TaskOrderButton(task_order, "task_orders.form_step_four_review", text="Sign", secondary=True) }}
{% endif %}
{{ TaskOrderButton(task_order, "task_orders.review_task_order", text="View") }}
{% endif %}
</div>
{% endmacro %}
{% macro TaskOrderList(task_orders, label='success') %}
<div class="task-order-list">
{% for task_order in task_orders %}
<div class="card task-order-card">
<div class="card__status">
<span class='label label--{{ label_colors[task_order.status] }}'>{{ task_order.display_status }}</span>
{{ TaskOrderDate(task_order) }}
<span class="card__status-spacer"></span>
<span class="card__button">
{{ TaskOrderActions(task_order) }}
</span>
</div>
<div class="card__header">
<h3>Task Order #{{ task_order.number }}</h3>
</div>
<div class="card__body">
{% macro TaskOrderList(task_orders, status) %}
{% set status = "All Task Orders" %}
<section class="task-order__list">
{% call Accordion(title=status, id=status, heading_tag="h4", content_tag="ul") %}
{% for task_order in task_orders %}
<li class="">
<h4><a href="{{ url_for('task_orders.review_task_order', task_order_id=task_order.id) }}">Task Order #{{ task_order.number }}</a></h4>
<b>Total amount: </b>{{ task_order.total_contract_amount | dollars }}
</div>
<div class="card__body">
<b>Obligated amount: </b>{{ task_order.total_obligated_funds | dollars }}
</div>
</div>
{% endfor %}
</div>
</li>
{% endfor %}
{% endcall %}
</section>
{% endmacro %}