diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index fe81b498..44fc53c8 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -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 diff --git a/styles/elements/_icons.scss b/styles/elements/_icons.scss index c7a43414..b2980227 100644 --- a/styles/elements/_icons.scss +++ b/styles/elements/_icons.scss @@ -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; + } + } } diff --git a/styles/sections/_home.scss b/styles/sections/_home.scss index 1ca33efc..25aac6e3 100644 --- a/styles/sections/_home.scss +++ b/styles/sections/_home.scss @@ -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; -} diff --git a/templates/home.html b/templates/home.html index aadcd2a8..03dfd0fd 100644 --- a/templates/home.html +++ b/templates/home.html @@ -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 %} -
+
{% include "fragments/flash.html" %}

{{ "home.head" | translate }}

+

Set up a Portfolio

+

New Portfolios will be visible in the left side bar of this page.

+

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.

+
- {{ SemiCollapsibleText(first_half=("home.about_cloud.part1"|translate), second_half=("home.about_cloud.part2"|translate)) }} - -
-

{{ "home.your_project" | translate }}

-

{{ "home.your_project_descrip" | translate }}

- -
- - {% macro Link(icon, text, section, default=False) %} - {% if default %} -
- {% else %} -
- {% endif %} -
-
{{ Icon(icon) }}
-
{{ text }}
-
+
+
+
+ {{ Icon('funding', classes="icon--home-pg-badge") }} +

{{ "navigation.portfolio_navigation.breadcrumbs.funding" | translate }}

+

+ {{ "home.funding_descrip" | translate }} +

- {% endmacro %} - - -
-
-
- {{ 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, - ) }} -
-
- {% macro Description(section, default=False) %} - {% if default %} -

- {% else %} -

- {% endif %} - - {{ "navigation.portfolio_navigation.breadcrumbs.%s" | format(section) | translate }} - - {{ "home.%s_descrip" | format(section) | translate }} -

- {% endmacro %} -
- {{ Description('funding', default=True) }} - {{ Description('applications') }} - {{ Description('reports') }} - {{ Description('admin') }} -
+
+ {{ Icon('chart-pie', classes="icon--home-pg-badge") }} +

{{ "navigation.portfolio_navigation.breadcrumbs.reports" | translate }}

+

+ {{ "home.reports_descrip" | translate }} +

- +
+
+
+ {{ Icon('applications', classes="icon--home-pg-badge") }} +

{{ "navigation.portfolio_navigation.breadcrumbs.applications" | translate }}

+

+ {{ "home.applications_descrip" | translate }} +

+
+
+ {{ Icon('cog', classes="icon--home-pg-badge") }} +

{{ "navigation.portfolio_navigation.breadcrumbs.admin" | translate }}

+

+ {{ "home.admin_descrip" | translate }} +

+
+
+ {{ "home.add_portfolio_button_text" | translate }} diff --git a/translations.yaml b/translations.yaml index 773202bd..b7c0ffae 100644 --- a/translations.yaml +++ b/translations.yaml @@ -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