leigh-mil
GitHub
commit
104a1d189c
@ -34,8 +34,12 @@ export default {
|
||||
mixins: [FormMixin],
|
||||
directives: {
|
||||
sticky: {
|
||||
inserted: el => {
|
||||
stickybits(el)
|
||||
inserted: (el, binding) => {
|
||||
var customAttributes
|
||||
if (binding.expression) {
|
||||
customAttributes = JSON.parse(binding.expression)
|
||||
}
|
||||
stickybits(el, customAttributes)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -130,8 +130,12 @@ const app = new Vue({
|
||||
|
||||
directives: {
|
||||
sticky: {
|
||||
inserted: el => {
|
||||
stickybits(el)
|
||||
inserted: (el, binding) => {
|
||||
var customAttributes
|
||||
if (binding.expression) {
|
||||
customAttributes = JSON.parse(binding.expression)
|
||||
}
|
||||
stickybits(el, customAttributes)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -19,15 +19,18 @@ body {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-grow: 1;
|
||||
margin-bottom: $footer-height;
|
||||
padding-bottom: $footer-height * 2.5;
|
||||
|
||||
.global-panel-container {
|
||||
margin: $gap;
|
||||
flex-grow: 1;
|
||||
-ms-flex-negative: 1;
|
||||
top: $usa-banner-height + $topbar-height;
|
||||
position: relative;
|
||||
|
||||
@include media($medium-screen) {
|
||||
margin: $gap * 2;
|
||||
top: $usa-banner-height + $topbar-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.global-navigation {
|
||||
background-color: $color-white;
|
||||
height: auto;
|
||||
|
||||
.sidenav__link {
|
||||
padding-right: $gap * 2;
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
.sticky-cta {
|
||||
margin-left: -$gap * 4;
|
||||
margin-right: -$gap * 5;
|
||||
z-index: 10;
|
||||
|
||||
@include media($medium-screen) {
|
||||
margin-left: -$gap * 5;
|
||||
margin-right: -$gap * 3;
|
||||
margin-right: -$gap * 5;
|
||||
}
|
||||
|
||||
&.js-is-sticky {
|
||||
width: 80.8%;
|
||||
width: calc(100% - 25rem);
|
||||
top: $usa-banner-height + $topbar-height;
|
||||
}
|
||||
|
||||
.sticky-cta-container {
|
||||
@ -18,7 +20,7 @@
|
||||
background-color: $color-gray-lightest;
|
||||
border-top: 1px solid $color-gray-lighter;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
padding: 0 $gap * 2 0 $gap * 5;
|
||||
padding: 0 $gap * 5 0 $gap * 5;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.usa-button {
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
.topbar {
|
||||
background-color: $color-blue-darkest;
|
||||
border-bottom: 1px solid $color-black;
|
||||
height: $topbar-height;
|
||||
position: fixed;
|
||||
top: $usa-banner-height;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
&__navigation {
|
||||
display: flex;
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
align-items: center;
|
||||
padding: ($gap / 2) $gap;
|
||||
z-index: 15;
|
||||
position: fixed;
|
||||
height: $usa-banner-height;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
flex-grow: 0;
|
||||
|
||||
@ -13,6 +13,9 @@ $hover-transition-time: 0.2s;
|
||||
$search-input-height: 4.4rem;
|
||||
$search-button-width: 5rem;
|
||||
$footer-height: 5rem;
|
||||
$usa-banner-height: 2.8rem;
|
||||
$sidenav-expanded-width: 25rem;
|
||||
$sidenav-collapsed-width: 10rem;
|
||||
|
||||
/*
|
||||
* USWDS Variables
|
||||
|
||||
@ -4,20 +4,28 @@
|
||||
}
|
||||
|
||||
.sidenav-container {
|
||||
position: relative;
|
||||
box-shadow: $box-shadow;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: $topbar-height + $usa-banner-height;
|
||||
width: $sidenav-expanded-width;
|
||||
|
||||
.global-navigation.sidenav {
|
||||
height: 100%;
|
||||
&--minimized {
|
||||
@extend .sidenav-container;
|
||||
width: $sidenav-collapsed-width;
|
||||
}
|
||||
|
||||
&__fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
width: $sidenav-expanded-width;
|
||||
|
||||
@include media($large-screen) {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
width: 25rem;
|
||||
|
||||
&__title {
|
||||
@include sidenav__header;
|
||||
|
||||
@ -43,7 +51,16 @@
|
||||
|
||||
ul {
|
||||
&.sidenav__list--padded {
|
||||
margin: (4 * $gap) 0;
|
||||
margin-top: 4 * $gap;
|
||||
margin-bottom: $footer-height;
|
||||
padding-bottom: $gap;
|
||||
position: fixed;
|
||||
overflow-y: scroll;
|
||||
top: $topbar-height + $usa-banner-height + 4rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: $sidenav-expanded-width;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
list-style: none;
|
||||
@ -182,7 +199,7 @@
|
||||
&--minimized {
|
||||
@extend .sidenav;
|
||||
|
||||
width: 10rem;
|
||||
width: $sidenav-collapsed-width;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{% macro StickyCTA(text) -%}
|
||||
<div class="sticky-cta" v-sticky="{ stickyTop: 2 }">
|
||||
<div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
|
||||
<div class="sticky-cta-container">
|
||||
<div class="sticky-cta-text">
|
||||
<h3>{{ text }}</h3>
|
||||
|
||||
@ -2,33 +2,37 @@
|
||||
{% from "components/sidenav_item.html" import SidenavItem %}
|
||||
|
||||
|
||||
<div v-cloak is="SidenavToggler" class="sidenav-container">
|
||||
<div v-cloak is="SidenavToggler" class="global-navigation">
|
||||
<template slot-scope='props'>
|
||||
<div v-bind:class="{'global-navigation': true, 'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
|
||||
<a href="#" v-on:click="props.toggle" class="sidenav__toggle">
|
||||
<template v-if="props.isVisible">
|
||||
{{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
|
||||
Hide
|
||||
</template>
|
||||
<template v-else>
|
||||
Show
|
||||
{{ Icon('angle-double-right-solid', classes="toggle-arrows icon--blue") }}
|
||||
</template>
|
||||
</a>
|
||||
<div v-if="props.isVisible">
|
||||
<div class="sidenav__title">Portfolios</div>
|
||||
<ul class="sidenav__list--padded">
|
||||
{% if portfolios %}
|
||||
{% for other_portfolio in portfolios|sort(attribute='name') %}
|
||||
{{ SidenavItem(other_portfolio.name,
|
||||
href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
|
||||
active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
|
||||
) }}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li><span class="sidenav__text">You have no portfolios yet</span></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}">
|
||||
<div class="sidenav-container__fixed">
|
||||
<div v-bind:class="{'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
|
||||
<a href="#" v-on:click="props.toggle" class="sidenav__toggle">
|
||||
<template v-if="props.isVisible">
|
||||
{{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
|
||||
Hide
|
||||
</template>
|
||||
<template v-else>
|
||||
Show
|
||||
{{ Icon('angle-double-right-solid', classes="toggle-arrows icon--blue") }}
|
||||
</template>
|
||||
</a>
|
||||
<div v-if="props.isVisible">
|
||||
<div class="sidenav__title">Portfolios</div>
|
||||
<ul class="sidenav__list--padded">
|
||||
{% if portfolios %}
|
||||
{% for other_portfolio in portfolios|sort(attribute='name') %}
|
||||
{{ SidenavItem(other_portfolio.name,
|
||||
href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
|
||||
active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
|
||||
) }}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li><span class="sidenav__text">You have no portfolios yet</span></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -15,12 +15,6 @@
|
||||
<div class='portfolio-header__name'>
|
||||
<h1>{{ portfolio.name }}</h1>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column-left'></div>
|
||||
<div class='column-right portfolio-funding__header--funded-through {{ "funded" if funding_end_date is not none and funded else "unfunded"}}'>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row links'>
|
||||
{% if user_can(permissions.VIEW_PORTFOLIO_FUNDING) %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user