Merge pull request #1282 from dod-ccpo/tidy-sidenav-and-topbar
Tidy sidenav and topbar
This commit is contained in:
graham-dds
GitHub
commit
c04c767219
@ -4,18 +4,4 @@
|
||||
height: auto;
|
||||
box-shadow: $box-shadow;
|
||||
margin-bottom: -$footer-height * 2.5;
|
||||
|
||||
.sidenav__link {
|
||||
padding-right: $gap * 2;
|
||||
|
||||
@include media($large-screen) {
|
||||
padding-right: $gap * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__context--portfolio {
|
||||
.sidenav__link {
|
||||
padding-right: $gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,88 +12,44 @@
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.topbar__link {
|
||||
color: $color-white;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: $topbar-height;
|
||||
padding: 0 ($gap * 2);
|
||||
&__link {
|
||||
color: $color-white !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: $topbar-height;
|
||||
padding: 0 ($gap * 2);
|
||||
text-decoration: none;
|
||||
|
||||
&-label {
|
||||
@include h5;
|
||||
text-decoration: underline;
|
||||
padding-left: $gap;
|
||||
text-decoration: none;
|
||||
|
||||
&-label {
|
||||
@include h5;
|
||||
text-decoration: underline;
|
||||
padding-left: $gap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
margin-left: $gap;
|
||||
|
||||
@include icon-color($color-white);
|
||||
}
|
||||
|
||||
&--home {
|
||||
padding-left: $gap / 2;
|
||||
}
|
||||
|
||||
&--shield {
|
||||
width: $icon-bar-width;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
|
||||
.topbar__link-icon {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-darker;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar__context {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
&-icon {
|
||||
margin-left: $gap;
|
||||
|
||||
.topbar__portfolio-menu {
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
}
|
||||
@include icon-color($color-white);
|
||||
}
|
||||
|
||||
&--home {
|
||||
padding-left: $gap / 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-darker;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.topbar--public {
|
||||
background-color: $color-primary;
|
||||
|
||||
.topbar__navigation {
|
||||
justify-content: flex-end;
|
||||
-ms-flex-pack: justify;
|
||||
}
|
||||
|
||||
.topbar__link {
|
||||
color: $color-white;
|
||||
|
||||
&-icon {
|
||||
@include icon-style-inverted;
|
||||
}
|
||||
|
||||
&--home {
|
||||
padding-left: $gap;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-darker;
|
||||
}
|
||||
}
|
||||
&__context {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.sidenav-container {
|
||||
box-shadow: $box-shadow;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: $topbar-height + $usa-banner-height;
|
||||
@ -9,131 +8,11 @@
|
||||
@extend .sidenav-container;
|
||||
width: $sidenav-collapsed-width;
|
||||
}
|
||||
}
|
||||
|
||||
&__fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
width: $sidenav-expanded-width;
|
||||
|
||||
@include media($large-screen) {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: $gap ($gap * 2);
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
|
||||
&--minimized {
|
||||
@extend .sidenav__header;
|
||||
|
||||
padding: $gap;
|
||||
width: $sidenav-collapsed-width;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h6-font-size;
|
||||
text-transform: uppercase;
|
||||
width: 50%;
|
||||
color: $color-gray-dark;
|
||||
opacity: 0.54;
|
||||
white-space: nowrap;
|
||||
padding: $gap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
font-size: $small-font-size;
|
||||
color: $color-blue;
|
||||
text-decoration: none;
|
||||
padding: $gap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.toggle-arrows {
|
||||
vertical-align: middle;
|
||||
@include icon-size(20);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&.sidenav__list--padded {
|
||||
margin-top: 3 * $gap;
|
||||
margin-bottom: $footer-height;
|
||||
padding-bottom: ($gap * 2);
|
||||
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;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
color: $color-black-light;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider--small {
|
||||
display: block;
|
||||
width: 4 * $gap;
|
||||
border: 1px solid #d6d7d9;
|
||||
margin-left: 2 * $gap;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 2 * $gap;
|
||||
color: $color-gray;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
padding: $gap ($gap * 2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: $color-black-light;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&--active {
|
||||
@include h4;
|
||||
|
||||
background-color: $color-aqua-lightest;
|
||||
box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
|
||||
position: relative;
|
||||
color: $color-primary-darker;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
background-color: $color-aqua-lightest;
|
||||
|
||||
.sidenav__link-icon {
|
||||
@include icon-style-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidenav {
|
||||
width: $sidenav-expanded-width;
|
||||
position: fixed;
|
||||
|
||||
&--minimized {
|
||||
@extend .sidenav;
|
||||
@ -141,4 +20,110 @@
|
||||
width: $sidenav-collapsed-width;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
@include media($large-screen) {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: $gap ($gap * 2);
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
|
||||
&--minimized {
|
||||
@extend .sidenav__header;
|
||||
|
||||
padding: $gap;
|
||||
width: $sidenav-collapsed-width;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h6-font-size;
|
||||
text-transform: uppercase;
|
||||
width: 50%;
|
||||
color: $color-gray-dark;
|
||||
opacity: 0.54;
|
||||
white-space: nowrap;
|
||||
padding: $gap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
font-size: $small-font-size;
|
||||
color: $color-blue;
|
||||
text-decoration: none;
|
||||
padding: $gap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__toggle-arrows {
|
||||
vertical-align: middle;
|
||||
@include icon-size(20);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
margin-top: 3 * $gap;
|
||||
margin-bottom: $footer-height;
|
||||
padding-bottom: ($gap * 2);
|
||||
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;
|
||||
padding: 0;
|
||||
|
||||
&--no-header {
|
||||
top: $topbar-height + $usa-banner-height;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 2 * $gap;
|
||||
color: $color-gray;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&__item {
|
||||
margin: 0;
|
||||
display: block;
|
||||
color: $color-black-light !important;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
padding: $gap ($gap * 2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: $color-black-light !important;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&--active {
|
||||
@include h4;
|
||||
|
||||
background-color: $color-aqua-lightest !important;
|
||||
color: $color-primary-darker !important;
|
||||
box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-primary !important;
|
||||
background-color: $color-aqua-lightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{% macro SidenavItem(label, href, active=False) -%}
|
||||
<li>
|
||||
<li class="sidenav__item">
|
||||
<a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
|
||||
<span class="sidenav__link-label">
|
||||
{{label}}
|
||||
|
||||
@ -6,29 +6,26 @@
|
||||
|
||||
{% block content %}
|
||||
<div class='global-layout'>
|
||||
<div class='global-navigation sidenav'>
|
||||
<ul>
|
||||
|
||||
{{ SidenavItem("JEDI Cloud Help",
|
||||
href = url_for("atst.helpdocs"),
|
||||
active = not doc,
|
||||
)}}
|
||||
|
||||
{% for doc_item in docs %}
|
||||
{% set active = doc and doc == doc_item %}
|
||||
|
||||
{{ SidenavItem(doc_item | title,
|
||||
href = url_for("atst.helpdocs", doc=doc_item),
|
||||
active = active,
|
||||
)}}
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
<div class='global-navigation'>
|
||||
<div class="sidenav-container">
|
||||
<div class="sidenav">
|
||||
<ul class="sidenav__list sidenav__list--no-header">
|
||||
{{ SidenavItem("JEDI Cloud Help",
|
||||
href = url_for("atst.helpdocs"),
|
||||
active = not doc,
|
||||
)}}
|
||||
{% for doc_item in docs %}
|
||||
{% set active = doc and doc == doc_item %}
|
||||
{{ SidenavItem(doc_item | title,
|
||||
href = url_for("atst.helpdocs", doc=doc_item),
|
||||
active = active,
|
||||
)}}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='global-panel-container'>
|
||||
|
||||
<div class='panel'>
|
||||
<div class='panel__heading panel__heading--divider'>
|
||||
<h1>
|
||||
@ -40,16 +37,12 @@
|
||||
{% endif %}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class='panel__content'>
|
||||
|
||||
{% block doc_content %}
|
||||
<p>Welcome to the JEDI Cloud help documentation.</p>
|
||||
{% endblock %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,39 +1,34 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/sidenav_item.html" import SidenavItem %}
|
||||
|
||||
|
||||
<div v-cloak is="SidenavToggler" class="global-navigation">
|
||||
<template slot-scope='props'>
|
||||
<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}">
|
||||
<div v-bind:class="{'sidenav__header': props.isVisible, 'sidenav__header--minimized': !props.isVisible}" class="row">
|
||||
<template v-if="props.isVisible">
|
||||
<span class="sidenav__title col col--grow">My Portfolios</span>
|
||||
<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 v-else>
|
||||
<a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
|
||||
<span>Show</span>
|
||||
{{ Icon('angle-double-right-solid', classes="toggle-arrows icon--primary") }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="props.isVisible">
|
||||
<ul class="sidenav__list--padded">
|
||||
{% 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 %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="global-navigation">
|
||||
<sidenav-toggler v-cloak inline-template>
|
||||
<div v-bind:class="{'sidenav-container': isVisible, 'sidenav-container--minimized': !isVisible}">
|
||||
<div v-bind:class="{'sidenav': isVisible, 'sidenav--minimized': !isVisible}">
|
||||
<div v-bind:class="{'sidenav__header': isVisible, 'sidenav__header--minimized': !isVisible}" class="row">
|
||||
<template v-if="isVisible">
|
||||
<span class="sidenav__title col col--grow">My Portfolios</span>
|
||||
<a href="#" v-on:click="toggle" class="sidenav__toggle col">
|
||||
{{ Icon('angle-double-left-solid', classes="sidenav__toggle-arrows icon--primary") }}
|
||||
<span>Hide</span>
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a href="#" v-on:click="toggle" class="sidenav__toggle col">
|
||||
<span>Show</span>
|
||||
{{ Icon('angle-double-right-solid', classes="sidenav__toggle-arrows icon--primary") }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
<ul class="sidenav__list" v-if="isVisible">
|
||||
{% 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 %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</sidenav-toggler>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
{{ "navigation.topbar.jedi_cloud_link_text" | translate }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="topbar__context">
|
||||
{% if g.current_user %}
|
||||
<a href="{{ url_for('users.user') }}" class="topbar__link">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user