Styling updates for Task Order index page:
- 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
parent
9bdbe04829
commit
d994365460
@ -1,148 +1,14 @@
|
||||
.triangle-box {
|
||||
position: relative;
|
||||
|
||||
.triangle-up {
|
||||
$triangle-size: $gap * 1.5;
|
||||
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $triangle-size solid transparent;
|
||||
border-right: $triangle-size solid transparent;
|
||||
border-bottom: $triangle-size solid $color-blue-light;
|
||||
bottom: -4px;
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion {
|
||||
@include block-list;
|
||||
|
||||
box-shadow: 0 4px 10px 0 rgba(193, 193, 193, 0.5);
|
||||
margin-bottom: 6 * $gap;
|
||||
|
||||
.icon-link {
|
||||
margin: (-$gap) 0;
|
||||
}
|
||||
|
||||
.icon-link,
|
||||
.label {
|
||||
&:first-child {
|
||||
margin-left: -$gap;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: -$gap;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
@include block-list-header;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
border-top: 3px solid $color-blue;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 4px 0 rgba(216, 218, 222, 0.58);
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
&.row {
|
||||
background: $color-white;
|
||||
li {
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include block-list__title;
|
||||
|
||||
color: $color-blue;
|
||||
|
||||
@include h3;
|
||||
|
||||
&.icon-link {
|
||||
margin: 0;
|
||||
display: block;
|
||||
padding: 0 $gap;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include block-list__description;
|
||||
|
||||
font-style: italic;
|
||||
font-size: $small-font-size;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
margin-top: $gap;
|
||||
margin-bottom: $gap * 0.5;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.icon-link {
|
||||
font-size: $small-font-size;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
@include block-list__footer;
|
||||
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include block-list-item;
|
||||
|
||||
opacity: 0.75;
|
||||
background-color: $color-blue-light;
|
||||
border-bottom: 1px solid rgba($color-gray-light, 0.5);
|
||||
|
||||
&--selectable {
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@include ie-only {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> label {
|
||||
@include block-list-selectable-label;
|
||||
}
|
||||
}
|
||||
|
||||
> label {
|
||||
@include block-list-selectable-label;
|
||||
}
|
||||
|
||||
input:checked {
|
||||
+ label {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@include ie-only {
|
||||
dl {
|
||||
width: 100%;
|
||||
padding-left: $gap * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
background-color: $color-cool-blue-light;
|
||||
color: $color-white;
|
||||
border-radius: 2px;
|
||||
padding: ($gap / 2) $gap;
|
||||
margin-left: $gap;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 1px solid $color-gray-medium;
|
||||
opacity: 0.75;
|
||||
margin: 0 (0.5 * $gap);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,3 @@
|
||||
.task-order-list {
|
||||
margin-top: 6 * $gap;
|
||||
}
|
||||
|
||||
.task-order-card {
|
||||
&__buttons .usa-button {
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
&__buttons .usa-button-secondary {
|
||||
min-width: 14rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: $small-font-size;
|
||||
margin-right: 2 * $gap;
|
||||
min-width: 7rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.task-order {
|
||||
margin-top: $gap * 4;
|
||||
width: 900px;
|
||||
@ -207,3 +185,8 @@
|
||||
padding-bottom: $gap * 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
.task-order__list {
|
||||
margin-top: $gap;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
|
|
||||
|
||||
{% 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 %}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user