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

Styling changes:

Browse Source 
- 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:
leigh-mil 2019-12-10 10:11:15 -05:00
parent bf6db87157
commit 78e7b1efe8
4 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
styles/elements/_accordions.scss
View File

@ -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;
} }
} }

80
templates/applications/index.html
View File

@ -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>

2
templates/components/accordion.html
View File

@ -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)"

2
templates/task_orders/index.html
View File

@ -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">