Styling changes:
- move `usa-accordion` class to wrap all accordion elements - remove background color form `accordion` class and move it to atat specific class `accordion__header` - create class names for styling elements instead of relying on element type
This commit is contained in:
parent
bf6db87157
commit
78e7b1efe8
@ -2,13 +2,12 @@
|
|||||||
@include shadow-panel;
|
@include shadow-panel;
|
||||||
margin: $gap * 3 0;
|
margin: $gap * 3 0;
|
||||||
max-width: $max-panel-width;
|
max-width: $max-panel-width;
|
||||||
background-color: $color-white;
|
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
padding: $gap * 2 $gap * 3;
|
padding: $gap * 2 $gap * 3;
|
||||||
|
background-color: $color-white;
|
||||||
|
|
||||||
h3,
|
&-text {
|
||||||
p {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -32,49 +32,51 @@
|
|||||||
) }}
|
) }}
|
||||||
|
|
||||||
{% else %}
|
{% else %}
|
||||||
{% for application in portfolio.applications|sort(attribute='name') %}
|
<div class="usa-accordion">
|
||||||
{% 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">
|
{% set title = "Environments ({})".format(application.environments|length) %}
|
||||||
<div class="accordion__header">
|
<div class="accordion">
|
||||||
<h3>
|
<div class="accordion__header">
|
||||||
<a href='{{ url_for("applications.settings", application_id=application.id) }}'>
|
<h3 class="accordion__header-text">
|
||||||
{{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }}
|
<a href='{{ url_for("applications.settings", application_id=application.id) }}'>
|
||||||
</a>
|
{{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }}
|
||||||
</h3>
|
</a>
|
||||||
<p>
|
</h3>
|
||||||
{{ application.description }}
|
<p class="accordion__header-text">
|
||||||
</p>
|
{{ application.description }}
|
||||||
</div>
|
</p>
|
||||||
{% call Accordion(
|
</div>
|
||||||
title=title,
|
{% call Accordion(
|
||||||
id=section_name,
|
title=title,
|
||||||
heading_tag="h4"
|
id=section_name,
|
||||||
) %}
|
heading_tag="h4"
|
||||||
{% for environment in application.environments %}
|
) %}
|
||||||
{% set env_access = environment_access[environment.id] %}
|
{% for environment in application.environments %}
|
||||||
<div class="accordion__content--list-item">
|
{% set env_access = environment_access[environment.id] %}
|
||||||
<div class="row">
|
<div class="accordion__content--list-item">
|
||||||
<div class="col col--grow">
|
<div class="row">
|
||||||
|
<div class="col col--grow">
|
||||||
|
{% if env_access %}
|
||||||
|
<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 env_access %}
|
{% if env_access %}
|
||||||
<a href='{{ url_for("applications.access_environment", environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer'>
|
<div class="col">
|
||||||
{{ environment.displayname }} {{ Icon('link', classes='icon--medium icon--primary') }}
|
{{ env_access }}
|
||||||
</a>
|
</div>
|
||||||
{% else %}
|
|
||||||
{{ environment.displayname }}
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% if env_access %}
|
|
||||||
<div class="col">
|
|
||||||
{{ env_access }}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endcall %}
|
||||||
{% endcall %}
|
</div>
|
||||||
</div>
|
{% endfor %}
|
||||||
{% endfor %}
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
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 {{ wrapper_classes }}">
|
<{{wrapper_tag}} class="{{ wrapper_classes }}">
|
||||||
<{{heading_tag}} class="accordion__button {{ heading_classes }}">
|
<{{heading_tag}} class="accordion__button {{ heading_classes }}">
|
||||||
<button
|
<button
|
||||||
v-on:click="toggle($event)"
|
v-on:click="toggle($event)"
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
{% macro TaskOrderList(task_orders, status) %}
|
{% macro TaskOrderList(task_orders, status) %}
|
||||||
{% set status = "All Task Orders" %}
|
{% set status = "All Task Orders" %}
|
||||||
<div class="accordion">
|
<div class="accordion usa-accordion">
|
||||||
{% call Accordion(title=status, id=status, heading_tag="h4") %}
|
{% call Accordion(title=status, id=status, heading_tag="h4") %}
|
||||||
{% for task_order in task_orders %}
|
{% for task_order in task_orders %}
|
||||||
<div class="accordion__content--list-item">
|
<div class="accordion__content--list-item">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user