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

Use Accordion macro on applications index page

Browse Source
This commit is contained in:
leigh-mil 2019-12-06 15:12:16 -05:00
parent 0166e2fbc7
commit 7671269b7f
5 changed files with 101 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
styles/elements/_accordions.scss
View File

@ -1,10 +1,18 @@
.accordion { .accordion {
@include shadow-panel; @include shadow-panel;
margin-top: $gap; margin: $gap * 3 0;
margin-bottom: $gap;
max-width: $max-panel-width; max-width: $max-panel-width;
&__header { &__header {
padding: $gap * 2 $gap * 3;
h3,
p {
margin: 0;
}
}
&__button {
margin: 0; margin: 0;
} }
@ -13,6 +21,7 @@
&--list-item { &--list-item {
border-bottom: 1px solid $color-gray-lightest; border-bottom: 1px solid $color-gray-lightest;
padding: $gap 0;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
@ -21,6 +30,10 @@
.col { .col {
padding-right: $gap * 2; padding-right: $gap * 2;
&:last-child {
padding-right: 0;
}
} }
h4 { h4 {

4
styles/elements/_icons.scss
View File

@ -90,4 +90,8 @@
padding: 2px; padding: 2px;
} }
} }
&--primary {
@include icon-color($color-primary);
}
} }

97
templates/applications/index.html
View File

@ -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/empty_state.html" import EmptyState %}
{% from "components/sticky_cta.html" import StickyCTA %} {% from "components/sticky_cta.html" import StickyCTA %}
{% from "components/icon.html" import Icon %}
{% extends "portfolios/base.html" %} {% extends "portfolios/base.html" %}
@ -31,59 +32,49 @@
) }} ) }}
{% else %} {% else %}
{% for application in portfolio.applications|sort(attribute='name') %}
<div class='application-list'> {% set section_name = "application-{}".format(application.id) %}
{% for application in portfolio.applications|sort(attribute='name') %} {% set title = "Environments ({})".format(application.environments|length) %}
{% set section_name = "application-{}".format(application.id) %} <div class="accordion">
<div class="accordion__header">
<toggler inline-template> <h3>
<div class='application-list-item'> <a href='{{ url_for("applications.settings", application_id=application.id) }}'>
<header class='row'> {{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }}
<div class='col col-grow'> </a>
<h3 class='icon-link' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3> </h3>
<p class=''> <p>
{{ application.description }} {{ application.description }}
</p> </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>
</div> </div>
</toggler> {% call Accordion(
{% endfor %} title=title,
</div> 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 %} {% endif %}
</div> </div>

14
templates/components/accordion.html
View File

@ -1,17 +1,17 @@
{% macro Accordion( {% macro Accordion(
title, title,
id, id,
wrapper_tag="div", wrapper_tag="div",
wrapper_classes="", wrapper_classes="",
heading_tag="h2", heading_tag="h2",
heading_classes="", heading_classes="",
content_tag="div", content_tag="div",
content_classes="") %} content_classes="") %}
<accordion v-cloak inline-template> <accordion v-cloak inline-template>
<{{wrapper_tag}} class="usa-accordion accordion {{ wrapper_classes }}"> <{{wrapper_tag}} class="usa-accordion {{ wrapper_classes }}">
<{{heading_tag}} class="accordion__header {{ heading_classes }}"> <{{heading_tag}} class="accordion__button {{ heading_classes }}">
<button <button
v-on:click="toggle($event)" v-on:click="toggle($event)"
class="usa-accordion-button" class="usa-accordion-button"
aria-controls="{{ id }}" aria-controls="{{ id }}"
v-bind:aria-expanded= "isVisible ? 'true' : 'false'" v-bind:aria-expanded= "isVisible ? 'true' : 'false'"
@ -27,4 +27,4 @@
</{{content_tag}}> </{{content_tag}}>
</{{wrapper_tag}}> </{{wrapper_tag}}>
</accordion> </accordion>
{% endmacro %} {% endmacro %}

60
templates/task_orders/index.html
View File

@ -14,37 +14,39 @@
{% macro TaskOrderList(task_orders, status) %} {% macro TaskOrderList(task_orders, status) %}
{% set status = "All Task Orders" %} {% set status = "All Task Orders" %}
{% call Accordion(title=status, id=status, heading_tag="h4") %} <div class="accordion">
{% for task_order in task_orders %} {% call Accordion(title=status, id=status, heading_tag="h4") %}
<div class="accordion__content--list-item"> {% for task_order in task_orders %}
<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="accordion__content--list-item">
<div class="row"> <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="col col--grow"> <div class="row">
<h5> <div class="col col--grow">
Current Period of Performance <h5>
</h5> Current Period of Performance
<p> </h5>
{{ task_order.start_date | formattedDate(formatter="%b %d, %Y") }} <p>
- {{ task_order.start_date | formattedDate(formatter="%b %d, %Y") }}
{{ task_order.end_date | formattedDate(formatter="%b %d, %Y") }} -
</p> {{ task_order.end_date | formattedDate(formatter="%b %d, %Y") }}
</div> </p>
<div class="col col--grow"> </div>
<h5>Total Value</h5> <div class="col col--grow">
<p>{{ task_order.total_contract_amount | dollars }}</p> <h5>Total Value</h5>
</div> <p>{{ task_order.total_contract_amount | dollars }}</p>
<div class="col col--grow"> </div>
<h5>Total Obligated</h5> <div class="col col--grow">
<p>{{ task_order.total_obligated_funds | dollars }}</p> <h5>Total Obligated</h5>
</div> <p>{{ task_order.total_obligated_funds | dollars }}</p>
<div class="col col--grow"> </div>
<h5>Total Expended</h5> <div class="col col--grow">
<p>$0</p> <h5>Total Expended</h5>
<p>$0</p>
</div>
</div> </div>
</div> </div>
</div> {% endfor %}
{% endfor %} {% endcall %}
{% endcall %} </div>
{% endmacro %} {% endmacro %}