Clean up code and use correct height on usa-banner

This commit is contained in:
leigh-mil 2019-08-30 14:28:37 -04:00
parent 11418aeb39
commit ef3654e014
5 changed files with 33 additions and 35 deletions

View File

@ -3,7 +3,7 @@
border-bottom: 1px solid $color-black; border-bottom: 1px solid $color-black;
height: 48px; height: 48px;
position: fixed; position: fixed;
top: 20px; top: 28px;
width: 100%; width: 100%;
z-index: 10; z-index: 10;

View File

@ -4,7 +4,7 @@
padding: ($gap / 2) $gap; padding: ($gap / 2) $gap;
z-index: 15; z-index: 15;
position: fixed; position: fixed;
height: 20px; height: 28px;
width: 100%; width: 100%;
img { img {

View File

@ -7,7 +7,7 @@
box-shadow: $box-shadow; box-shadow: $box-shadow;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
top: 68px; top: 76px;
width: 25rem; width: 25rem;
&--minimized { &--minimized {
@ -49,23 +49,23 @@
} }
} }
.sidenav__list--padded { ul {
margin: (4 * $gap) 0; &.sidenav__list--padded {
position: fixed; margin: ( 4 * $gap) 0;
overflow-y: scroll; position: fixed;
top: 98px; overflow-y: scroll;
bottom: 35px; top: 106px;
left: 0; bottom: 35px;
width: 25rem; left: 0;
width: 25rem;
}
ul { list-style: none;
list-style: none; padding: 0;
padding: 0;
li { li {
margin: 0; margin: 0;
display: block; display: block;
}
} }
} }

View File

@ -1,5 +1,5 @@
{% macro StickyCTA(text) -%} {% macro StickyCTA(text) -%}
<div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 68 }'> <div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
<div class="sticky-cta-container"> <div class="sticky-cta-container">
<div class="sticky-cta-text"> <div class="sticky-cta-text">
<h3>{{ text }}</h3> <h3>{{ text }}</h3>

View File

@ -2,11 +2,11 @@
{% from "components/sidenav_item.html" import SidenavItem %} {% from "components/sidenav_item.html" import SidenavItem %}
<div v-cloak is="SidenavToggler"> <div v-cloak is="SidenavToggler" class="global-navigation">
<template slot-scope='props'> <template slot-scope='props'>
<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="{'global-navigation': true, '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"> <a href="#" v-on:click="props.toggle" class="sidenav__toggle">
<template v-if="props.isVisible"> <template v-if="props.isVisible">
{{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }} {{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
@ -19,20 +19,18 @@
</a> </a>
<div v-if="props.isVisible"> <div v-if="props.isVisible">
<div class="sidenav__title">Portfolios</div> <div class="sidenav__title">Portfolios</div>
<div class="sidenav__list--padded"> <ul class="sidenav__list--padded">
<ul> {% if portfolios %}
{% 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 %}
{% else %} <li><span class="sidenav__text">You have no portfolios yet</span></li>
<li><span class="sidenav__text">You have no portfolios yet</span></li> {% endif %}
{% endif %} </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>