Merge branch '102-liste-des-document-titre-long' into 'master'

Fix graphical bug in document list with title overflowing the frame, and add new classes to display title and aside in flex-table (DX + Fix)

Closes #102 and #22

See merge request Chill-Projet/chill-bundles!815

.changes/unreleased/DX-20250410-153426.yaml

@@ -0,0 +1,6 @@
+kind: DX
+body: Add new chill-col style for displaying title and aside in a flex table
+time: 2025-04-10T15:34:26.052138894+02:00
+custom:
+    Issue: ""
+    SchemaChange: No schema change

.changes/unreleased/Fixed-20250410-153354.yaml

@@ -0,0 +1,6 @@
+kind: Fixed
+body: Fix display of title in document list
+time: 2025-04-10T15:33:54.660510278+02:00
+custom:
+    Issue: "102"
+    SchemaChange: No schema change

src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss

@@ -120,3 +120,34 @@ li.document-list-item {
         vertical-align: baseline;
     }
 }
+
+.badge-activity-type-simple {
+    @extend .badge;
+    display: inline-block;
+    margin: 0.2rem 0;
+    padding-left: 0;
+    padding-right: 0.5rem;
+
+    border-left: 20px groove #9acd32;
+    border-radius: $badge-border-radius;
+
+    color: black;
+    font-weight: normal;
+    font-size: unset;
+    max-width: 100%;
+    background-color: $gray-100;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-indent: 5px hanging;
+    text-align: left;
+
+    &::before {
+        margin-right: 3px;
+        position: relative;
+        left: -0.5px;
+        font-family: ForkAwesome;
+        content: '\f04b';
+        color: #9acd32;
+    }
+}

src/Bundle/ChillActivityBundle/Resources/views/GenericDoc/activity_document_row.html.twig

@@ -13,44 +13,44 @@
 {% endif %}
 
 <div class="item-row">
-    <div class="item-col" style="width: unset">
-        {% if document.isPending %}
-            <div class="badge text-bg-info" data-docgen-is-pending="{{ document.id }}">{{ 'docgen.Doc generation is pending'|trans }}</div>
-        {% elseif document.isFailure %}
-            <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
-        {% endif %}
-
-        <div>
-            {% if activity.accompanyingPeriod is not null and context == 'person' %}
-                <span class="badge bg-primary">
-                        <i class="fa fa-random"></i> {{ activity.accompanyingPeriod.id }}
-                    </span>&nbsp;
+    <div class="item-two-col-grid">
+        <div class="title">
+            {% if document.isPending %}
+                <div class="badge text-bg-info" data-docgen-is-pending="{{ document.id }}">{{ 'docgen.Doc generation is pending'|trans }}</div>
+            {% elseif document.isFailure %}
+                <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
             {% endif %}
-            <div class="badge-activity-type">
-                <span class="title_label"></span>
-                <span class="title_action">
-                    {{ activity.type.name | localize_translatable_string }}
+
+            <div>
+                <div>
+                    <div class="badge-activity-type-simple">
+                        {{ activity.type.name | localize_translatable_string }}
+                    </div>
                     {% if activity.emergency %}
                         <span class="badge bg-danger rounded-pill fs-6 float-end">{{ 'Emergency'|trans|upper }}</span>
                     {% endif %}
-                    </span>
+                </div>
             </div>
-        </div>
-        <div class="denomination h2">
-            {{ document.title|chill_print_or_message("No title") }}
-        </div>
-        {% if document.hasTemplate %}
-            <div>
-                <p>{{ document.template.name|localize_translatable_string }}</p>
+            <div class="denomination h2">
+                {{ document.title|chill_print_or_message("No title") }}
             </div>
-        {% endif %}
-    </div>
-
-    <div class="item-col">
-        <div class="container">
+            {% if document.hasTemplate %}
+                <div>
+                    <p>{{ document.template.name|localize_translatable_string }}</p>
+                </div>
+            {% endif %}
+        </div>
+        <div class="aside">
             <div class="dates row text-end">
                 <span>{{ document.createdAt|format_date('short') }}</span>
             </div>
