Improve recommends styling on review edit form

This commit is contained in:
rubenwardy 2020-07-10 20:47:03 +01:00
parent 61e2c8a1c0
commit 16b174d882
3 changed files with 19 additions and 4 deletions

@ -133,6 +133,21 @@
{% endfor %}
{%- endmacro %}
{% macro render_toggle_field(field, icons=[]) -%}
<div class="btn-group btn-group-toggle" data-toggle="buttons">
{% for value, label, checked in field.iter_choices() %}
<label class="btn btn-primary">
{% set icon = icons[value] %}
{% if icon %}
<i class="fas {{ icon }} mr-2"></i>
{% endif %}
<input type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}" autocomplete="off" {% if checked %} checked{% endif %}>
{{ label }}
</label>
{% endfor %}
</div>
{%- endmacro %}
{% macro render_submit_field(field, label=None, tabindex=None) -%}
{% if not label %}{% set label=field.label.text %}{% endif %}
{#<button type="submit" class="form-control btn btn-default btn-primary">{{label}}</button>#}

@ -87,11 +87,11 @@
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
<i class="fas fa-thumbs-up mr-2"></i>
<input type="radio" name="recommends" id="yes" autocomplete="off"> {{ _("Yes") }}
<input type="radio" name="recommends" value="yes" autocomplete="off"> {{ _("Yes") }}
</label>
<label class="btn btn-primary">
<i class="fas fa-thumbs-down mr-2"></i>
<input type="radio" name="recommends" id="no" autocomplete="off"> {{ _("No") }}
<input type="radio" name="recommends" value="no" autocomplete="off"> {{ _("No") }}
</label>
</div>

@ -11,7 +11,7 @@
{% block content %}
<h1>{{ _("Post a review for %(title)s by %(author)s", title=self.link(), author=package.author.display_name) }}</h1>
{% from "macros/forms.html" import render_field, render_submit_field, render_radio_field %}
{% from "macros/forms.html" import render_field, render_submit_field, render_toggle_field %}
<form method="POST" action="" enctype="multipart/form-data">
{{ form.hidden_tag() }}
<div class="row mt-0 mb-4 comments mx-0">
@ -28,7 +28,7 @@
<p>
{{ _("Do you recommend this %(type)s?", type=package.type.value | lower) }}
</p>
{{ render_radio_field(form.recommends) }}
{{ render_toggle_field(form.recommends, icons={"yes":"fa-thumbs-up", "no":"fa-thumbs-down"}) }}
<p class="mt-4 mb-3">
{{ _("Why or why not? Try to be constructive") }}