Merge branch 'staging' into take3

static/icons/clock.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="clock" class="svg-inline--fa fa-clock fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>

static/icons/user.svg

@@ -0,0 +1 @@
+<svg height='100px' width='100px'  fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" x="0px" y="0px"><path d="M16 16h-2v-3.225l-3.919-.781c-.626-.125-1.081-.68-1.081-1.319v-1.433c0-.477.236-.921.631-1.187.288-.195 1.369-1.46 1.369-3.055 0-1.853-1.558-3-3-3-1.449 0-3 1.206-3 3 0 1.596 1.081 2.859 1.371 3.056.395.268.629.711.629 1.186v1.433c0 .64-.455 1.194-1.083 1.319l-3.916.783-.001 3.223h-2v-3.221c0-.951.677-1.776 1.609-1.963l3.391-.677v-.623c-.765-.677-2-2.38-2-4.516 0-3.088 2.595-5 5-5 2.757 0 5 2.243 5 5 0 2.134-1.234 3.837-2 4.516v.623l3.396.679c.929.187 1.604 1.01 1.604 1.957v3.225z"></path></svg>

styles/components/_empty_state.scss

@@ -1,8 +1,6 @@
 .empty-state {
-  padding: $gap * 3;
+  max-width: $max-panel-width;
-  max-width: 100%;
   background-color: $color-gray-lightest;
-  margin-top: $gap * 5;
 
   &--white {
     background-color: $color-white;
@@ -18,17 +16,28 @@
     margin-top: 3rem;
   }
 
+  h3 {
+    margin: 0 0 1rem;
+    padding: 3.2rem 2.4rem 0;
+  }
+
+  p {
+    margin: 0;
+    padding: 0 $gap * 3;
+  }
+
   hr {
-    margin-left: -$gap * 3;
+    margin: $gap * 4 0 0;
-    margin-right: -$gap * 3;
   }
 
   &__footer {
     text-align: center;
+    background-color: $color-gray-lightest;
+    padding: $gap * 3;
 
     a.usa-button {
       width: 60%;
-      display: inline-block;
+      margin: 0 auto;
     }
   }
 }

styles/components/_footer.scss

@@ -3,9 +3,7 @@
   background-color: $color-white;
   border-top: 1px solid $color-gray-lightest;
   display: flex;
-  flex-direction: row-reverse;
   align-items: center;
-  padding: $gap * 1.5;
   position: fixed;
   left: 0;
   bottom: 0;
@@ -13,8 +11,11 @@
   height: $footer-height;
   color: $color-gray-dark;
   font-size: 1.5rem;
+  padding: 0 $gap * 1.5;
 
   &__login {
-    padding-left: 0.8rem;
+    width: 100%;
+    max-width: 1175px;
+    text-align: right;
   }
 }

styles/components/_global_layout.scss

@@ -22,15 +22,18 @@ body {
   padding-bottom: $footer-height * 2.5;
 
   .global-panel-container {
-    margin: $gap;
     flex-grow: 1;
     -ms-flex-negative: 1;
     top: $usa-banner-height + $topbar-height;
     position: relative;
+    padding: 0 $large-spacing;
 
     @include media($medium-screen) {
-      margin: $gap * 2;
       top: $usa-banner-height + $topbar-height;
     }
+
+    .user-edit {
+      max-width: $max-panel-width;
+    }
   }
 }

styles/components/_portfolio_layout.scss

@@ -3,26 +3,34 @@
     @include grid-row;
     min-height: 500px;
   }
+}
 
-  margin-left: 2 * $gap;
+.portfolio-header-new .portfolio-header__name {
+  padding: 1.6rem 0;
 }
 
 .portfolio-header {
   flex-direction: column;
+  margin: $gap * 2 0;
+  max-width: $max-panel-width;
+
   @include media($small-screen) {
     flex-direction: row;
   }
 
-  margin-bottom: $gap * 1;
-
   .col--grow {
     overflow: inherit;
+    display: table;
+    min-height: 10rem;
   }
 
   &__name {
     @include h1;
+    display: table-cell;
+    vertical-align: middle;
+
     h1 {
-      margin: 0 $gap ($gap * 2) 0;
+      margin: 0;
       font-size: 3.5rem;
     }
 
@@ -30,6 +38,7 @@
       font-size: $small-font-size;
       margin: 0 0 (-$gap * 0.5);
       color: $color-gray-medium;
+      max-width: 100%;
     }
   }
 
