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

updates to portfolio landing page

Browse Source 
- darker gray for breadcrumbs and subheads
- larger font size for subheads
- updated toggle for environmnets list per-application
- more padding for application row
This commit is contained in:
dandds 2019-04-30 16:37:40 -04:00
parent 106fe17aa7
commit 1484473bd7
3 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
styles/components/_portfolio_layout.scss
View File

@ -34,10 +34,10 @@
.portfolio-breadcrumbs__home { .portfolio-breadcrumbs__home {
&.icon-link--disabled { &.icon-link--disabled {
color: $color-gray-medium; color: $color-gray-dark;
opacity: 1; opacity: 1;
.icon { .icon {
@include icon-color($color-gray-medium); @include icon-color($color-gray-dark);
} }
} }
} }
@ -153,8 +153,6 @@
color: $color-gray-dark; color: $color-gray-dark;
padding: $gap 0; padding: $gap 0;
text-transform: uppercase; text-transform: uppercase;
opacity: 0.54;
font-size: $small-font-size;
font-weight: bold; font-weight: bold;
margin-bottom: 3 * $gap; margin-bottom: 3 * $gap;
} }

5
styles/elements/_accordions.scss
View File

@ -54,11 +54,16 @@
.accordion__actions { .accordion__actions {
margin-top: $gap; margin-top: $gap;
margin-bottom: $gap * 0.5;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.icon-link { .icon-link {
font-size: $small-font-size; font-size: $small-font-size;
svg {
width: 1rem;
}
} }
.counter { .counter {

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

@ -54,21 +54,20 @@
<a <a
href="{{ url_for('applications.team', application_id=application.id) }}" href="{{ url_for('applications.team', application_id=application.id) }}"
class='icon-link'> class='icon-link'>
<span>{{ "portfolios.applications.team_text" | translate }}</span> <span>{{ "portfolios.applications.team_text" | translate }} ({{ application.num_users }})</span>
<span class='counter'>{{ application.num_users }}</span>
</a> </a>
<div class='separator'></div>
{% endif %} {% endif %}
</div> <a class='icon-link' v-on:click="toggleSection('{{ section_name }}')">
</div> <span>Environments ({{ application.environments|length }})</span>
<div class='col'>
<span class='icon-link toggle-link' v-on:click="toggleSection('{{ section_name }}')">
<span v-if="selectedSection === '{{ section_name }}'"> <span v-if="selectedSection === '{{ section_name }}'">
{{ Icon('minus') }} {{ Icon('caret_up') }}
</span> </span>
<span v-else> <span v-else>
{{ Icon('plus') }} {{ Icon('caret_down') }}
</span>
</span> </span>
</a>
</div>
</div> </div>
</header> </header>
<ul v-show="selectedSection === '{{ section_name }}'"> <ul v-show="selectedSection === '{{ section_name }}'">