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 Grid
.form-row { .form-row {
margin: ($gap * 4) 0; margin: ($gap * 4) 0;
&--separated {
&--bordered {
border-bottom: $color-gray-lighter 1px solid; border-bottom: $color-gray-lighter 1px solid;
} }

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

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