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
Download Patch File Download Diff File Expand all files Collapse all files

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

41
templates/components/sticky_cta.html
View File

@@ -1,23 +1,26 @@
{% from 'components/icon.html' import Icon %}
{% macro StickyCTA(text, 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 }}">
{{ Icon('caret_left', classes="icon--tiny icon--blue") }} {{ return_link_text}}
</a>
</div>
{% endif %}
<h3>{{ text }}</h3>
</div>
{% if caller %}
<div class="sticky-cta-buttons">
{{ caller() }}
</div>
{% endif %}
</div>
{% macro StickyCTA(text, context=None, return_link_url=None, return_link_text=None) -%}
<div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
{% if return_link_url and return_link_text %}
<div class="sticky-cta-return-link">
<a href="{{ return_link_url }}">
{{ Icon('caret_left', classes="icon--tiny icon--blue") }} {{ return_link_text}}
</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">
{{ caller() }}
</div>
{% endif %}
</div>
</div>
{%- endmacro %}