Merge pull request #608 from dod-ccpo/reskin-nav
Reskin navigation, phase 1
This commit is contained in:
patricksmithdds
GitHub
@@ -21,7 +21,9 @@
|
||||
{% include 'navigation/topbar.html' %}
|
||||
|
||||
<div class='global-layout'>
|
||||
{% include 'navigation/global_navigation.html' %}
|
||||
{% block global_sidenav %}
|
||||
{% include 'navigation/global_sidenav.html' %}
|
||||
{% endblock %}
|
||||
|
||||
<div class='global-panel-container'>
|
||||
{% block sidenav %}{% endblock %}
|
||||
|
||||
@@ -17,31 +17,7 @@
|
||||
<div id='app-root'>
|
||||
{% include 'components/usa_header.html' %}
|
||||
|
||||
<header class="topbar topbar--public">
|
||||
<nav class="topbar__navigation">
|
||||
<a href="{{ url_for('atst.home') }}" class="topbar__link topbar__link--home">
|
||||
{{ Icon('shield', classes='topbar__link-icon') }}
|
||||
<span class="topbar__link-label">{{ "base_public.header_title" | translate }}</span>
|
||||
</a>
|
||||
|
||||
{% if g.current_user %}
|
||||
<a href="{{ url_for('users.user') }}" class="topbar__link">
|
||||
<span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
|
||||
{{ Icon('avatar', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('atst.logout') }}" class="topbar__link" title='Log out of JEDI Cloud'>
|
||||
{{ Icon('logout', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('atst.home') }}" class="topbar__link" title='Log in'>
|
||||
<span class="topbar__link-label">{{ "base_public.login" | translate }}</span>
|
||||
{{ Icon('avatar', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
{% include 'navigation/topbar.html' %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
|
||||
@@ -7,7 +7,14 @@
|
||||
{{ Icon(icon, classes="sidenav__link-icon") }}
|
||||
{% endif %}
|
||||
|
||||
<span class="sidenav__link-label">{{label}}</span>
|
||||
<span class="sidenav__link-label">
|
||||
{{label}}
|
||||
</span>
|
||||
{% if active %}
|
||||
<span class="sidenav__link-active_indicator">
|
||||
{{ Icon("caret_right") }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
{% if subnav and active %}
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<div class="sidenav">
|
||||
<ul>
|
||||
<li>
|
||||
<a class="sidenav__link" href="/home">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="sidenav__link" href="/requests">Requests</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a class="sidenav__link" href="/">Logout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,19 +0,0 @@
|
||||
{% from "components/sidenav_item.html" import SidenavItem %}
|
||||
|
||||
<div class="global-navigation sidenav {% if portfolio %}global-navigation__context--portfolio{% endif %}">
|
||||
<ul>
|
||||
{{ SidenavItem("New Task Order",
|
||||
href=url_for("task_orders.get_started"),
|
||||
icon="plus",
|
||||
active=g.matchesPath('/task_orders/new'),
|
||||
) }}
|
||||
|
||||
{% if g.current_user.has_portfolios %}
|
||||
{{ SidenavItem("Portfolios", href="/portfolios", icon="cloud", active=g.matchesPath('/portfolios')) }}
|
||||
{% endif %}
|
||||
|
||||
{% if g.Authorization.has_atat_permission(g.current_user, g.Permissions.VIEW_AUDIT_LOG) %}
|
||||
{{ SidenavItem("Activity History", url_for('atst.activity_history'), icon="time", active=g.matchesPath('/activity-history')) }}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
24
templates/navigation/global_sidenav.html
Normal file
24
templates/navigation/global_sidenav.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/sidenav_item.html" import SidenavItem %}
|
||||
|
||||
|
||||
<div class="global-navigation sidenav">
|
||||
<div class="sidenav__title">Portfolios</div>
|
||||
<ul class="sidenav__list--padded">
|
||||
{% for other_portfolio in portfolios|sort(attribute='name') %}
|
||||
{{ SidenavItem(other_portfolio.name,
|
||||
href=url_for("portfolios.show_portfolio", portfolio_id=other_portfolio.id),
|
||||
active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
|
||||
) }}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="sidenav__divider--small"></div>
|
||||
<a class="sidenav__link sidenav__link--add" href="{{ url_for("task_orders.get_started") }}" title="Fund a New Portfolio">
|
||||
<span class="sidenav__link-label">Fund a New Portfolio</span>
|
||||
{{ Icon("plus", classes="sidenav__link-icon") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="global-navigation sidenav--minimized">
|
||||
<div class="sidenav__title">Show >>></div>
|
||||
</div>
|
||||
@@ -2,71 +2,30 @@
|
||||
|
||||
<header class="topbar">
|
||||
<nav class="topbar__navigation">
|
||||
{% if not portfolio %}
|
||||
<a href="{{ url_for('atst.home') }}" class="topbar__link topbar__link--home">
|
||||
{{ Icon('shield', classes='topbar__link-icon') }}
|
||||
<span class="topbar__link-label">
|
||||
{{ "navigation.topbar.jedi_cloud_link_text" | translate }}
|
||||
</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('atst.home') }}" class="topbar__link topbar__link--shield" title="JEDI Cloud Home">
|
||||
{{ Icon('shield', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('atst.home') }}" class="topbar__link topbar__link--home">
|
||||
{{ Icon('shield', classes='topbar__link-icon') }}
|
||||
<span class="topbar__link-label">
|
||||
{{ "navigation.topbar.jedi_cloud_link_text" | translate }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="topbar__context {% if portfolio %}topbar__context--portfolio{% endif %}">
|
||||
{% if portfolio %}
|
||||
|
||||
<div is='toggler' class='topbar__portfolio-menu'>
|
||||
<template slot-scope='props'>
|
||||
<button
|
||||
v-on:click='props.toggle'
|
||||
class="topbar__link topbar__portfolio-menu__toggle"
|
||||
v-bind:class="{ 'topbar__portfolio-menu__toggle--open': props.isVisible }">
|
||||
<span class="topbar__link-label">{{ "navigation.topbar.named_portfolio" | translate({ "portfolio": portfolio.name }) }}</span>
|
||||
<template v-if='props.isVisible'>{{ Icon('caret_up', classes='topbar__link-icon') }}</template>
|
||||
<template v-else>{{ Icon('caret_down', classes='topbar__link-icon') }}</template>
|
||||
</button>
|
||||
|
||||
<div v-show='props.isVisible' class='topbar__portfolio-menu__panel menu'>
|
||||
<h2 class='menu__heading'>
|
||||
{{ "navigation.topbar.other_active_portfolios" | translate }}
|
||||
</h2>
|
||||
{% if portfolios %}
|
||||
|
||||
<ul class='menu__list'>
|
||||
{% for other_portfolio in portfolios %}
|
||||
<li class='menu__list__item'>
|
||||
<a href="{{ url_for('portfolios.show_portfolio', portfolio_id=other_portfolio.id)}}">
|
||||
{{ other_portfolio.name }}
|
||||
{{ Icon('caret_right', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% else %}
|
||||
|
||||
<p class='menu__message'>
|
||||
{{ "navigation.topbar.no_other_active_portfolios" | translate }}
|
||||
</p>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="topbar__context">
|
||||
{% if g.current_user %}
|
||||
<a href="{{ url_for('users.user') }}" class="topbar__link">
|
||||
<span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
|
||||
{{ Icon('avatar', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('atst.logout') }}" class="topbar__link" title='{{ "navigation.topbar.logout_link_title" | translate }}'>
|
||||
<span class="topbar__link-label">Logout</span>
|
||||
{{ Icon('logout', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('atst.home') }}" class="topbar__link" title='Log in'>
|
||||
<span class="topbar__link-label">{{ "base_public.login" | translate }}</span>
|
||||
{{ Icon('avatar', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="{{ url_for('users.user') }}" class="topbar__link">
|
||||
<span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
|
||||
{{ Icon('avatar', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('atst.logout') }}" class="topbar__link" title='{{ "navigation.topbar.logout_link_title" | translate }}'>
|
||||
{{ Icon('logout', classes='topbar__link-icon') }}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user