From d99436546008224f9341ae5d7f4dcf1d8146e175 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Dec 2019 11:48:05 -0500 Subject: [PATCH 1/8] 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. --- styles/elements/_accordions.scss | 148 ++---------------------------- styles/sections/_task_order.scss | 27 +----- templates/applications/index.html | 16 ++-- templates/task_orders/index.html | 89 +++--------------- 4 files changed, 32 insertions(+), 248 deletions(-) diff --git a/styles/elements/_accordions.scss b/styles/elements/_accordions.scss index b81a7c6e..f5d89c11 100644 --- a/styles/elements/_accordions.scss +++ b/styles/elements/_accordions.scss @@ -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); - } } diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 26bb4c79..2e093b37 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -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; +} diff --git a/templates/applications/index.html b/templates/applications/index.html index 4ab303e4..5e920fd0 100644 --- a/templates/applications/index.html +++ b/templates/applications/index.html @@ -37,20 +37,20 @@ {% set section_name = "application-{}".format(application.id) %} -
-
+
+
-

{{ application.name }}

-

+

{{ application.name }}

+

{{ application.description }}

-
+ @@ -67,7 +67,7 @@
    {% for environment in application.environments %} -
  • +
  • {{ environment.displayname }}
    diff --git a/templates/task_orders/index.html b/templates/task_orders/index.html index b737f3b9..24435dd5 100644 --- a/templates/task_orders/index.html +++ b/templates/task_orders/index.html @@ -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) %} - - {{ text }} - -{% endmacro %} - {% macro TaskOrderDateTime(dt, className="") %} {% endmacro %} -{% macro TaskOrderDate(task_order) %} - - - - {% 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 %} - -{% endmacro %} - -{% macro TaskOrderActions(task_order) %} -
    - {% 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 %} -
    -{% endmacro %} - -{% macro TaskOrderList(task_orders, label='success') %} -
    - {% for task_order in task_orders %} -
    -
    - {{ task_order.display_status }} - {{ TaskOrderDate(task_order) }} - - - {{ TaskOrderActions(task_order) }} - -
    -
    -

    Task Order #{{ task_order.number }}

    -
    -
    +{% macro TaskOrderList(task_orders, status) %} + {% set status = "All Task Orders" %} +
    + {% call Accordion(title=status, id=status, heading_tag="h4", content_tag="ul") %} + {% for task_order in task_orders %} +
  • +

    Task Order #{{ task_order.number }}

    Total amount: {{ task_order.total_contract_amount | dollars }} -
    • -
    Obligated amount: {{ task_order.total_obligated_funds | dollars }} -
    -
    - {% endfor %} -
    +
    • + {% endfor %} + {% endcall %} + {% endmacro %} From 1165b60fce25c2f92c371d683a389ce682f7aab8 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Dec 2019 14:31:37 -0500 Subject: [PATCH 2/8] Finalize styling for Task Order index page. --- styles/core/_grid.scss | 3 +-- styles/core/_variables.scss | 1 + styles/elements/_accordions.scss | 11 ++++------ styles/sections/_task_order.scss | 24 ++++++++++++++++++++ templates/components/accordion.html | 8 +++---- templates/task_orders/index.html | 34 ++++++++++++++++++++++++----- 6 files changed, 62 insertions(+), 19 deletions(-) diff --git a/styles/core/_grid.scss b/styles/core/_grid.scss index ff07cca6..d060198d 100644 --- a/styles/core/_grid.scss +++ b/styles/core/_grid.scss @@ -40,8 +40,7 @@ } &.col--grow { - flex: 1; - flex-grow: 1; + flex: 1 auto; padding-right: $spacing-small; } diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index dc609fe4..fe81b498 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -16,6 +16,7 @@ $footer-height: 5rem; $usa-banner-height: 2.8rem; $sidenav-expanded-width: 25rem; $sidenav-collapsed-width: 10rem; +$max-panel-width: 80rem; /* * USWDS Variables diff --git a/styles/elements/_accordions.scss b/styles/elements/_accordions.scss index f5d89c11..560d246c 100644 --- a/styles/elements/_accordions.scss +++ b/styles/elements/_accordions.scss @@ -1,14 +1,11 @@ .accordion { + @include shadow-panel; + &__header { margin: 0; } - ul { - margin: 0; - list-style: none; - - li { - background-color: $color-white; - } + &__content { + padding: 0 ($gap * 3) $gap; } } diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 2e093b37..3ef5c6e4 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -189,4 +189,28 @@ .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; + } + } } diff --git a/templates/components/accordion.html b/templates/components/accordion.html index 3fd38e01..1ca1cd22 100644 --- a/templates/components/accordion.html +++ b/templates/components/accordion.html @@ -8,8 +8,8 @@ content_tag="div", content_classes="") %} - <{{wrapper_tag}} class="{{ wrapper_classes }}"> - <{{heading_tag}} class="{{ heading_classes }}"> + <{{wrapper_tag}} class="usa-accordion accordion {{ wrapper_classes }}"> + <{{heading_tag}} class="accordion__header {{ heading_classes }}">
+ {% endfor %} + {% endcall %} {% endmacro %} From 7671269b7f1278ce6ce1299a674cb71a486e04bb Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Fri, 6 Dec 2019 15:12:16 -0500 Subject: [PATCH 4/8] Use Accordion macro on applications index page --- styles/elements/_accordions.scss | 17 ++++- styles/elements/_icons.scss | 4 ++ templates/applications/index.html | 97 +++++++++++++---------------- templates/components/accordion.html | 14 ++--- templates/task_orders/index.html | 60 +++++++++--------- 5 files changed, 101 insertions(+), 91 deletions(-) diff --git a/styles/elements/_accordions.scss b/styles/elements/_accordions.scss index db005d0a..1413f1f2 100644 --- a/styles/elements/_accordions.scss +++ b/styles/elements/_accordions.scss @@ -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 { diff --git a/styles/elements/_icons.scss b/styles/elements/_icons.scss index 13e958b1..c7a43414 100644 --- a/styles/elements/_icons.scss +++ b/styles/elements/_icons.scss @@ -90,4 +90,8 @@ padding: 2px; } } + + &--primary { + @include icon-color($color-primary); + } } diff --git a/templates/applications/index.html b/templates/applications/index.html index 5e920fd0..0e765e14 100644 --- a/templates/applications/index.html +++ b/templates/applications/index.html @@ -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 %} - -
- {% for application in portfolio.applications|sort(attribute='name') %} - {% set section_name = "application-{}".format(application.id) %} - - -
-
-
-

{{ application.name }}

-

- {{ application.description }} -

- -
-
- + {% for application in portfolio.applications|sort(attribute='name') %} + {% set section_name = "application-{}".format(application.id) %} + {% set title = "Environments ({})".format(application.environments|length) %} +
+
+

+ + {{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }} + +

+

+ {{ application.description }} +

- - {% endfor %} -
- + {% call Accordion( + title=title, + id=section_name, + heading_tag="h4" + ) %} + {% for environment in application.environments %} + {{ environment.id }} +
+
+
+ {% if g.current_user in environment.users %} + + {{ environment.displayname }} {{ Icon('link', classes='icon--medium icon--primary') }} + + {% else %} + {{ environment.displayname }} + {% endif %} +
+ {% if g.current_user in environment.users %} +
+ Your env role here! +
+ {% endif %} +
+
+ {% endfor %} + {% endcall %} +
+ {% endfor %} {% endif %}
diff --git a/templates/components/accordion.html b/templates/components/accordion.html index 1ca1cd22..1cccb115 100644 --- a/templates/components/accordion.html +++ b/templates/components/accordion.html @@ -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="") %} - <{{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 }}">