@@ -38,9 +47,15 @@
     font-size: $small-font-size;
 
     .icon-link {
-      padding: $gap;
+      padding: 0;
       border-radius: 0;
       color: $color-blue-darkest;
+      min-width: 10rem;
+      min-height: 10rem;
+
+      .col {
+        margin: 0 auto;
+      }
 
       &:hover {
         background-color: $color-aqua-lightest;
@@ -53,6 +68,7 @@
       &.active {
         color: $color-blue;
         background-color: $color-gray-lightest;
+        text-decoration: none;
 
         &:hover {
           background-color: $color-aqua-lightest;
@@ -82,11 +98,19 @@
   margin-bottom: 3 * $gap;
 }
 
-.portfolio-content {
+.portfolio-admin {
-  margin: (4 * $gap) $gap 0 $gap;
+  margin: $large-spacing 0;
+  max-width: $max-panel-width;
+}
 
+.portfolio-content {
   .panel {
     padding-bottom: 2rem;
+    max-width: $max-panel-width;
+  }
+
+  hr {
+    max-width: $max-panel-width;
   }
 
   a.add-new-button {
@@ -251,6 +275,7 @@
 
 .portfolio-applications {
   margin-top: $gap * 5;
+  max-width: $max-panel-width;
 
   &__header {
     &--title {
@@ -296,8 +321,8 @@
 }
 
 .portfolio-funding {
-  padding: 2 * $gap;
+  max-width: $max-panel-width;
-  padding-top: 0;
+  margin: $large-spacing 0;
 
   .panel {
     @include shadow-panel;
@@ -366,6 +391,8 @@
 }
 
 .portfolio-reports {
+  max-width: $max-panel-width;
+
   &__header {
     margin-bottom: 4 * $gap;
 

styles/components/_sticky_cta.scss

@@ -20,12 +20,10 @@
   .sticky-cta-container {
     display: flex;
     align-items: center;
+    max-width: 90rem;
 
     .usa-button {
-      margin: $gap $gap * 1.5 $gap 0;
+      margin: 0;
-      width: 20rem;
-      height: 3.2rem;
-      font-size: $small-font-size;
     }
   }
 
@@ -42,6 +40,10 @@
   &-buttons {
     display: flex;
 
+    a {
+      font-size: 1.5rem;
+    }
+
     .action-group {
       margin: 0;
 

styles/components/_topbar.scss

@@ -4,14 +4,15 @@
   height: $topbar-height;
   position: fixed;
   top: $usa-banner-height;
-  width: 100%;
   z-index: 10;
+  width: 100%;
 
   &__navigation {
     display: flex;
     flex-direction: row;
     align-items: stretch;
     justify-content: space-between;
+    max-width: 1190px;
 
     a {
       color: $color-white;
@@ -64,3 +65,11 @@
     justify-content: flex-end;
   }
 }
+
+.login-topbar .topbar__navigation {
+  max-width: 100%;
+}
+
+.login-topbar .topbar__context .topbar__link-icon {
+  margin: 0 0 0 0.8rem;
+}

styles/core/_grid.scss

@@ -41,7 +41,6 @@
 
   &.col--grow {
     flex: 1 auto;
-    padding-right: $spacing-small;
   }
 
   &.col--half {

styles/core/_util.scss

@@ -94,3 +94,7 @@ hr {
     margin: ($gap * 3) ($site-margins * -4);
   }
 }
+
+.usa-section {
+  padding: 0;
+}

styles/core/_variables.scss

@@ -16,8 +16,9 @@ $footer-height: 5rem;
 $usa-banner-height: 2.8rem;
 $sidenav-expanded-width: 25rem;
 $sidenav-collapsed-width: 10rem;
-$max-panel-width: 80rem;
+$max-panel-width: 90rem;
 $home-pg-icon-width: 6rem;
+$large-spacing: 4rem;
 
 /*
  * USWDS Variables
@@ -189,4 +190,4 @@ $spacing-x-small: 0.5rem;
 $spacing-small: 1rem;
 $spacing-md-small: 1.5rem;
 $spacing-medium: 2rem;
-$spacing-large: 3rem;
+$spacing-large: 4rem;

styles/elements/_labels.scss

@@ -21,7 +21,7 @@
   text-transform: uppercase;
 
   &--default {
-    background-color: $color-gray-dark;
+    background-color: $color-gray;
   }
 
   &--info {

styles/elements/_panels.scss

@@ -19,10 +19,7 @@
 }
 
 @mixin panel-margin {
-  margin-top: 0;
+  margin: $spacing-large 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: $site-margins-mobile * 6;
 
   @include media($medium-screen) {
     margin-bottom: $site-margins * 8;
@@ -56,9 +53,10 @@
   @include panel-theme-default;
   @include panel-margin;
   @include shadow-panel;
+  max-width: $max-panel-width;
 
   &__content {
-    padding: $gap * 2;
+    padding: 3.2rem 2.4rem;
   }
 
   &__body {
@@ -66,7 +64,7 @@
   }
 
   &__heading {
-    padding: $gap * 2;
+    padding: 3.2rem 2.4rem;
 
     @include media($medium-screen) {
       padding: $gap * 4;

styles/elements/_sidenav.scss

@@ -113,8 +113,8 @@
     text-overflow: ellipsis;
 
     &--active {
-      @include h4;
+      font-size: $base-font-size;
-
+      font-weight: $font-bold;
       background-color: $color-aqua-lightest !important;
       color: $color-primary-darker !important;
       box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;

styles/sections/_home.scss

@@ -1,12 +1,11 @@
 .home {
-  margin: $gap * 3;
   .sticky-cta {
     margin: -1.6rem -1.6rem 0 -1.6rem;
   }
 
   &__content {
-    margin: 4rem;
+    margin: $large-spacing 0;
-    max-width: 900px;
+    max-width: $max-panel-width;
 
     &--descriptions {
       .col {
@@ -29,7 +28,7 @@
   background-color: $color-white;
 
   .home-container {
-    max-width: 90rem;
+    max-width: $max-panel-width;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 8rem;

templates/applications/fragments/environments.html

@@ -1,3 +1,4 @@
+{% from "components/alert.html" import Alert %}
 {% from "components/icon.html" import Icon %}
 {% from "components/label.html" import Label %}
 {% from 'components/save_button.html' import SaveButton %}
@@ -10,10 +11,13 @@
   new_env_form) %}
 
   <h3>{{ "portfolios.applications.settings.environments" | translate }}</h3>
-  <section class="panel" id="application-environments">
+  {% if portfolio.num_task_orders == 0 -%}
+    {{ Alert(message="portfolios.applications.environments.funding_alert"|translate({'name': portfolio.name})) }}
+  {%- endif %}
   {% if g.matchesPath("application-environments") -%}
     {% include "fragments/flash.html" %}
   {%- endif %}
+  <section class="panel" id="application-environments">
     {% if 0 == environments_obj | length -%}
       <div class="empty-state panel__content">
         <p class="empty-state__message">
@@ -30,6 +34,7 @@
                 <li class="accordion-table__item">
                   <div class="accordion-table__item-content">
                     <div class="environment-list__item">
+                      {% if not env["pending"] -%}
                         <span>
                           <a
                             href='{{ url_for("applications.access_environment", environment_id=env.id)}}'
@@ -38,6 +43,12 @@
                             {{ env['name'] }} {{ Icon('link', classes='icon--medium icon--primary') }}
                           </a>
                         </span>
+                      {% else -%}
+                        <span>
+                          {{ env['name'] }}
+                        </span>
+                        {{ Label(type="pending_creation", classes='label--below')}}
+                      {%- endif %}
                       {% if user_can(permissions.EDIT_ENVIRONMENT) -%}
                         {{
                         ToggleButton(
@@ -57,10 +68,6 @@
                           classes="environment-list__item__members"
                         )
                       }}
-                      <br>
-                      {% if env['pending'] -%}
-                        {{ Label(type="changes_pending", classes='label--below')}}
-                      {%- endif %}
                     </div>
                   </div>
 

templates/applications/index.html

@@ -24,11 +24,8 @@
   {% if not portfolio.applications %}
 
     {{ EmptyState(
-      header="portfolios.applications.empty_state.header"|translate,
+      resource='applications',
-      message="portfolios.applications.empty_state.message"|translate,
-      button_text="portfolios.applications.empty_state.button_text"|translate,
       button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
-      view_only_text="portfolios.applications.empty_state.view_only_text"|translate,
       user_can_create=can_create_applications,
     ) }}
 

templates/base_public.html

@@ -17,7 +17,7 @@
 <div id='app-root'>
   {% include 'components/usa_header.html' %}
 
-  {% include 'navigation/topbar.html' %}
+  <div class='login-topbar'>{% include 'navigation/topbar.html' %}</div>
 
   {% block content %}{% endblock %}
 

templates/components/empty_state.html

@@ -1,14 +1,22 @@
-{% macro EmptyState(header, message, button_text, button_link, view_only_text, user_can_create=True) %}
+{% macro EmptyState(resource, button_link, user_can_create=False) %}
+  {% if user_can_create %}
+    {% set perms = 'edit' %}
+  {% else %}
+    {% set perms = 'view' %}
+  {% endif %}
+
+  {% set header = "empty_state.{}.header.{}".format(resource, perms) | translate | safe %}
+  {% set message = "empty_state.{}.message.{}".format(resource, perms) | translate | safe %}
+  {% set button_text = "empty_state.{}.button_text".format(resource) | translate | safe %}
+
   <div class="empty-state">
     <h3>{{ header }}</h3>
     <p>{{ message }}</p>
+    {% if user_can_create -%}
       <hr>
       <div class="empty-state__footer">
-      {% if user_can_create %}
         <a href="{{ button_link }}" class="usa-button usa-button-primary">{{ button_text }}</a>
-      {% else %}
-        <p>{{ view_only_text }}</p>
-      {% endif %}
       </div>
+    {%- endif %}
   </div>
 {% endmacro %}

templates/components/label.html

@@ -9,6 +9,11 @@
           "text": "changes pending",
           "color": "default",
       },
+      "pending_creation": {
+          "icon": "clock",
+          "text": "pending creation",
+          "color": "default",
+      },
       "ppoc": {"text": "primary point of contact"}
   } %}
 

templates/navigation/topbar.html

@@ -11,7 +11,7 @@
     <div class="topbar__context">
       {% if g.current_user %}
         <a href="{{ url_for('users.user') }}" class="topbar__link">
-          {{ Icon('avatar', classes='topbar__link-icon') }}
+          {{ Icon('user', classes='topbar__link-icon') }}
           <span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
         </a>
         <a href="#" class="topbar__link">

templates/portfolios/admin.html

@@ -22,7 +22,7 @@
             {{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
             {{ TextInput(portfolio_form.description, validation="defaultTextAreaField", paragraph=True) }}
             <div class='edit-portfolio-name action-group'>
-              {{ SaveButton(text='Save Changes', additional_classes='usa-button-big') }}
+              {{ SaveButton(text='Save Changes') }}
             </div>
           </form>
         </base-form>

templates/portfolios/new/step_1.html

@@ -10,9 +10,10 @@
 
 <main class="usa-section usa-content">
   {% include "fragments/flash.html" %}
+  <div class="portfolio-header-new">
     <div class='portfolio-header__name'>
       <p>{{ "portfolios.header" | translate }}</p>
-    <h1>{{ "portfolios.new.title" | translate }}</h1>
+      <h1>{{ 'portfolios.new.title' | translate }}</h1>
     </div>
   {{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }}
   <base-form inline-template>

templates/portfolios/reports/application_and_env_spending.html

@@ -6,17 +6,10 @@
   {% if not portfolio.applications %}
 
     {% set can_create_applications = user_can(permissions.CREATE_APPLICATION) %}
-    {% set message = ('portfolios.reports.empty_state.sub_message.can_create_applications' | translate)
-      if can_create_applications
-      else ('portfolios.reports.empty_state.sub_message.cannot_create_applications' | translate)
-    %}
 
     {{ EmptyState(
-      header='portfolios.reports.empty_state.message' | translate,
+      resource='applications_reporting',
-      message=message,
-      button_text="portfolios.applications.empty_state.button_text"|translate,
       button_link=url_for("applications.view_new_application_step_1", portfolio_id=portfolio.id),
-      view_only_text="portfolios.applications.empty_state.view_only_text"|translate,
       user_can_create=can_create_applications,
     ) }}
 

templates/task_orders/index.html

@@ -85,11 +85,8 @@
     {% endcall %}
   {% else %}
     {{ EmptyState(
-      header="task_orders.empty_state.header"|translate,
+      resource="task_orders",
-      message="task_orders.empty_state.message"|translate,
       button_link=url_for('task_orders.form_step_one_add_pdf', portfolio_id=portfolio.id),
-      button_text="task_orders.empty_state.button_text"|translate,
-      view_only_text="task_orders.empty_state.view_only_text"|translate,
       user_can_create=user_can(permissions.CREATE_TASK_ORDER),
     ) }}
   {% endif %}

templates/user/edit.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class='col'>
+<div class='col user-edit'>
 
   {% include "fragments/flash.html" %}
 

translations.yaml

@@ -84,6 +84,31 @@ email:
   application_invite: "{inviter_name} has invited you to a JEDI cloud application"
   portfolio_invite: "{inviter_name} has invited you to a JEDI cloud portfolio"
   environment_ready: JEDI cloud environment ready
+empty_state:
+  applications:
+    header:
+      edit: You don’t have any Applications yet
+      view: This portfolio has no Applications
+    message:
+      edit: You can manage multiple Applications within a single Portfolio as long as the funding sources are the same.
+      view: A Portfolio member with <b>Edit Application</b> permissions can add Applications to this Portfolio.
+    button_text: Create Your First Application
+  applications_reporting:
+    header:
+      edit: Nothing to report.
+      view: Nothing to report.
+    message:
+      edit: This portfolio has no cloud environments set up, so there is no spending data to report. Create an application with some cloud environments to get started.
+      view: This portfolio has no cloud environments set up, so there is no spending data to report. Contact the portfolio owner to set up some cloud environments.
+    button_text: Add a new application
+  task_orders:
+    header:
+      edit: Add approved task orders
+      view: This Portfolio has no Task Orders
+    message:
+      edit: Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future.
+      view: A Portfolio member with <b>Edit Funding</b> permissions can fund this Portfolio with approved Task Orders.
+    button_text: Add Task Order
 flash:
   application:
     created:
@@ -370,11 +395,6 @@ portfolios:
     add_member: Add Team Member
     add_another_environment: Add another environment
     create_button: Create Application
-    empty_state:
-      header: You don't have any Applications yet
-      message: You can manage multiple Applications within a single Portfolio as long as the funding sources are the same.
-      button_text: Create Your First Application
-      view_only_text: Contact your portfolio administrator to add an application.
     new:
       step_1_header: Name and Describe New Application
       step_1_button_text: "Next: Add Environments"
@@ -417,6 +437,7 @@ portfolios:
       add_subscription: Add new subscription
       blank_slate: This Application has no environments
       disabled: ": Access Suspended"
+      funding_alert: "Application environments will not be created until the {name} portfolio is funded."
     environments_heading: Application Environments
     existing_application_title: "{application_name} Application Settings"
     member_count: "{count} Members"
@@ -482,12 +503,6 @@ portfolios:
       header: Funding Duration
       tooltip: Funding duration is the period of time that there is a valid task order funding the portfolio.
     estimate_warning: Reports displayed in JEDI are estimates and not a system of record.
-    empty_state:
-      message: Nothing to report.
-      sub_message:
-        can_create_applications: This portfolio has no cloud environments set up, so there is no spending data to report. Create an application with some cloud environments to get started.
-        cannot_create_applications: This portfolio has no cloud environments set up, so there is no spending data to report. Contact the portfolio owner to set up some cloud environments.
-      action_label: "Add a new application"
     total_value:
       header: Total Portfolio Value
       tooltip: Total portfolio value is all obligated and projected funds for all task orders in this portfolio.
@@ -549,11 +564,6 @@ task_orders:
     sticky_header_text: "Add a Task Order"
     sticky_header_review_text: Review Changes
     sticky_header_context: "Step {step} of 5"
-  empty_state:
-    header: Add approved task orders
-    message: Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future.
-    button_text: Add Task Order
-    view_only_text: Contact your portfolio administrator to add a Task Order.
   sign:
     digital_signature_description: I confirm the uploaded Task Order is signed by the appropriate, duly warranted Agency Contracting Officer who authorized me to upload the Task Order.
     confirmation_description: I confirm that the information entered here in matches that of the submitted Task Order.