Improve recommends styling on review edit form

diff --git a/app/templates/macros/forms.html b/app/templates/macros/forms.html
index 858e0d4d0dda77d1543d219c474ac0023ea23bf9..89525f9575bd7101ff3dd8edb88b5a54f92024f7 100644 (file)
--- a/app/templates/macros/forms.html
+++ b/app/templates/macros/forms.html
@@ -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>#}

diff --git a/app/templates/macros/reviews.html b/app/templates/macros/reviews.html
index 642e086a7f1309f01b1c6b883a6cfaac477c6da1..1ab9de59bc2f0d01a385b9a172ad2697498e8245 100644 (file)
--- a/app/templates/macros/reviews.html
+++ b/app/templates/macros/reviews.html
@@ -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>
 

diff --git a/app/templates/packages/review_create_edit.html b/app/templates/packages/review_create_edit.html
index 6ed6fe12e91a75ca7a31897209ea64c7951bf466..eb4dff2767d6d2bad51257af34e38870beaf44c6 100644 (file)
--- a/app/templates/packages/review_create_edit.html
+++ b/app/templates/packages/review_create_edit.html
@@ -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") }}