Merge pull request #6575 from christianbeeznest/ofaj-22825-2

Badges: Fix mobile button layout and display comments - refs BT#22825

Author: christianbeeznest

public/main/template/default/skill/issued_all.html.twig

@@ -25,14 +25,21 @@
                 </div>
 
                 {% if badge.allow_download_export %}
-                    <div class="mt-4 flex flex-wrap justify-center space-x-4 space-y-4">
+                    <div class="mt-4 max-w-xl mx-auto grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                         <div class="text-center">
-                            <a href="{{ badge.personal_badge }}" class="btn btn--primary">
+                            <a
+                                    href="{{ badge.personal_badge }}"
+                                    class="btn btn--primary w-full inline-block"
+                            >
                                 <em class="fa fa-download fa-fw"></em> {{ 'Download badges'|trans }}
                             </a>
                         </div>
                         <div class="text-center">
-                            <a href="#" class="btn btn--success" id="badge-export-button-{{ badge.issue_info.id }}">
+                            <a
+                                    href="#"
+                                    class="btn btn--success w-full inline-block"
+                                    id="badge-export-button-{{ badge.issue_info.id }}"
+                            >
                                 <em class="fa fa-external-link-square fa-fw"></em> {{ 'Export badge'|trans }}
                             </a>
                         </div>
@@ -128,16 +135,38 @@
                 </div>
             {% elseif badge.issue_info.comments|length > 0 %}
                 <hr class="my-4" />
-                <p class="text-lg font-semibold flex justify-between">
-                <span>
-                    <em class="fa fa-comment-o fa-fw"></em>
-                    {{ '%s comments'|trans|format(badge.issue_info.comments|length) }}
-                </span>
-                            <span>
-                    <em class="fa fa-thumbs-o-up fa-fw"></em>
-                    {{ 'Average rating %s'|trans|format(badge.issue_info.feedback_average) }}
-                </span>
-                        </p>
+                <p class="text-lg font-semibold flex flex-col sm:flex-row sm:justify-between gap-2">
+                    <span>
+                        <em class="fa fa-comment-o fa-fw"></em>
+                        {{ '%s comments'|trans|format(badge.issue_info.comments|length) }}
+                    </span>
+                    <span>
+                        <em class="fa fa-thumbs-o-up fa-fw"></em>
+                        {{ 'Average rating %s'|trans|format(badge.issue_info.feedback_average) }}
+                    </span>
+                </p>
+                <div class="mt-3 space-y-3">
+                    {% for comment in badge.issue_info.comments %}
+                        <article class="flex items-start justify-between gap-4 border rounded p-3">
+                            <div class="min-w-0">
+                                <h4 class="font-bold truncate">
+                                    {{ comment.giver_complete_name ?? comment.giver_name ?? '—' }}
+                                </h4>
+                                <p class="text-sm text-gray-600">{{ comment.datetime }}</p>
+                                {% if comment.text %}
+                                    <p class="mt-2 whitespace-pre-line">{{ comment.text }}</p>
+                                {% endif %}
+                            </div>
+                            <div class="flex items-center justify-end shrink-0">
+                                {% if comment.value %}
+                                    <span class="inline-flex items-center gap-1 text-sm font-semibold">
+                                        <em class="fa fa-certificate fa-fw"></em> {{ comment.value }}
+                                    </span>
+                                {% endif %}
+                            </div>
+                        </article>
+                    {% endfor %}
+                </div>
             {% endif %}
         </div>
     </div>