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

Update new portfolio layout

Browse Source 
- Move CTA buttons to floating footer
- separated -> bordered
This commit is contained in:
graham-dds 2019-12-17 16:10:21 -05:00
parent a227044ccf
commit b270d0e4b0
2 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
styles/components/_forms.scss
View File

@ -1,7 +1,8 @@
// Form Grid
.form-row {
margin: ($gap * 4) 0;
&--separated {
&--bordered {
border-bottom: $color-gray-lighter 1px solid;
}

26
templates/portfolios/new/step_1.html
View File

@ -16,15 +16,16 @@
</div>
{{ StickyCTA(text="Create New Portfolio") }}
<base-form inline-template>
<form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
<div class="row">
<form id="portfolio-create" class="col" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
{{ form.csrf_token }}
<div class="form-row form-row--separated">
<div class="form-row form-row--bordered">
<div class="form-col">
{{ TextInput(form.name, optional=False) }}
{{ TextInput(form.name, optional=False, classes="form-col") }}
{{"forms.portfolio.name.help_text" | translate | safe }}
</div>
</div>
<div class="form-row form-row--separated">
<div class="form-row form-row--bordered">
<div class="form-col">
{{ TextInput(form.description, paragraph=True) }}
{{"forms.portfolio.description.help_text" | translate | safe }}
@ -36,16 +37,15 @@
{{ "forms.portfolio.defense_component.help_text" | translate | safe }}
</div>
</div>
<div class='action-group'>
{{
SaveButton(
text=('common.save' | translate),
form="portfolio-create",
element="input",
)
}}
</div>
<div class='action-group-footer'>
{% block next_button %}
{{ SaveButton(text=('common.save' | translate), form="portfolio-create", element="input") }}
{% endblock %}
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
Cancel
</a>
</form>
</div>
</base-form>
</main>
{% endblock %}