ui: (pf4) update forms

This commit is contained in:
Jens Langhammer 2020-06-09 13:39:35 +02:00
parent d6b9e67e78
commit b86b36f947
2 changed files with 66 additions and 50 deletions

View File

@ -35,10 +35,12 @@
{% block beneath_form %} {% block beneath_form %}
{% endblock %} {% endblock %}
<div class="pf-c-form__group pf-m-action"> <div class="pf-c-form__group pf-m-action">
<div class="pf-c-form__horizontal-group"> <div class="pf-c-form__group-control">
<div class="pf-c-form__actions"> <div class="pf-c-form__horizontal-group">
<input class="pf-c-button pf-m-primary" type="submit" value="{% block action %}{% endblock %}" /> <div class="pf-c-form__actions">
<a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a> <input class="pf-c-button pf-m-primary" type="submit" value="{% block action %}{% endblock %}" />
<a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -5,58 +5,72 @@
{% for field in form %} {% for field in form %}
<div class="pf-c-form__group {% if field.errors %} has-error {% endif %}"> <div class="pf-c-form__group {% if field.errors %} has-error {% endif %}">
{% if field.field.widget|fieldtype == 'RadioSelect' %} {% if field.field.widget|fieldtype == 'RadioSelect' %}
<label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}"> <div class="pf-c-form__group-label">
<span class="pf-c-form__label-text">{{ field.label }}</span> <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
{% if field.field.required %} <span class="pf-c-form__label-text">{{ field.label }}</span>
<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span> {% if field.field.required %}
{% endif %} <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
</label> {% endif %}
{% for c in field %} </label>
<div class="radio col-sm-10">
<input type="radio" id="{{ field.name }}-{{ forloop.counter0 }}"
name="{% if wizard %}{{ wizard.steps.current }}-{% endif %}{{ field.name }}" value="{{ c.data.value }}"
{% if c.data.selected %} checked {% endif %}>
<label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ c.choice_label }}</label>
</div> </div>
{% if field.help_text %} <div class="pf-c-form__group-control">
<p class="pf-c-form__helper-text">{{ field.help_text }}</p> {% for c in field %}
{% endif %} <div class="radio col-sm-10">
{% endfor %} <input type="radio" id="{{ field.name }}-{{ forloop.counter0 }}"
{% elif field.field.widget|fieldtype == 'Select' %} name="{% if wizard %}{{ wizard.steps.current }}-{% endif %}{{ field.name }}" value="{{ c.data.value }}"
<label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}"> {% if c.data.selected %} checked {% endif %}>
<span class="pf-c-form__label-text">{{ field.label }}</span> <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ c.choice_label }}</label>
{% if field.field.required %}
<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
{% endif %}
</label>
<div class="pf-c-form__horizontal-group">
{{ field|css_class:"pf-c-form-control" }}
{% if field.help_text %}
<p class="pf-c-form__helper-text">{{ field.help_text|safe }}</p>
{% endif %}
</div>
{% elif field.field.widget|fieldtype == 'CheckboxInput' %}
<div class="pf-c-form__horizontal-group">
<div class="pf-c-check">
{{ field|css_class:"pf-c-check__input" }}
<label class="pf-c-check__label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ field.label }}</label>
</div> </div>
{% if field.help_text %} {% if field.help_text %}
<p class="pf-c-form__helper-text">{{ field.help_text|safe }}</p> <p class="pf-c-form__helper-text">{{ field.help_text }}</p>
{% endif %} {% endif %}
{% endfor %}
</div>
{% elif field.field.widget|fieldtype == 'Select' %}
<div class="pf-c-form__group-label">
<label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
<span class="pf-c-form__label-text">{{ field.label }}</span>
{% if field.field.required %}
<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
{% endif %}
</label>
</div>
<div class="pf-c-form__group-control">
<div class="pf-c-form__horizontal-group">
{{ field|css_class:"pf-c-form-control" }}
{% if field.help_text %}
<p class="pf-c-form__helper-text">{{ field.help_text|safe }}</p>
{% endif %}
</div>
</div>
{% elif field.field.widget|fieldtype == 'CheckboxInput' %}
<div class="pf-c-form__group-control">
<div class="pf-c-form__horizontal-group">
<div class="pf-c-check">
{{ field|css_class:"pf-c-check__input" }}
<label class="pf-c-check__label" for="{{ field.name }}-{{ forloop.counter0 }}">{{ field.label }}</label>
</div>
{% if field.help_text %}
<p class="pf-c-form__helper-text">{{ field.help_text|safe }}</p>
{% endif %}
</div>
</div> </div>
{% else %} {% else %}
<label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}"> <div class="pf-c-form__group-label">
<span class="pf-c-form__label-text">{{ field.label }}</span> <label class="pf-c-form__label" for="{{ field.name }}-{{ forloop.counter0 }}">
{% if field.field.required %} <span class="pf-c-form__label-text">{{ field.label }}</span>
<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span> {% if field.field.required %}
{% endif %} <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
</label> {% endif %}
<div class="c-form__horizontal-group"> </label>
{{ field|css_class:'pf-c-form-control' }} </div>
{% if field.help_text %} <div class="pf-c-form__group-control">
<p class="pf-c-form__helper-text">{{ field.help_text|safe }}</p> <div class="c-form__horizontal-group">
{% endif %} {{ field|css_class:'pf-c-form-control' }}
{% if field.help_text %}
<p class="pf-c-form__helper-text">{{ field.help_text|safe }}</p>
{% endif %}
</div>
</div> </div>
{% endif %} {% endif %}
{% for error in field.errors %} {% for error in field.errors %}