+            {% if activity.accompanyingPeriod is not null and context == 'person' %}
+                <div class="text-end">
+                    <span class="badge bg-primary">
+                        <i class="fa fa-random"></i> {{ activity.accompanyingPeriod.id }}
+                    </span>&nbsp;
+                </div>
+            {% endif %}
         </div>
     </div>
 </div>

src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/badge.scss

@@ -1,5 +1,6 @@
-@import '~ChillPersonAssets/chill/scss/mixins.scss';
 @import '~ChillMainAssets/module/bootstrap/shared';
+@import '~ChillPersonAssets/chill/scss/mixins.scss';
+@import 'bootstrap/scss/_badge.scss';
 
 .badge-calendar {
     display: inline-block;
@@ -23,3 +24,35 @@
     }
 }
 
+.badge-calendar-simple {
+    @extend .badge;
+    display: inline-block;
+    margin: 0.2rem 0;
+    padding-left: 0;
+    padding-right: 0.5rem;
+
+    border-left: 20px groove $chill-l-gray;
+    border-radius: $badge-border-radius;
+
+    max-width: 100%;
+    background-color: $gray-100;
+
+    color: black;
+    font-weight: normal;
+    overflow: hidden;
+    font-weight: normal;
+    font-size: unset;
+    text-overflow: ellipsis;
+    text-indent: 5px hanging;
+    text-align: left;
+
+    &::before {
+        margin-right: 3px;
+        position: relative;
+        left: -0.5px;
+        font-family: ForkAwesome;
+        content: '\f04b';
+        color: $chill-l-gray;
+    }
+}
+

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

