Use Accordion macro on applications index page
This commit is contained in:
leigh-mil
parent
0166e2fbc7
commit
7671269b7f
@ -1,10 +1,18 @@
|
||||
.accordion {
|
||||
@include shadow-panel;
|
||||
margin-top: $gap;
|
||||
margin-bottom: $gap;
|
||||
margin: $gap * 3 0;
|
||||
max-width: $max-panel-width;
|
||||
|
||||
&__header {
|
||||
padding: $gap * 2 $gap * 3;
|
||||
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -13,6 +21,7 @@
|
||||
|
||||
&--list-item {
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
padding: $gap 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
@ -21,6 +30,10 @@
|
||||
|
||||
.col {
|
||||
padding-right: $gap * 2;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
||||
@ -90,4 +90,8 @@
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
@include icon-color($color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/accordion.html" import Accordion %}
|
||||
{% from "components/empty_state.html" import EmptyState %}
|
||||
{% from "components/sticky_cta.html" import StickyCTA %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% extends "portfolios/base.html" %}
|
||||
|
||||
@ -31,59 +32,49 @@
|
||||
) }}
|
||||
|
||||
{% else %}
|
||||
|
||||
<div class='application-list'>
|
||||
{% for application in portfolio.applications|sort(attribute='name') %}
|
||||
{% set section_name = "application-{}".format(application.id) %}
|
||||
|
||||
<toggler inline-template>
|
||||
<div class='application-list-item'>
|
||||
<header class='row'>
|
||||
<div class='col col-grow'>
|
||||
<h3 class='icon-link' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
|
||||
<p class=''>
|
||||
{{ application.description }}
|
||||
</p>
|
||||
<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' 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 }}'">
|
||||
{{ Icon('caret_up') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ Icon('caret_down') }}
|
||||
</span>
|
||||
<div class="" v-if="selectedSection === '{{ section_name }}'"></div>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<ul v-show="selectedSection === '{{ section_name }}'">
|
||||
{% for environment in application.environments %}
|
||||
<li class='application-list-item__environment'>
|
||||
<div class='application-list-item__environment__name'>
|
||||
<span>{{ environment.displayname }}</span>
|
||||
</div>
|
||||
{% if g.current_user in environment.users %}
|
||||
<a href='{{ url_for("applications.access_environment", environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
|
||||
<span>{{ "portfolios.applications.csp_console_text" | translate }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% for application in portfolio.applications|sort(attribute='name') %}
|
||||
{% set section_name = "application-{}".format(application.id) %}
|
||||
{% set title = "Environments ({})".format(application.environments|length) %}
|
||||
<div class="accordion">
|
||||
<div class="accordion__header">
|
||||
<h3>
|
||||
<a href='{{ url_for("applications.settings", application_id=application.id) }}'>
|
||||
{{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }}
|
||||
</a>
|
||||
</h3>
|
||||
<p>
|
||||
{{ application.description }}
|
||||
</p>
|
||||
</div>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% call Accordion(
|
||||
title=title,
|
||||
id=section_name,
|
||||
heading_tag="h4"
|
||||
) %}
|
||||
{% for environment in application.environments %}
|
||||
{{ environment.id }}
|
||||
<div class="accordion__content--list-item">
|
||||
<div class="row">
|
||||
<div class="col col--grow">
|
||||
{% if g.current_user in environment.users %}
|
||||
<a href='{{ url_for("applications.access_environment", environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer'>
|
||||
{{ environment.displayname }} {{ Icon('link', classes='icon--medium icon--primary') }}
|
||||
</a>
|
||||
{% else %}
|
||||
{{ environment.displayname }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if g.current_user in environment.users %}
|
||||
<div class="col">
|
||||
Your env role here!
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endcall %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{% macro Accordion(
|
||||
title,
|
||||
id,
|
||||
wrapper_tag="div",
|
||||
title,
|
||||
id,
|
||||
wrapper_tag="div",
|
||||
wrapper_classes="",
|
||||
heading_tag="h2",
|
||||
heading_classes="",
|
||||
content_tag="div",
|
||||
content_classes="") %}
|
||||
<accordion v-cloak inline-template>
|
||||
<{{wrapper_tag}} class="usa-accordion accordion {{ wrapper_classes }}">
|
||||
<{{heading_tag}} class="accordion__header {{ heading_classes }}">
|
||||
<{{wrapper_tag}} class="usa-accordion {{ wrapper_classes }}">
|
||||
<{{heading_tag}} class="accordion__button {{ heading_classes }}">
|
||||
<button
|
||||
v-on:click="toggle($event)"
|
||||
v-on:click="toggle($event)"
|
||||
class="usa-accordion-button"
|
||||
aria-controls="{{ id }}"
|
||||
v-bind:aria-expanded= "isVisible ? 'true' : 'false'"
|
||||
@ -27,4 +27,4 @@
|
||||
</{{content_tag}}>
|
||||
</{{wrapper_tag}}>
|
||||
</accordion>
|
||||
{% endmacro %}
|
||||
{% endmacro %}
|
||||
|
||||
@ -14,37 +14,39 @@
|
||||
|
||||
{% macro TaskOrderList(task_orders, status) %}
|
||||
{% set status = "All Task Orders" %}
|
||||
{% call Accordion(title=status, id=status, heading_tag="h4") %}
|
||||
{% for task_order in task_orders %}
|
||||
<div class="accordion__content--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>
|
||||
<div class="row">
|
||||
<div class="col col--grow">
|
||||
<h5>
|
||||
Current Period of Performance
|
||||
</h5>
|
||||
<p>
|
||||
{{ task_order.start_date | formattedDate(formatter="%b %d, %Y") }}
|
||||
-
|
||||
{{ task_order.end_date | formattedDate(formatter="%b %d, %Y") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
<h5>Total Value</h5>
|
||||
<p>{{ task_order.total_contract_amount | dollars }}</p>
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
<h5>Total Obligated</h5>
|
||||
<p>{{ task_order.total_obligated_funds | dollars }}</p>
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
<h5>Total Expended</h5>
|
||||
<p>$0</p>
|
||||
<div class="accordion">
|
||||
{% call Accordion(title=status, id=status, heading_tag="h4") %}
|
||||
{% for task_order in task_orders %}
|
||||
<div class="accordion__content--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--primary" ) }}</a></h4>
|
||||
<div class="row">
|
||||
<div class="col col--grow">
|
||||
<h5>
|
||||
Current Period of Performance
|
||||
</h5>
|
||||
<p>
|
||||
{{ task_order.start_date | formattedDate(formatter="%b %d, %Y") }}
|
||||
-
|
||||
{{ task_order.end_date | formattedDate(formatter="%b %d, %Y") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
<h5>Total Value</h5>
|
||||
<p>{{ task_order.total_contract_amount | dollars }}</p>
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
<h5>Total Obligated</h5>
|
||||
<p>{{ task_order.total_obligated_funds | dollars }}</p>
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
<h5>Total Expended</h5>
|
||||
<p>$0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endcall %}
|
||||
{% endfor %}
|
||||
{% endcall %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user