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

Allow collapsing/expanding list of environments

Browse Source
This commit is contained in:
Patrick Smith 2019-02-07 18:45:25 -05:00
parent 9afa449bdf
commit 8c79eb3925
3 changed files with 48 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/icons/minus.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

7
styles/components/_portfolio_layout.scss
View File

@ -113,6 +113,13 @@
} }
.application-list { .application-list {
.toggle-link {
background-color: $color-blue-light;
.icon {
margin: $gap / 2;
}
}
.application-list-item { .application-list-item {
border-radius: 5px; border-radius: 5px;
box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5); box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5);

15
templates/portfolios/applications/index.html
View File

@ -34,7 +34,8 @@
<div class='application-list'> <div class='application-list'>
{% for application in portfolio.applications %} {% for application in portfolio.applications %}
<div v-cloak class='accordian application-list-item'> <div is='toggler' default-visible v-cloak class='accordian application-list-item'>
<template slot-scope='props'>
<header class='accordian__header row'> <header class='accordian__header row'>
<div class='col col-grow'> <div class='col col-grow'>
<h3 class='accordian__title'>{{ application.name }}</h3> <h3 class='accordian__title'>{{ application.name }}</h3>
@ -53,10 +54,17 @@
</div> </div>
</div> </div>
<div class='col'> <div class='col'>
<a href='#' class='icon-link'>{{ Icon('plus') }}</a> <a v-on:click="props.toggle" href='#' class='icon-link toggle-link'>
<template v-if="props.isVisible">
{{ Icon('minus') }}
</template>
<template v-else>
{{ Icon('plus') }}
</template>
</a>
</div> </div>
</header> </header>
<ul> <ul v-if="props.isVisible">
{% for environment in application.environments %} {% for environment in application.environments %}
<li class='accordian__item application-list-item__environment'> <li class='accordian__item application-list-item__environment'>
<div class='application-list-item__environment__name'> <div class='application-list-item__environment__name'>
@ -70,6 +78,7 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</template>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>