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

Merge pull request #1264 from dod-ccpo/update-home-page

Browse Source 
Update home page
This commit is contained in:
leigh-mil 2019-12-19 11:49:29 -05:00 committed by GitHub
commit 54ba6586d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 158 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/core/_util.scss
View File

@ -88,5 +88,9 @@ p {
hr {
border: 0;
border-bottom: 1px solid $color-gray-light;
margin: ($gap * 3) 0;
&.full-width {
margin: ($gap * 3) ($site-margins * -4);
}
}

1
styles/core/_variables.scss
View File

@ -17,6 +17,7 @@ $usa-banner-height: 2.8rem;
$sidenav-expanded-width: 25rem;
$sidenav-collapsed-width: 10rem;
$max-panel-width: 80rem;
$home-pg-icon-width: 6rem;
/*
* USWDS Variables

15
styles/elements/_icons.scss
View File

@ -94,4 +94,19 @@
&--primary {
@include icon-color($color-primary);
}
&--home-pg-badge {
@include icon-size(27);
@include icon-color($color-white);
background-color: $color-primary;
height: $home-pg-icon-width;
width: $home-pg-icon-width;
border-radius: 100%;
display: inline-flex;
svg {
margin: auto;
}
}
}

139
styles/elements/_sidenav.scss
View File

@ -1,8 +1,3 @@
@mixin sidenav__header {
padding: $gap ($gap * 2);
font-weight: bold;
}
.sidenav-container {
box-shadow: $box-shadow;
overflow: hidden;
@ -26,34 +21,58 @@
margin: 0px;
}
&__title {
@include sidenav__header;
&__header {
padding: $gap ($gap * 2);
font-weight: bold;
border-bottom: 1px solid $color-gray-lighter;
font-size: $h3-font-size;
&--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 {
@include sidenav__header;
font-size: $small-font-size;
line-height: 2.8rem;
float: right;
color: $color-blue-darker;
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: 4 * $gap;
margin-top: 3 * $gap;
margin-bottom: $footer-height;
padding-bottom: $gap;
padding-bottom: ($gap * 2);
position: fixed;
overflow-y: scroll;
top: $topbar-height + $usa-banner-height + 4rem;
@ -69,6 +88,7 @@
li {
margin: 0;
display: block;
color: $color-black-light;
}
}
@ -89,100 +109,19 @@
&__link {
display: block;
padding: $gap ($gap * 2);
color: $color-black;
text-decoration: underline;
white-space: nowrap;
overflow: hidden;
color: $color-black-light;
text-decoration: none;
text-overflow: ellipsis;
&-icon {
margin-left: -($gap * 0.5);
}
&--disabled {
color: $color-shadow;
pointer-events: none;
}
&--add {
color: $color-blue;
font-size: $small-font-size;
.icon {
@include icon-color($color-blue);
@include icon-size(14);
}
}
&--active {
@include h4;
color: $color-primary;
background-color: $color-aqua-lightest;
box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
.sidenav__link-icon {
@include icon-style-active;
}
box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
position: relative;
&_indicator .icon {
@include icon-color($color-primary);
position: absolute;
right: 0;
}
+ ul {
background-color: $color-primary;
.sidenav__link {
color: $color-white;
background-color: $color-primary;
&:hover {
background-color: $color-blue-darker;
}
&--active {
@include h5;
color: $color-white;
background-color: $color-primary;
box-shadow: none;
}
.icon {
@include icon-color($color-white);
}
}
}
}
+ ul {
li {
.sidenav__link {
@include h5;
padding: $gap * 0.75;
padding-left: 4.5rem;
border: 0;
font-weight: normal;
.sidenav__link-icon {
@include icon-size(12);
flex-shrink: 0;
margin-right: 1.5rem;
margin-left: -3rem;
}
.sidenav__link-label {
padding-left: 0;
}
}
}
color: $color-primary-darker;
}
&:hover {

57
styles/sections/_home.scss
View File

@ -1,48 +1,24 @@
.home {
margin: $gap * 3;
.sticky-cta {
margin: -1.6rem -1.6rem 0 -1.6rem;
}
}
.about-cloud {
margin: 4rem auto;
&__content {
margin: 4rem;
max-width: 900px;
&--descriptions {
.col {
margin-left: $home-pg-icon-width;
padding: ($gap * 2) ($gap * 4);
position: relative;
.icon--home-pg-badge {
position: absolute;
left: -$home-pg-icon-width;
top: $gap * 3;
}
.your-project {
margin-top: 3rem;
padding: 3rem;
background-color: $color-gray-lightest;
h2 {
margin-top: 0;
}
.links {
justify-content: flex-start;
.icon-link {
padding: $gap ($gap * 4);
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
&:hover {
background-color: transparent;
color: $color-gray-dark;
.svg * {
fill: $color-gray-dark;
}
}
&.active:hover {
color: $color-blue;
}
}
}
@ -112,8 +88,3 @@
}
}
}
#jedi-heirarchy {
max-width: 65rem;
margin-top: $gap * 8;
}

2
templates/applications/fragments/member_form_fields.html
View File

@ -100,7 +100,7 @@
{{ CheckboxInput(form.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt, optional=True) }}
{{ CheckboxInput(form.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env, optional=True) }}
</div>
<hr>
<hr class="full-width">
<div class="environment_roles environment-roles-new">
<h2>{{ "portfolios.applications.members.form.env_access.title" | translate }}</h2>
<p class='usa-input__help subtitle'>

4
templates/applications/fragments/members.html
View File

@ -40,7 +40,7 @@
{% call Modal(modal_name, classes="form-content--app-mem") %}
<div class="modal__form--header">
<h1>{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}</h1>
<hr>
<hr class="full-width">
</div>
<base-form inline-template>
<form id='{{ modal_name }}' method="POST" action="{{ url_for(action_update, application_id=application.id, application_role_id=member.role_id,) }}">
@ -59,7 +59,7 @@
{% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
<div class="modal__form--header">
<h1>{{ "portfolios.applications.members.new.verify" | translate }}</h1>
<hr>
<hr class="full-width">
</div>
<base-form inline-template :enable-save="true">
<form id='{{ resend_invite_modal }}' method="POST" action="{{ url_for('applications.resend_invite', application_id=application.id, application_role_id=member.role_id) }}">

2
templates/applications/fragments/new_member_modal_content.html
View File

@ -2,7 +2,7 @@
{% import "applications/fragments/member_form_fields.html" as member_fields %}
{% macro MemberFormTemplate(title=None, next_button=None, previous=True) %}
<hr>
<hr class="full-width">
{% if title %} <h1>{{ title }}</h1> {% endif %}
{{ caller() }}

2
templates/applications/new/step_1.html
View File

@ -30,7 +30,7 @@
{{ ('portfolios.applications.new.step_1_form_help_text.name' | translate | safe) }}
</div>
</div>
<hr class="panel__break">
<hr>
<div class="form-row">
<div class="form-col form-col--two-thirds">
{{ TextInput(form.description, paragraph=True, optional=True) }}

2
templates/applications/new/step_2.html
View File

@ -19,7 +19,7 @@
<p>
{{ 'portfolios.applications.new.step_2_description' | translate }}
</p>
<hr class="panel__break">
<hr>
<application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit">
<div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>

2
templates/applications/new/step_3.html
View File

@ -15,7 +15,7 @@
<p>
{{ ('portfolios.applications.new.step_3_description' | translate) }}
</p>
<hr class="panel__break">
<hr>
{{ MemberManagementTemplate(
application,

2
templates/base.html
View File

@ -21,9 +21,7 @@
{% include 'navigation/topbar.html' %}
<div class='global-layout'>
{% if portfolios %}
{% include 'navigation/global_sidenav.html' %}
{% endif %}
<div class='global-panel-container'>
{% block sidenav %}{% endblock %}

26
templates/components/sidenav_item.html
View File

@ -1,35 +1,11 @@
{% from "components/icon.html" import Icon %}
{% macro SidenavItem(label, href, active=False, icon=None, subnav=None) -%}
{% macro SidenavItem(label, href, active=False) -%}
<li>
<a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
{% if icon %}
{{ Icon(icon, classes="sidenav__link-icon") }}
{% endif %}
<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 %}
<ul>
{% for item in subnav %}
<li>
<a class="sidenav__link {% if item["active"] %}sidenav__link--active{% endif %}" href="{{item["href"]}}" title="{{item["label"]}}">
{% if "icon" in item %}
{{ Icon(item["icon"], classes="sidenav__link-icon") }}
{% endif %}
<span class="sidenav__link-label">{{item["label"]}}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{%- endmacro %}

108
templates/home.html
View File

@ -1,8 +1,7 @@
{% extends "base.html" %}
{% from "components/sticky_cta.html" import StickyCTA %}
{% from "components/icon.html" import Icon %}
{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
{% from "components/sticky_cta.html" import StickyCTA %}
{% block content %}
@ -13,84 +12,57 @@
{% set sticky_header = "home.get_started" | translate %}
{% endif %}
<div class="about-cloud">
<div class="home__content">
{% include "fragments/flash.html" %}
<h1>{{ "home.head" | translate }}</h1>
{{ SemiCollapsibleText(first_half=("home.about_cloud.part1"|translate), second_half=("home.about_cloud.part2"|translate)) }}
<div class="your-project">
<h2 class="h3">{{ "home.your_project" | translate }}</h2>
<p>{{ "home.your_project_descrip" | translate }}</p>
<h3>Set up a Portfolio</h3>
<h4>New Portfolios will be visible in the left side bar of this page. </h4>
<p>All TOs associated to a specific Application or set of related Applications will be entered at the Portfolio level. Funding is applied and managed at the Portfolio level as well.</p>
<hr>
{% macro Link(icon, text, section, default=False) %}
{% if default %}
<div v-bind:class='{"icon-link": true, active: selectedSection === "{{ section }}" || selectedSection === null}' v-on:click="toggleSection('{{ section }}')">
{% else %}
<div v-bind:class='{"icon-link": true, active: selectedSection === "{{ section }}"}' v-on:click="toggleSection('{{ section }}')">
{% endif %}
<div class="col">
<div class='icon-link--icon'>{{ Icon(icon) }}</div>
<div class='icon-link--name'>{{ text }}</div>
</div>
</div>
{% endmacro %}
<toggler inline-template v-bind:initial-selected-section="'funding'">
<div>
<div class="portfolio-header">
<div class="links row">
{{ Link(
icon='funding',
section='funding',
text='navigation.portfolio_navigation.breadcrumbs.funding' | translate,
default=True
) }}
{{ Link(
icon='applications',
section='applications',
text='navigation.portfolio_navigation.breadcrumbs.applications' | translate,
) }}
{{ Link(
icon='chart-pie',
section='reports',
text='navigation.portfolio_navigation.breadcrumbs.reports' | translate,
) }}
{{ Link(
icon='cog',
section='admin',
text='navigation.portfolio_navigation.breadcrumbs.admin' | translate,
) }}
</div>
</div>
{% macro Description(section, default=False) %}
{% if default %}
<p v-show="selectedSection === '{{ section }}' || selectedSection === null">
{% else %}
<p v-show="selectedSection === '{{ section }}'">
{% endif %}
<strong>
{{ "navigation.portfolio_navigation.breadcrumbs.%s" | format(section) | translate }}
</strong>
{{ "home.%s_descrip" | format(section) | translate }}
<div class="home__content--descriptions">
<div class="row">
<div class="col col--half col--pad">
{{ Icon('funding', classes="icon--home-pg-badge") }}
<h4>{{ "navigation.portfolio_navigation.breadcrumbs.funding" | translate }}</h4>
<p>
{{ "home.funding_descrip" | translate }}
</p>
</div>
<div class="col col--half col--pad">
{{ Icon('chart-pie', classes="icon--home-pg-badge") }}
<h4>{{ "navigation.portfolio_navigation.breadcrumbs.reports" | translate }}</h4>
<p>
{{ "home.reports_descrip" | translate }}
</p>
{% endmacro %}
<div class="project-section-descriptions">
{{ Description('funding', default=True) }}
{{ Description('applications') }}
{{ Description('reports') }}
{{ Description('admin') }}
</div>
</div>
</toggler>
<div class="row">
<div class="col col--half col--pad">
{{ Icon('applications', classes="icon--home-pg-badge") }}
<h4>{{ "navigation.portfolio_navigation.breadcrumbs.applications" | translate }}</h4>
<p>
{{ "home.applications_descrip" | translate }}
</p>
</div>
<a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button-primary">
<div class="col col--half col--pad">
{{ Icon('cog', classes="icon--home-pg-badge") }}
<h4>{{ "navigation.portfolio_navigation.breadcrumbs.admin" | translate }}</h4>
<p>
{{ "home.admin_descrip" | translate }}
</p>
</div>
</div>
</div>
<div class="empty-state">
<div class="empty-state__footer">
<a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button usa-button-primary">
{{ "home.add_portfolio_button_text" | translate }}
</a>
</div>
</div>
</div>
</main>
{% endblock %}

22
templates/navigation/global_sidenav.html
View File

@ -7,29 +7,29 @@
<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">
<div v-bind:class="{'sidenav__header': props.isVisible, 'sidenav__header--minimized': !props.isVisible}" class="row">
<template v-if="props.isVisible">
{{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
Hide
<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>
Show
{{ Icon('angle-double-right-solid', classes="toggle-arrows icon--blue") }}
</template>
<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">
<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>

4
templates/portfolios/fragments/add_new_portfolio_member.html
View File

@ -16,7 +16,7 @@
{% endmacro %}
{% set step_one %}
<hr>
<hr class="full-width">
<h1>Invite new portfolio member</h1>
<div class='form-row'>
<div class='form-col form-col--half'>
@ -52,7 +52,7 @@
</div>
{% endset %}
{% set step_two %}
<hr>
<hr class="full-width">
<h1>Assign member permissions</h1>
<a class='icon-link'>
{{ Icon('info') }}

4
templates/portfolios/fragments/change_ppoc.html
View File

@ -5,7 +5,7 @@
{% from "components/options_input.html" import OptionsInput %}
{% set step_one %}
<hr>
<hr class="full-width">
<h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
{{
@ -42,7 +42,7 @@
{% endset %}
{% set step_two %}
<hr>
<hr class="full-width">
<h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
{{

10
translations.yaml
View File

@ -22,13 +22,13 @@ home:
add_portfolio_button_text: Add New Portfolio
new_portfolio: New Portfolio
get_started: Get Started
head: About Cloud Services
head: JEDI Cloud Services
your_project: Your Project
your_project_descrip: Your portfolio is where all task orders pertaining to a specific project or set of related projects live. In JEDI, every task order in your portfolio has four components.
funding_descrip: is information about all approved task orders associated to your portfolio.
applications_descrip: ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
reports_descrip: enim ad minim veniam, quis nostrud exercitation ullamco
admin_descrip: aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
funding_descrip: The Task Orders section allows you to enter, manage, and edit awarded TOs associated to a specific Portfolio.
applications_descrip: The Applications section allows you to easily create and define new Applications within a Portfolio, as well as manage user permissions and Environments.
reports_descrip: The Reports section allows you to view and monitor funding usage within a specific Portfolio.
admin_descrip: Within the Settings section, you can manage your Portfolio name and description, as well as add, edit, and delete Portfolio managers.
ccpo:
users_title: CCPO Users
add_user: Add new CCPO user