diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 0656c660..c5946951 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -2,6 +2,11 @@ margin-left: -$gap * 4; margin-right: -$gap * 5; z-index: 10; + background-color: $color-gray-lightest; + border-top: 1px solid $color-gray-lighter; + border-bottom: 1px solid $color-gray-lighter; + padding: 0 $gap * 5 0 $gap * 5; + box-shadow: $box-shadow; @include media($medium-screen) { margin-right: -$gap * 5; @@ -16,12 +21,6 @@ display: flex; align-items: center; - background-color: $color-gray-lightest; - border-top: 1px solid $color-gray-lighter; - border-bottom: 1px solid $color-gray-lighter; - padding: 0 $gap * 5 0 $gap * 5; - box-shadow: $box-shadow; - .usa-button { margin: $gap $gap * 1.5 $gap 0; width: 20rem; @@ -32,6 +31,12 @@ &-text { flex-grow: 1; + display: flex; + align-items: baseline; + } + &-context { + color: $color-gray; + margin-left: $gap; } &-buttons { diff --git a/templates/applications/new/step_1.html b/templates/applications/new/step_1.html index 4ce3d5b3..30db02a3 100644 --- a/templates/applications/new/step_1.html +++ b/templates/applications/new/step_1.html @@ -14,7 +14,7 @@ {% block portfolio_header %} {% include "portfolios/header.html" %} - {{ StickyCTA(text="Name and Describe New Application") }} + {{ StickyCTA(text="Name and Describe New Application", context="Step 1 of 3") }} {% endblock %} {% block application_content %} diff --git a/templates/applications/new/step_2.html b/templates/applications/new/step_2.html index fa0954e7..6760333c 100644 --- a/templates/applications/new/step_2.html +++ b/templates/applications/new/step_2.html @@ -8,7 +8,8 @@ {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %} {% block portfolio_header %} - {{ StickyCTA(text=application.name) }} + {% include "portfolios/header.html" %} + {{ StickyCTA(text=('portfolios.applications.new.step_2_header' | translate({"application_name": application.name}) ), context="Step 2 of 3") }} {% endblock %} {% block application_content %} diff --git a/templates/applications/new/step_3.html b/templates/applications/new/step_3.html index c963beee..6b2dbde3 100644 --- a/templates/applications/new/step_3.html +++ b/templates/applications/new/step_3.html @@ -6,7 +6,7 @@ {% block portfolio_header %} {% include "portfolios/header.html" %} - {{ StickyCTA(text=application.name) }} + {{ StickyCTA(text=('portfolios.applications.new.step_3_header' | translate({"application_name": application.name}) ), context="Step 3 of 3") }} {% endblock %} {% block application_content %} diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html index 4ba268c0..3d66dd6a 100644 --- a/templates/components/sticky_cta.html +++ b/templates/components/sticky_cta.html @@ -1,23 +1,26 @@ {% from 'components/icon.html' import Icon %} -{% macro StickyCTA(text, return_link_url=None, return_link_text=None) -%} -
-
-
- {% if return_link_url and return_link_text %} - - {% endif %} -

{{ text }}

-
- {% if caller %} -
- {{ caller() }} -
- {% endif %} -
+{% macro StickyCTA(text, context=None, return_link_url=None, return_link_text=None) -%} +
+ {% if return_link_url and return_link_text %} + + {% endif %} +
+
+

{{ text }}

+ {% if context %} + {{ context }} + {% endif %} +
+ {% if caller %} +
+ {{ caller() }} +
+ {% endif %} +
+
{%- endmacro %} diff --git a/translations.yaml b/translations.yaml index 83cbe0ad..601cedb6 100644 --- a/translations.yaml +++ b/translations.yaml @@ -308,8 +308,11 @@ portfolios: add_another_environment: Add another environment app_settings_text: App settings new: + step_1_header: "Name and Describe New Application" step_1_button_text: "Save and Add Environments" + step_2_header: Add Environments to {application_name} step_2_button_text: "Save and Add Members" + step_3_header: Invite Members to {application_name} step_3_button_text: Save Application create_new_env: Create a new environment. create_new_env_info: Creating an environment gives you access to the Cloud Service Provider. This environment will function within the constraints of the task order, and any costs will be billed against the portfolio.