@@ -16,7 +16,7 @@ div.calendar-list {
     }
 
     & > a.calendar-list__global {
-        display: inline-block;;
+        display: inline-block;
         padding: 0.2rem;
         min-width: 2rem;
         border: 1px solid var(--bs-chill-blue);

src/Bundle/ChillCalendarBundle/Resources/views/GenericDoc/calendar_document_row.html.twig

@@ -6,50 +6,48 @@
 
 
 <div class="item-row">
-    <div class="item-col" style="width: unset">
-        {% if document.storedObject.isPending %}
-            <div class="badge text-bg-info" data-docgen-is-pending="{{ document.storedObject.id }}">{{ 'docgen.Doc generation is pending'|trans }}</div>
-        {% elseif document.storedObject.isFailure %}
-            <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
-        {% endif %}
-
-        <div>
-            {% if c.accompanyingPeriod is not null and context == 'person' %}
-                <span class="badge bg-primary">
-                        <i class="fa fa-random"></i> {{ c.accompanyingPeriod.id }}
-                    </span>&nbsp;
+    <div class="item-two-col-grid">
+        <div class="title">
+            {% if document.storedObject.isPending %}
+                <div class="badge text-bg-info" data-docgen-is-pending="{{ document.storedObject.id }}">{{ 'docgen.Doc generation is pending'|trans }}</div>
+            {% elseif document.storedObject.isFailure %}
+                <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
             {% endif %}
 
-            <span class="badge-calendar">
-                    <span class="title_label"></span>
-                    <span class="title_action">
-                        {{ 'Calendar'|trans }}
-                        {% if c.endDate.diff(c.startDate).days >= 1 %}
-                            {{ c.startDate|format_datetime('short', 'short') }}
-                            - {{ c.endDate|format_datetime('short', 'short') }}
-                        {% else %}
-                            {{ c.startDate|format_datetime('short', 'short') }}
-                            - {{ c.endDate|format_datetime('none', 'short') }}
-                        {% endif %}
-                    </span>
-                </span>
-        </div>
-
-        <div class="denomination h2">
-            {{ document.storedObject.title|chill_print_or_message("No title") }}
-        </div>
-        {% if document.storedObject.hasTemplate %}
             <div>
-                <p>{{ document.storedObject.template.name|localize_translatable_string }}</p>
-            </div>
-        {% endif %}
-    </div>
 
-    <div class="item-col">
-        <div class="container">
+                <span class="badge-calendar-simple">
+                    {{ 'Calendar'|trans }}
+                    {% if c.endDate.diff(c.startDate).days >= 1 %}
+                        {{ c.startDate|format_datetime('short', 'short') }}
+                        - {{ c.endDate|format_datetime('short', 'short') }}
+                    {% else %}
+                        {{ c.startDate|format_datetime('short', 'short') }}
+                        - {{ c.endDate|format_datetime('none', 'short') }}
+                    {% endif %}
+                </span>
+            </div>
+
+            <div class="denomination h2">
+                {{ document.storedObject.title|chill_print_or_message("No title") }}
+            </div>
+            {% if document.storedObject.hasTemplate %}
+                <div>
+                    <p>{{ document.storedObject.template.name|localize_translatable_string }}</p>
+                </div>
+            {% endif %}
+        </div>
+        <div class="aside">
             <div class="dates row text-end">
                 <span>{{ document.storedObject.createdAt|format_date('short') }}</span>
             </div>
+            {% if c.accompanyingPeriod is not null and context == 'person' %}
+                <div class="text-end">
+                    <span class="badge bg-primary">
+                        <i class="fa fa-random"></i> {{ c.accompanyingPeriod.id }}
+                    </span>&nbsp;
+                </div>
+            {% endif %}
         </div>
     </div>
 </div>

src/Bundle/ChillDocStoreBundle/Resources/views/GenericDoc/person_list.html.twig

@@ -23,7 +23,7 @@ License * along with this program. If not, see <http://www.gnu.org/licenses/>.
 {{ encore_entry_link_tags("mod_document_action_buttons_group") }}
 {% endblock %} {% block content %}
 
-<div class="col-md-10 col-xxl">
+<div class="document-list">
     <h1>
         {{ 'Documents for %name%'|trans({ '%name%': person|chill_entity_render_string } ) }}
     </h1>

src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item_row.html.twig

@@ -3,54 +3,54 @@
 {% import '@ChillPerson/Macro/updatedBy.html.twig' as mmm %}
 
 <div class="item-row">
-    <div class="item-col" style="width: unset">
-        {% if document.object.isPending %}
-            <div class="badge text-bg-info" data-docgen-is-pending="{{ document.object.id }}">{{ 'docgen.Doc generation is pending'|trans }}</div>
-        {% elseif document.object.isFailure %}
-            <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
-        {% endif %}
+    <!-- person document or accompanying course document -->
+    <div class="item-two-col-grid">
+        <div class="title">
+            {% if document.object.isPending %}
+                <div class="badge text-bg-info" data-docgen-is-pending="{{ document.object.id }}">{{ 'docgen.Doc generation is pending'|trans }}</div>
+            {% elseif document.object.isFailure %}
+                <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
+            {% endif %}
 
-        {% if context == 'person' and accompanyingCourse is defined %}
-            <div>
-                    <span class="badge bg-primary">
-                        <i class="fa fa-random"></i> {{ accompanyingCourse.id }}
-                    </span>&nbsp;
+            <div class="denomination h2">
+                {{ document.title|chill_print_or_message("No title") }}
             </div>
-        {% elseif context == 'accompanying-period' and person is defined %}
+            {% if document.object.type is not empty %}
+                <div>
+                    {{ mm.mimeIcon(document.object.type) }}
+                </div>
+            {% endif %}
             <div>
-                    <span class="badge bg-primary">
-                        {{  'Document from person %name%'|trans({ '%name%': document.person|chill_entity_render_string }) }}
-                    </span>&nbsp;
+                <p>{{ document.category.name|localize_translatable_string }}</p>
             </div>
-
-        {% endif %}
-        <div class="denomination h2">
-            {{ document.title|chill_print_or_message("No title") }}
-        </div>
-        {% if document.object.type is not empty %}
-            <div>
-                {{ mm.mimeIcon(document.object.type) }}
-            </div>
-        {% endif %}
-        <div>
-            <p>{{ document.category.name|localize_translatable_string }}</p>
-        </div>
-        {% if document.object.hasTemplate %}
-            <div>
-                <p>{{ document.object.template.name|localize_translatable_string }}</p>
-            </div>
-        {% endif %}
-    </div>
-
-    <div class="item-col">
-        <div class="container">
-            {% if document.date is not null %}
-                <div class="dates row text-end">
-                    <span>{{ document.date|format_date('short') }}</span>
+            {% if document.object.hasTemplate %}
+                <div>
+                    <p>{{ document.object.template.name|localize_translatable_string }}</p>
                 </div>
             {% endif %}
         </div>
+        {% if document.date is not null %}
+            <div class="aside">
+                <div class="dates row text-end">
+                    <span>{{ document.date|format_date('short') }}</span>
+                </div>
+                {% if context == 'person' and accompanyingCourse is defined %}
+                    <div class="text-end">
+                        <span class="badge bg-primary">
+                            <i class="fa fa-random"></i> {{ accompanyingCourse.id }}
+                        </span>&nbsp;
+                    </div>
+                {% elseif context == 'accompanying-period' and person is defined %}
+                    <div class="text-end">
+                        <span class="badge bg-primary">
+                             {{ document.person|chill_entity_render_string }}
+                        </span>&nbsp;
+                    </div>
+                {% endif %}
+            </div>
+        {% endif %}
     </div>
+
 </div>
 {% if document.description is not empty %}
     <div class="item-row">

src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss

@@ -25,7 +25,34 @@ div.flex-table {
             div.item-col:last-child {
                 display: flex;
             }
+
+            div.item-two-col-grid {
+                display: grid;
+                width: 100%;
+                justify-content: stretch;
+
+                @include media-breakpoint-up(lg) {
+                    grid-template-areas:
+                        "title aside";
+                    grid-template-columns: 1fr minmax(8rem, 1fr);
+                    column-gap: 0.5em;
+                }
+                @include media-breakpoint-down(lg) {
+                    grid-template-areas:
+                        "aside"
+                        "title";
+                }
+
+                & > div.title {
+                    grid-area: title;
+                }
+
+                & > div.aside {
+                    grid-area: aside;
+                }
+            }
         }
+
     }
 
     h2, h3, h4, dl, p {

src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig

@@ -136,6 +136,59 @@
   </div>
 </div>
 
+<h2>Fix the title in the flex table</h2>
+
+<p>This will fix the layout of the row, with a "title" element, and an aside element. Using <code>css grid</code>, this is quite safe and won't overflow</p>
+
+<xmp>
+    <div class="flex-table">
+        <div class="item-bloc">
+            <div class="item-row">
+                <div class="item-two-col-grid">
+                    <div class="title">This is my title</div>
+                    <div class="aside">Aside value</div>
+                </div>
+            </div>
+        </div>
+        <div class="item-bloc">
+            <div class="item-row">
+                <div class="item-two-col-grid">
+                    <div class="title">
+                        <div><h3>This is my title, which can be very long and take a lot of place. But it is wrapped successfully, and won't disturb the placement of the aside block</h3></div>
+                        <div>This is a second line</div>
+                    </div>
+                    <div class="aside">Aside value</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</xmp>
+
+    <p>will render:</p>
+
+    <div class="flex-table">
+        <div class="item-bloc">
+            <div class="item-row">
+                <div class="item-two-col-grid">
+                    <div class="title">This is my title</div>
+                    <div class="aside">Aside value</div>
+                </div>
+            </div>
+        </div>
+        <div class="item-bloc">
+            <div class="item-row">
+                <div class="item-two-col-grid">
+                    <div class="title">
+                        <div><h3>This is my title, which can be very long and take a lot of place. But it is wrapped successfully, and won't disturb the placement of the aside block</h3></div>
+                        <div>This is a second line</div>
+                    </div>
+                    <div class="aside">Aside value</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
 <h2>Wrap-list</h2>
 <p>Une liste inline qui s'aligne, puis glisse sous son titre.</p>
 <div class="wrap-list debug">
@@ -392,4 +445,12 @@ Toutes les classes btn-* de bootstrap sont fonctionnelles
     </div>
 </div>
 
+<div class="row">
+    <h1>Badges</h1>
+
+    <span class="badge-accompanying-work-type-simple">Action d'accompagnement</span>
+    <span class="badge-activity-type-simple">Type d'échange</span>
+    <span class="badge-calendar-simple">Rendez-vous</span>
+</div>
+
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss

@@ -20,6 +20,36 @@
     }
 }
 
