pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak multi-step header for app provisioning

Browse Source 
- add "context" option to StickyCTA
 - tweak styles to better-include context
 - add header text to translations
This commit is contained in:
graham-dds 2019-10-02 15:42:19 -04:00
parent 237123d474
commit 9d34f11d84
6 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
styles/components/_sticky_cta.scss
View File

@ -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 {

2
templates/applications/new/step_1.html
View File

@ -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 %}

3
templates/applications/new/step_2.html
View File

@ -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 %}

2
templates/applications/new/step_3.html
View File

@ -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 %}

9
templates/components/sticky_cta.html
View File

@ -1,9 +1,7 @@
{% from 'components/icon.html' import Icon %}
{% macro StickyCTA(text, return_link_url=None, return_link_text=None) -%}
{% macro StickyCTA(text, context=None, return_link_url=None, return_link_text=None) -%}
<div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
<div class="sticky-cta-container">
<div class="sticky-cta-text">
{% if return_link_url and return_link_text %}
<div class="sticky-cta-return-link">
<a href="{{ return_link_url }}">
@ -11,7 +9,12 @@
</a>
</div>
{% endif %}
<div class="sticky-cta-container">
<div class="sticky-cta-text">
<h3>{{ text }}</h3>
{% if context %}
<span class="sticky-cta-context"> {{ context }} </span>
{% endif %}
</div>
{% if caller %}
<div class="sticky-cta-buttons">

3
translations.yaml
View File

@ -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.