From 8166c05ec25c2273e6586dc99ad8442a1c27406b Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 18 Dec 2019 14:17:03 -0500 Subject: [PATCH 1/7] Always show side nav and update styling --- styles/elements/_sidenav.scss | 52 ++++++++++++++++-------- templates/base.html | 4 +- templates/navigation/global_sidenav.html | 34 ++++++++-------- 3 files changed, 54 insertions(+), 36 deletions(-) diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 0a6b201c..224895fb 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: 0 $gap ($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; } } @@ -90,7 +110,7 @@ display: block; padding: $gap ($gap * 2); color: $color-black; - text-decoration: underline; + text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 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/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 %}
From 2584c43c90af23641e0a99ac20b8a587c99a4726 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 18 Dec 2019 15:29:10 -0500 Subject: [PATCH 2/7] Home page styling updates: - Update copy - Update menu description section --- styles/core/_variables.scss | 1 + styles/elements/_icons.scss | 15 +++++ styles/sections/_home.scss | 54 ++++-------------- templates/home.html | 107 +++++++++++++----------------------- translations.yaml | 10 ++-- 5 files changed, 71 insertions(+), 116 deletions(-) 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 From 217a29b0dcb120341ebb02b4e473644bddc9028d Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 18 Dec 2019 16:18:47 -0500 Subject: [PATCH 3/7] Adjust margins on home page, globally fix hr elements to default to having margins, and add class for hr elements to span full width of their container --- styles/core/_util.scss | 6 +++++- styles/sections/_home.scss | 1 + templates/applications/fragments/member_form_fields.html | 2 +- templates/applications/fragments/members.html | 4 ++-- .../applications/fragments/new_member_modal_content.html | 2 +- .../portfolios/fragments/add_new_portfolio_member.html | 4 ++-- templates/portfolios/fragments/change_ppoc.html | 4 ++-- 7 files changed, 14 insertions(+), 9 deletions(-) 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/sections/_home.scss b/styles/sections/_home.scss index 25aac6e3..a721b71c 100644 --- a/styles/sections/_home.scss +++ b/styles/sections/_home.scss @@ -1,4 +1,5 @@ .home { + margin: $gap * 3; .sticky-cta { margin: -1.6rem -1.6rem 0 -1.6rem; } 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..9adfddca 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 }}
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, From 8fbb0e99ae153013bba6e9a39465bad1b6c2b313 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 18 Dec 2019 16:49:58 -0500 Subject: [PATCH 5/7] Fix side nav to match designs and delete unused html and css --- styles/elements/_sidenav.scss | 91 ++------------------------ templates/applications/new/step_2.html | 4 +- templates/components/sidenav_item.html | 34 ++-------- 3 files changed, 12 insertions(+), 117 deletions(-) diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 224895fb..d4a538f0 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -72,7 +72,7 @@ &.sidenav__list--padded { margin-top: 3 * $gap; margin-bottom: $footer-height; - padding: 0 $gap ($gap * 2); + padding-bottom: ($gap * 2); position: fixed; overflow-y: scroll; top: $topbar-height + $usa-banner-height + 4rem; @@ -109,100 +109,19 @@ &__link { display: block; padding: $gap ($gap * 2); - color: $color-black; - text-decoration: none; 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/templates/applications/new/step_2.html b/templates/applications/new/step_2.html index 9adfddca..462c0f46 100644 --- a/templates/applications/new/step_2.html +++ b/templates/applications/new/step_2.html @@ -58,9 +58,9 @@ {{ Icon("plus") }}
-
+
-
+
{% block next_button %} {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }} 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 %} From a231ba5210289772a4e7df6d24d848260ccd0175 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 18 Dec 2019 16:54:55 -0500 Subject: [PATCH 6/7] Update styling for add new portfolio button on home page --- templates/home.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/templates/home.html b/templates/home.html index 03dfd0fd..986c6e41 100644 --- a/templates/home.html +++ b/templates/home.html @@ -55,10 +55,13 @@
    - - - {{ "home.add_portfolio_button_text" | translate }} - +
    +
    + + {{ "home.add_portfolio_button_text" | translate }} + +
    +
    From c642708c44afb15da3d70edfd088ba92cf9df666 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 18 Dec 2019 16:57:15 -0500 Subject: [PATCH 7/7] Left align home page content --- styles/sections/_home.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/sections/_home.scss b/styles/sections/_home.scss index a721b71c..b0d715d2 100644 --- a/styles/sections/_home.scss +++ b/styles/sections/_home.scss @@ -5,7 +5,7 @@ } &__content { - margin: 4rem auto; + margin: 4rem; max-width: 900px; &--descriptions {