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

Scroll list of portfolios in sidenav

Browse Source
This commit is contained in:
leigh-mil 2019-08-30 14:13:20 -04:00
parent 8b78b2a553
commit 11418aeb39
2 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
styles/elements/_sidenav.scss
View File

@ -8,24 +8,19 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
top: 68px; top: 68px;
width: 25rem;
&__toggler { &--minimized {
width: 25rem; @extend .sidenav-container;
width: 10rem;
&--minimized {
@extend .sidenav-container__toggler;
width: 10rem;
}
} }
&__fixed { &__fixed {
position: fixed; position: fixed;
overflow: scroll;
} }
.sidenav { .sidenav {
width: 25rem; width: 25rem;
overflow: scroll;
@include media($large-screen) { @include media($large-screen) {
margin: 0px; margin: 0px;
@ -54,17 +49,23 @@
} }
} }
ul { .sidenav__list--padded {
&.sidenav__list--padded { margin: (4 * $gap) 0;
margin: (4 * $gap) 0; position: fixed;
} overflow-y: scroll;
top: 98px;
bottom: 35px;
left: 0;
width: 25rem;
list-style: none; ul {
padding: 0; list-style: none;
padding: 0;
li { li {
margin: 0; margin: 0;
display: block; display: block;
}
} }
} }

30
templates/navigation/global_sidenav.html
View File

@ -2,9 +2,9 @@
{% from "components/sidenav_item.html" import SidenavItem %} {% from "components/sidenav_item.html" import SidenavItem %}
<div v-cloak is="SidenavToggler" class="sidenav-container"> <div v-cloak is="SidenavToggler">
<template slot-scope='props'> <template slot-scope='props'>
<div v-bind:class="{'sidenav-container__toggler': props.isVisible, 'sidenav-container__toggler--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="{'global-navigation': true, 'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}"> <div v-bind:class="{'global-navigation': true, 'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
<a href="#" v-on:click="props.toggle" class="sidenav__toggle"> <a href="#" v-on:click="props.toggle" class="sidenav__toggle">
@ -19,18 +19,20 @@
</a> </a>
<div v-if="props.isVisible"> <div v-if="props.isVisible">
<div class="sidenav__title">Portfolios</div> <div class="sidenav__title">Portfolios</div>
<ul class="sidenav__list--padded"> <div class="sidenav__list--padded">
{% if portfolios %} <ul>
{% for other_portfolio in portfolios|sort(attribute='name') %} {% if portfolios %}
{{ SidenavItem(other_portfolio.name, {% for other_portfolio in portfolios|sort(attribute='name') %}
href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id), {{ SidenavItem(other_portfolio.name,
active=(other_portfolio.id | string) == request.view_args.get('portfolio_id') href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
) }} active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
{% endfor %} ) }}
{% else %} {% endfor %}
<li><span class="sidenav__text">You have no portfolios yet</span></li> {% else %}
{% endif %} <li><span class="sidenav__text">You have no portfolios yet</span></li>
</ul> {% endif %}
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>