Last commit july 5th

templates/conference/show.html.twig

@@ -3,32 +3,68 @@
 {% block title %}Conference Guestbook - {{ conference }}{% endblock %}
 
 {% block body %}
-    <h2>{{ conference }} Conference</h2>
 
-    {% if comments|length > 0 %}
-        <div>There are {{ comments|length }} comments.</div>
-        {% for comment in comments %}
-            {% if comment.photofilename %}
-                <img src="{{ asset('uploads/photos/' ~ comment.photofilename) }}" style="max-width: 200px" />
-            {% endif %}
+    {% for message in app.flashes('notification') %}
+        <div class="alert alert-info alert-dismissible fade show">
+        {{ message }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        </div>
+    {% endfor %}
+    <h2 class="mb-5">
+        {{ conference }} Conference
+    </h2>
 
-            <h4>{{ comment.author }}</h4>
-            <small>
-                {{ comment.createdAt|format_datetime('medium', 'short') }}
-            </small>
+    <div class="row">
+        <div class="col-12 col-lg-8">
+            {% if comments|length > 0 %}
+                {% for comment in comments %}
+                    <div class="media shadow border rounded-3 p-3 mb-4">
+                        <div class="comment-img me-3">
+                            {% if comment.photofilename %}
+                                <a href="{{ asset('uploads/photos/' ~ comment.photofilename) }}" target="_blank">
+                                    <img src="{{ asset('uploads/photos/' ~ comment.photofilename) }}" />
+                                </a>
+                            {% endif %}
+                        </div>
 
-            <p>{{ comment.text }}</p>
-        {% endfor %}
-        {% if previous >= 0 %}
-            <a href="{{ path('conference', { slug: conference.slug, offset: previous }) }}">Previous</a>
-                    {% endif %}
+                        <div class="media-body">
+                            <h4 class="font-weight-light mb-0">
+                                {{ comment.author }}
+                            </h4>
+
+                            <div class="mb-2">
+                                <small class="text-muted text-uppercase">
+                                    {{ comment.createdAt|format_datetime('medium', 'short') }}
+                                </small>
+                            </div>
+
+                            <div class="comment-text">
+                                {{ comment.text|nl2br }}
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+                <div>{{ 'nb_of_comments'|trans({count: comments|length}) }}</div>
+                {% if previous >= 0 %}
+                    <a href="{{ path('conference', { slug: conference.slug, offset: previous }) }}">Previous</a>
+                {% endif %}
                 {% if next < comments|length %}
                     <a href="{{ path('conference', { slug: conference.slug, offset: next }) }}">Next</a>
                 {% endif %}
-    {% else %}
-        <div>No comments have been posted yet for this conference.</div>
-    {% endif %}
-    <h2>Add your own feedback</h2>
+            {% else %}
+                <div class="text-center">
+                    No comments have been posted yet for this conference.
+                </div>
+            {% endif %}
+        </div>
+        <div class="col-12 col-lg-4">
+            <div class="bg-light shadow border rounded-3 p-4">
+                <h3 class="font-weight-light">
+                    Add your own feedback
+                </h3>
 
-    {{ form(comment_form) }}
-{% endblock %}
+                {{ form(comment_form) }}
+            </div>
+        </div>
+    </div>
+{% endblock %}