diff --git a/styles/core/_util.scss b/styles/core/_util.scss index ff6e8e3f..5203da45 100644 --- a/styles/core/_util.scss +++ b/styles/core/_util.scss @@ -88,5 +88,9 @@ p { hr { border: 0; border-bottom: 1px solid $color-gray-light; - margin: ($gap * 3) ($site-margins * -4); + margin: ($gap * 3) 0; + + &.full-width { + margin: ($gap * 3) ($site-margins * -4); + } } 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/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 0a6b201c..d4a538f0 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -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 { diff --git a/styles/sections/_home.scss b/styles/sections/_home.scss index 1ca33efc..b0d715d2 100644 --- a/styles/sections/_home.scss +++ b/styles/sections/_home.scss @@ -1,49 +1,25 @@ .home { + margin: $gap * 3; .sticky-cta { margin: -1.6rem -1.6rem 0 -1.6rem; } -} -.about-cloud { - margin: 4rem auto; - max-width: 900px; -} + &__content { + margin: 4rem; + 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 +88,3 @@ } } } - -#jedi-heirarchy { - max-width: 65rem; - margin-top: $gap * 8; -} diff --git a/templates/applications/fragments/member_form_fields.html b/templates/applications/fragments/member_form_fields.html index 20ecc210..3aa97687 100644 --- a/templates/applications/fragments/member_form_fields.html +++ b/templates/applications/fragments/member_form_fields.html @@ -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) }} -
+

{{ "portfolios.applications.members.form.env_access.title" | translate }}

diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html index 1a7bcb4a..be312351 100644 --- a/templates/applications/fragments/members.html +++ b/templates/applications/fragments/members.html @@ -40,7 +40,7 @@ {% call Modal(modal_name, classes="form-content--app-mem") %}

{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}

-
+
-
+
{{ TextInput(form.description, paragraph=True, optional=True) }} diff --git a/templates/applications/new/step_2.html b/templates/applications/new/step_2.html index bb622f8f..462c0f46 100644 --- a/templates/applications/new/step_2.html +++ b/templates/applications/new/step_2.html @@ -19,7 +19,7 @@

{{ 'portfolios.applications.new.step_2_description' | translate }}

-
+
{{ 'portfolios.applications.environments_heading' | translate }}
@@ -58,9 +58,9 @@ {{ Icon("plus") }}
-
+ - + {% block next_button %} {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }} diff --git a/templates/applications/new/step_3.html b/templates/applications/new/step_3.html index 06dd4e0d..a4e1aa53 100644 --- a/templates/applications/new/step_3.html +++ b/templates/applications/new/step_3.html @@ -15,7 +15,7 @@

{{ ('portfolios.applications.new.step_3_description' | translate) }}

-
+
{{ MemberManagementTemplate( application, diff --git a/templates/base.html b/templates/base.html index fabcb92c..f4964add 100644 --- a/templates/base.html +++ b/templates/base.html @@ -21,9 +21,7 @@ {% include 'navigation/topbar.html' %}
- {% if portfolios %} - {% include 'navigation/global_sidenav.html' %} - {% endif %} + {% include 'navigation/global_sidenav.html' %}
{% block sidenav %}{% endblock %} diff --git a/templates/components/sidenav_item.html b/templates/components/sidenav_item.html index 8e3c5135..ec6be364 100644 --- a/templates/components/sidenav_item.html +++ b/templates/components/sidenav_item.html @@ -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) -%}
  • - - {% if icon %} - {{ Icon(icon, classes="sidenav__link-icon") }} - {% endif %} - - - {{label}} - - {% if active %} - - {{ Icon("caret_right") }} + + + {{label}} - {% endif %} - - - {% if subnav and active %} - - {% endif %} +
    • {%- endmacro %} diff --git a/templates/home.html b/templates/home.html index aadcd2a8..986c6e41 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,83 +12,56 @@ {% 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 }} + +
    - - {{ "home.add_portfolio_button_text" | translate }} -
    diff --git a/templates/navigation/global_sidenav.html b/templates/navigation/global_sidenav.html index c6141641..84ce99e6 100644 --- a/templates/navigation/global_sidenav.html +++ b/templates/navigation/global_sidenav.html @@ -7,29 +7,29 @@
    - +
    - +
    -
    Portfolios
      - {% 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 %} -
    • You have no portfolios yet
      • - {% endif %} + {% 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 %}
    diff --git a/templates/portfolios/fragments/add_new_portfolio_member.html b/templates/portfolios/fragments/add_new_portfolio_member.html index 06ca6038..644f5062 100644 --- a/templates/portfolios/fragments/add_new_portfolio_member.html +++ b/templates/portfolios/fragments/add_new_portfolio_member.html @@ -16,7 +16,7 @@ {% endmacro %} {% set step_one %} -
    +

    Invite new portfolio member

    @@ -52,7 +52,7 @@
    {% endset %} {% set step_two %} -
    +

    Assign member permissions

    {{ Icon('info') }} diff --git a/templates/portfolios/fragments/change_ppoc.html b/templates/portfolios/fragments/change_ppoc.html index 1eb9a03c..478a55d4 100644 --- a/templates/portfolios/fragments/change_ppoc.html +++ b/templates/portfolios/fragments/change_ppoc.html @@ -5,7 +5,7 @@ {% from "components/options_input.html" import OptionsInput %} {% set step_one %} -
    +

    {{ "fragments.ppoc.update_ppoc_title" | translate }}

    {{ @@ -42,7 +42,7 @@ {% endset %} {% set step_two %} -
    +

    {{ "fragments.ppoc.update_ppoc_confirmation_title" | 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