Add horizontal breaks to form

This commit is contained in:
graham-dds 2019-12-11 15:49:56 -05:00
parent a097a0ce61
commit f4f3e3dee3
2 changed files with 20 additions and 10 deletions

View File

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

View File

@ -14,21 +14,28 @@
<p>{{ "portfolios.header" | translate }}</p>
<h1>{{ "New Portfolio" }}</h1>
</div>
{{ StickyCTA(text="Name and Describe Portfolio", context="Step 1 of 2") }}
{{ StickyCTA(text="Create New Portfolio") }}
<base-form inline-template>
<form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
{{ form.csrf_token }}
{{ TextInput(form.name, optional=False) }}
{{"forms.portfolio.name.help_text" | translate | safe }}
<div>
{{ TextInput(form.description, paragraph=True) }}
{{"forms.portfolio.description.help_text" | translate | safe }}
<div class="form-row form-row--separated">
<div class="form-col">
{{ TextInput(form.name, optional=False) }}
{{"forms.portfolio.name.help_text" | translate | safe }}
</div>
<div>
<strong class="h4">{{ "forms.portfolio.defense_component.label" | translate }}</strong>
{{ "forms.portfolio.defense_component.help_text" | translate | safe }}
{{ MultiCheckboxInput(form.defense_component, optional=False) }}
</div>
<div class="form-row form-row--separated">
<div class="form-col">
{{ TextInput(form.description, paragraph=True) }}
{{"forms.portfolio.description.help_text" | translate | safe }}
</div>
</div>
<div class="form-row">
<div class="form-col">
{{ MultiCheckboxInput(form.defense_component, optional=False) }}
{{ "forms.portfolio.defense_component.help_text" | translate | safe }}
</div>
</div>
<div class='action-group'>
{{
SaveButton(