Home page styling updates:
- Update copy - Update menu description section
This commit is contained in:
leigh-mil
parent
8166c05ec2
commit
2584c43c90
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,48 +2,23 @@
|
||||
.sticky-cta {
|
||||
margin: -1.6rem -1.6rem 0 -1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.about-cloud {
|
||||
margin: 4rem auto;
|
||||
max-width: 900px;
|
||||
}
|
||||
&__content {
|
||||
margin: 4rem auto;
|
||||
max-width: 900px;
|
||||
|
||||
.your-project {
|
||||
margin-top: 3rem;
|
||||
padding: 3rem;
|
||||
background-color: $color-gray-lightest;
|
||||
&--descriptions {
|
||||
.col {
|
||||
margin-left: $home-pg-icon-width;
|
||||
padding: ($gap * 2) ($gap * 4);
|
||||
position: relative;
|
||||
|
||||
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;
|
||||
.icon--home-pg-badge {
|
||||
position: absolute;
|
||||
left: -$home-pg-icon-width;
|
||||
top: $gap * 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.active:hover {
|
||||
color: $color-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -112,8 +87,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#jedi-heirarchy {
|
||||
max-width: 65rem;
|
||||
margin-top: $gap * 8;
|
||||
}
|
||||
|
||||
@ -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,80 +12,50 @@
|
||||
{% 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>
|
||||
<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>
|
||||
|
||||
{{ 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>
|
||||
|
||||
<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 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>
|
||||
{% 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 }}
|
||||
</p>
|
||||
{% endmacro %}
|
||||
<div class="project-section-descriptions">
|
||||
{{ Description('funding', default=True) }}
|
||||
{{ Description('applications') }}
|
||||
{{ Description('reports') }}
|
||||
{{ Description('admin') }}
|
||||
</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>
|
||||
</div>
|
||||
</toggler>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button-primary">
|
||||
{{ "home.add_portfolio_button_text" | translate }}
|
||||
</a>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user