Tweak style

public/css/app.css

@@ -10,3 +10,15 @@
 .no-style:focus {
     outline: none;
 }
+
+.grid-4 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+}
+
+@media (max-width: 992px) {
+    .grid-4 {
+        grid-template-columns: 1fr;
+    }
+}

templates/_pagination.html.twig

@@ -1,6 +1,6 @@
 {% set route = app.request.attributes.get('_route') %}
 <nav>
-    <ul class="pagination">
+    <ul class="pagination justify-content-center mt-4">
         <li class="page-item {{ page < 2 ? 'disabled' }}">
             <a class="page-link" href="{{ path(route, {'page': page - 1}) }}">{{ 'previous'|trans }}</a>
         </li>

templates/base.html.twig

@@ -38,9 +38,9 @@
                     </ul>
                 </div>
 
-                <div class="navbar-nav ms-auto">
-                    <a class="nav-link" href="{{ path('app_setting_locale', { 'locale': 'en' }) }}">English</a>
-                    <a class="nav-link" href="{{ path('app_setting_locale', { 'locale': 'fr' }) }}">Français</a>
+                <div class="d-flex">
+                    <a class="nav-link me-2" href="{{ path('app_setting_locale', { 'locale': 'en' }) }}">English</a>
+                    <a class="nav-link me-2" href="{{ path('app_setting_locale', { 'locale': 'fr' }) }}">Français</a>
                     {% if app.user %}
                         <a class="nav-link" href="{{ path('app_logout') }}">{{ app.user.email }} - {{ 'log_out'|trans }}</a>
                     {% else %}

templates/post/index.html.twig

@@ -3,12 +3,21 @@
 {% block title %}{{ 'posts'|trans }}{% endblock %}
 
 {% block body %}
+{% if app.user %}
+    <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-2">
+        <a href="{{ path('app_post_new') }}" class="btn btn-primary">{{ 'create_new_post'|trans }}</a>
+    </div>
+{% endif %}
+<div class="grid-4">
 {% for post in posts.iterator %}
     <div class="card">
+        {% if post.image %}
+            <img src="{{ app.request.baseUrl }}{{ vich_uploader_asset(post, 'imageFile') }}" class="card-img-top" alt="">
+        {% endif %}
         <div class="card-body">
             <h5 class="card-title"><a href="{{ path('app_post_show', {id: post.id}) }}">{{ post.species ? post.species.vernacularName : 'post_undefined'|trans }}</a></h5>
             <h6 class="card-subtitle mb-2 text-muted">{{ post.foundDate | date("d/m/Y \\à H \\h") }}</h6>
-            <p class="card-subtitle mb-2 text-muted">{{ post.latitude }}, {{ post.longitude }}, {{ post.altitude }}m</p>
+            <p class="card-subtitle mb-2 text-muted">{{ post.latitude ?? 0 }}, {{ post.longitude ?? 0 }}, {{ post.altitude ?? 0 }}m</p>
             <p class="card-text">{{ post.commentary }}</p>
         </div>
         <div class="card-footer">
@@ -27,6 +36,7 @@
         </div>
     </div>
 {% endfor %}
+</div>
 {% include '_pagination.html.twig' %}
 {% endblock %}