+.badge-accompanying-work-type-simple {
+    @extend .badge;
+    display: inline-block;
+    margin: 0.2rem 0;
+    padding-left: 0;
+    padding-right: 0.5rem;
+
+    border-left: 20px groove $orange;
+    border-radius: $badge-border-radius;
+
+    max-width: 100%;
+    background-color: $gray-100;
+
+    color: black;
+    font-weight: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-indent: 5px hanging;
+    text-align: left;
+
+    &::before {
+        margin-right: 3px;
+        position: relative;
+        left: -0.5px;
+        font-family: ForkAwesome;
+        content: '\f04b';
+        color: #e2793d;
+    }
+}
+
 /// AccompanyingCourse Work Pages
 div.accompanying-course-work {
 

src/Bundle/ChillPersonBundle/Resources/views/GenericDoc/evaluation_document_row.html.twig

@@ -5,44 +5,49 @@
 {% set w = document.accompanyingPeriodWorkEvaluation.accompanyingPeriodWork %}
 
 <div class="item-row">
-    <div class="item-col" style="width: unset">
-        {% if document.storedObject.isPending %}
-            <div class="badge text-bg-info" data-docgen-is-pending="{{ document.storedObject.id }}">{{ 'docgen.Doc generation is pending'|trans }}</div>
-        {% elseif document.storedObject.isFailure %}
-            <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
-        {% endif %}
-        <div>
-            {% if context == 'person' %}
-                <span class="badge bg-primary">
-                        <i class="fa fa-random"></i> {{ w.accompanyingPeriod.id }}
-                    </span>&nbsp;
+    <!-- evaluation document -->
+    <div class="item-two-col-grid" style="width: unset">
+        <div class="title">
+            {% if document.storedObject.isPending %}
+                <div class="badge text-bg-info" data-docgen-is-pending="{{ document.storedObject.id }}">{{ 'docgen.Doc generation is pending'|trans }}</div>
+            {% elseif document.storedObject.isFailure %}
+                <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
             {% endif %}
-            <div class="badge-accompanying-work-type">
-                <span class="title_label"></span>
-                <span class="title_action">{{ w.socialAction|chill_entity_render_string }} > {{ document.accompanyingPeriodWorkEvaluation.evaluation.title|localize_translatable_string }}</span>
-            </div>
-        </div>
-        <div class="denomination h2">
-            {{ document.title|chill_print_or_message("No title") }}
-        </div>
-        {% if document.storedObject.type is not empty %}
             <div>
-                {{ mm.mimeIcon(document.storedObject.type) }}
+                <div>
+                    <div class="badge-accompanying-work-type-simple">
+                        {{ w.socialAction|chill_entity_render_string }} > {{ document.accompanyingPeriodWorkEvaluation.evaluation.title|localize_translatable_string }}
+                    </div>
+                </div>
+            </div>
+            <div class="denomination h2">
+                {{ document.title|chill_print_or_message("No title") }}
+            </div>
+            {% if document.storedObject.type is not empty %}
+                <div>
+                    {{ mm.mimeIcon(document.storedObject.type) }}
+                </div>
+            {% endif %}
+            {% if document.storedObject.hasTemplate %}
+                <div>
+                    <p>{{ document.storedObject.template.name|localize_translatable_string }}</p>
+                </div>
+            {% endif %}
+        </div>
+        {% if document.storedObject.createdAt is not null %}
+            <div class="aside">
+                <div class="dates row text-end">
+                    <span>{{ document.storedObject.createdAt|format_date('short') }}</span>
+                </div>
+                {% if context == 'person' %}
+                    <div class="text-end">
+                        <span class="badge bg-primary">
+                            <i class="fa fa-random"></i> {{ w.accompanyingPeriod.id }}
+                        </span>&nbsp;
+                    </div>
+                {% endif %}
             </div>
         {% endif %}
-        {% if document.storedObject.hasTemplate %}
-            <div>
-                <p>{{ document.storedObject.template.name|localize_translatable_string }}</p>
-            </div>
-        {% endif %}
-    </div>
-
-    <div class="item-col">
-        <div class="container">
-            <div class="dates row text-end">
-                <span>{{ document.storedObject.createdAt|format_date('short') }}</span>
-            </div>
-        </div>
     </div>
 </div>