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