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

Always show side nav and update styling

Browse Source
This commit is contained in:
leigh-mil 2019-12-18 14:17:03 -05:00
parent 070cfda32c
commit 8166c05ec2
3 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
styles/elements/_sidenav.scss
View File

@ -1,8 +1,3 @@
@mixin sidenav__header {
padding: $gap ($gap * 2);
font-weight: bold;
}
.sidenav-container { .sidenav-container {
box-shadow: $box-shadow; box-shadow: $box-shadow;
overflow: hidden; overflow: hidden;
@ -26,34 +21,58 @@
margin: 0px; margin: 0px;
} }
&__title { &__header {
@include sidenav__header; padding: $gap ($gap * 2);
font-weight: bold;
border-bottom: 1px solid $color-gray-lighter;
font-size: $h3-font-size; &--minimized {
@extend .sidenav__header;
padding: $gap;
width: $sidenav-collapsed-width;
}
}
&__title {
font-size: $h6-font-size;
text-transform: uppercase; text-transform: uppercase;
width: 50%; width: 50%;
color: $color-gray-dark; color: $color-gray-dark;
opacity: 0.54; opacity: 0.54;
white-space: nowrap;
padding: $gap;
display: inline-flex;
align-items: center;
} }
&__toggle { &__toggle {
@include sidenav__header;
font-size: $small-font-size; font-size: $small-font-size;
line-height: 2.8rem; color: $color-blue;
float: right; text-decoration: none;
color: $color-blue-darker; padding: $gap;
display: inline-flex;
align-items: center;
.toggle-arrows { .toggle-arrows {
vertical-align: middle; vertical-align: middle;
@include icon-size(20);
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
} }
} }
ul { ul {
&.sidenav__list--padded { &.sidenav__list--padded {
margin-top: 4 * $gap; margin-top: 3 * $gap;
margin-bottom: $footer-height; margin-bottom: $footer-height;
padding-bottom: $gap; padding: 0 $gap ($gap * 2);
position: fixed; position: fixed;
overflow-y: scroll; overflow-y: scroll;
top: $topbar-height + $usa-banner-height + 4rem; top: $topbar-height + $usa-banner-height + 4rem;
@ -69,6 +88,7 @@
li { li {
margin: 0; margin: 0;
display: block; display: block;
color: $color-black-light;
} }
} }
@ -90,7 +110,7 @@
display: block; display: block;
padding: $gap ($gap * 2); padding: $gap ($gap * 2);
color: $color-black; color: $color-black;
text-decoration: underline; text-decoration: none;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

4
templates/base.html
View File

@ -21,9 +21,7 @@
{% include 'navigation/topbar.html' %} {% include 'navigation/topbar.html' %}
<div class='global-layout'> <div class='global-layout'>
{% if portfolios %} {% include 'navigation/global_sidenav.html' %}
{% include 'navigation/global_sidenav.html' %}
{% endif %}
<div class='global-panel-container'> <div class='global-panel-container'>
{% block sidenav %}{% endblock %} {% block sidenav %}{% endblock %}

34
templates/navigation/global_sidenav.html
View File

@ -7,29 +7,29 @@
<div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}"> <div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}">
<div class="sidenav-container__fixed"> <div class="sidenav-container__fixed">
<div v-bind:class="{'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}"> <div v-bind:class="{'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
<a href="#" v-on:click="props.toggle" class="sidenav__toggle"> <div v-bind:class="{'sidenav__header': props.isVisible, 'sidenav__header--minimized': !props.isVisible}" class="row">
<template v-if="props.isVisible"> <template v-if="props.isVisible">
{{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }} <span class="sidenav__title col col--grow">My Portfolios</span>
Hide <a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
{{ Icon('angle-double-left-solid', classes="toggle-arrows icon--primary") }}
<span>Hide</span>
</a>
</template> </template>
<template v-else> <template v-else>
Show <a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
{{ Icon('angle-double-right-solid', classes="toggle-arrows icon--blue") }} <span>Show</span>
{{ Icon('angle-double-right-solid', classes="toggle-arrows icon--primary") }}
</a>
</template> </template>
</a> </div>
<div v-if="props.isVisible"> <div v-if="props.isVisible">
<div class="sidenav__title">Portfolios</div>
<ul class="sidenav__list--padded"> <ul class="sidenav__list--padded">
{% if portfolios %} {% for other_portfolio in portfolios|sort(attribute='name') %}
{% for other_portfolio in portfolios|sort(attribute='name') %} {{ SidenavItem(other_portfolio.name,
{{ SidenavItem(other_portfolio.name, href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id), active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
active=(other_portfolio.id | string) == request.view_args.get('portfolio_id') ) }}
) }} {% endfor %}
{% endfor %}
{% else %}
<li><span class="sidenav__text">You have no portfolios yet</span></li>
{% endif %}
</ul> </ul>
</div> </div>
</div> </div>