Improve the display of upcoming calendar items within the person render box

src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar-list.scss

@@ -14,9 +14,8 @@ div.calendar-list {
     ul.calendar-list {
         display: inline-block;
     }
-}
 
-.calendar-list__global {
+    & > a.calendar-list__global {
         display: inline-block;
         padding: 0.2rem;
         min-width: 2rem;
@@ -24,3 +23,14 @@ div.calendar-list {
         border-radius: 0.25rem;
         text-align: center;
     }
+
+}
+
+/*.calendar-list__global {
+    display: inline-block;
+    padding: 0.2rem;
+    min-width: 2rem;
+    border: 1px solid var(--bs-chill-blue);
+    border-radius: 0.25rem;
+    text-align: center;
+}*/

src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig

@@ -14,6 +14,7 @@
     * addAgeBadge   bool
     * suffixText    bool
     * address_multiline     bool
+    * addNextCalendars bool
     * customButtons [
         'before'    Twig\Markup, (injected with macro)
         'replace'   Twig\Markup,
@@ -189,40 +190,6 @@
                     {% endfor %}
                 </li>
             {% endif %}
-
-            {% set calendars = [] %}
-            {% for c in person.getNextCalendarsForPerson(10) %}
-                {% if is_granted('CHILL_CALENDAR_CALENDAR_SEE', c) %}
-                    {% set calendars = calendars|merge([c]) %}
-                {% endif %}
-            {% endfor %}
-
-            {% if calendars|length > 0 %}
-                <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mt-3">
-                    <h5 class="mb-0">{{ 'chill_calendar.Next calendars'|trans }}</h5>
-
-                    <ul class="list-inline mb-0 d-flex flex-wrap align-items-center">
-                        {% for c in calendars %}
-                            <li class="list-inline-item">
-                                {% if is_granted('CHILL_CALENDAR_CALENDAR_EDIT', c) %}
-                                    <a href="{{ chill_path_add_return_path('chill_calendar_calendar_edit', { id: c.id }) }}">
-                            <span class="badge bg-secondary">
-                                {{ c.startDate|format_datetime('long', 'short') }}
-                            </span>
-                                    </a>
-                                {% else %}
-                                    <span class="badge bg-secondary">
-                            {{ c.startDate|format_datetime('long', 'short') }}
-                        </span>
-                                {% endif %}
-                            </li>
-                        {% endfor %}
-                    </ul>
-                    {% if is_granted('CHILL_CALENDAR_CALENDAR_SEE', person) %}
-                        <a href="{{ chill_path_add_return_path('chill_calendar_calendar_list_by_person', {'id': person.id}) }}" class="calendar-list__global"><i class="fa fa-list"></i></a>
-                    {% endif %}
-                </div>
-            {% endif %}
         </ul>
     </div>
     <div class="item-col">
@@ -249,3 +216,45 @@
 </div>
 {%- endif -%}
 
+{%- if options['addNextCalendars'] -%}
+    {% set calendars = [] %}
+    {% for c in person.getNextCalendarsForPerson(10) %}
+        {% if is_granted('CHILL_CALENDAR_CALENDAR_SEE', c) %}
+            {% set calendars = calendars|merge([c]) %}
+        {% endif %}
+    {% endfor %}
+
+    {% if calendars|length > 0 %}
+        <div class="wrap-list periods-list">
+            <div class="wl-row">
+                <div class="wl-col title">
+                    <h3>{{ 'chill_calendar.Next calendars'|trans }}</h3>
+                </div>
+                <div class="wl-col list">
+                    <div class="calendar-list">
+                        <ul class="calendar-list">
+                            {% for c in calendars %}
+                                <li>
+                                    {% if is_granted('CHILL_CALENDAR_CALENDAR_EDIT', c) %}
+                                        <a href="{{ chill_path_add_return_path('chill_calendar_calendar_edit', { id: c.id }) }}">
+                                <span class="badge bg-secondary">
+                                    {{ c.startDate|format_datetime('long', 'short') }}
+                                </span>
+                                        </a>
+                                    {% else %}
+                                        <span class="badge bg-secondary">
+                                {{ c.startDate|format_datetime('long', 'short') }}
+                            </span>
+                                    {% endif %}
+                                </li>
+                            {% endfor %}
+                        </ul>
+                        {% if is_granted('CHILL_CALENDAR_CALENDAR_SEE', person) %}
+                            <a href="{{ chill_path_add_return_path('chill_calendar_calendar_list_by_person', {'id': person.id}) }}" class="calendar-list__global"><i class="fa fa-list"></i></a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+{% endif %}

src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig

@@ -298,6 +298,7 @@
                         'addAltNames': true,
                         'addCenter': true,
                         'address_multiline': false,
+                        'addNextCalendars': true,
                         'customButtons': { 'after': _self.button_person_after(person), 'before': _self.button_person_before((person)) }
                     }) }}
 

src/Bundle/ChillPersonBundle/Templating/Entity/PersonRender.php

@@ -46,6 +46,7 @@ class PersonRender implements PersonRenderInterface
             'addDeath' => $options['addDeath'] ?? true,
             'addAgeBadge' => $options['addAgeBadge'] ?? false,
             'suffixText' => $options['suffixText'] ?? [],
+            'addNextCalendars' => $options['addNextCalendars'] ?? false,
         ];
 
         return