From 203a0980545338716c2a671d43c6e77005337a00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Thu, 10 Apr 2025 15:33:22 +0200 Subject: [PATCH] Refactor document row layouts to use CSS grid Replaced the old 'item-col' structure with a 'item-two-col-grid' layout across multiple templates, improving consistency and responsiveness. Introduced CSS grid styles ensuring proper alignment and wrapping of titles and aside elements in different viewport sizes. This enhances the overall readability and maintainability of the views. --- .../unreleased/Fixed-20250410-153354.yaml | 6 ++ .../activity_document_row.html.twig | 58 +++++++------- .../calendar_document_row.html.twig | 72 ++++++++--------- .../views/List/list_item_row.html.twig | 80 +++++++++---------- .../public/chill/scss/flex_table.scss | 27 +++++++ .../Resources/views/Dev/dev.assets.html.twig | 53 ++++++++++++ .../evaluation_document_row.html.twig | 73 +++++++++-------- 7 files changed, 229 insertions(+), 140 deletions(-) create mode 100644 .changes/unreleased/Fixed-20250410-153354.yaml diff --git a/.changes/unreleased/Fixed-20250410-153354.yaml b/.changes/unreleased/Fixed-20250410-153354.yaml new file mode 100644 index 000000000..d5c0b5652 --- /dev/null +++ b/.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 diff --git a/src/Bundle/ChillActivityBundle/Resources/views/GenericDoc/activity_document_row.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/GenericDoc/activity_document_row.html.twig index 6ca871de1..93bb01f1e 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/GenericDoc/activity_document_row.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/GenericDoc/activity_document_row.html.twig @@ -13,44 +13,44 @@ {% endif %}
-
- {% if document.isPending %} -
{{ 'docgen.Doc generation is pending'|trans }}
- {% elseif document.isFailure %} -
{{ 'docgen.Doc generation failed'|trans }}
- {% endif %} - -
- {% if activity.accompanyingPeriod is not null and context == 'person' %} - - {{ activity.accompanyingPeriod.id }} -   +
+
+ {% if document.isPending %} +
{{ 'docgen.Doc generation is pending'|trans }}
+ {% elseif document.isFailure %} +
{{ 'docgen.Doc generation failed'|trans }}
{% endif %} -
- - - {{ activity.type.name | localize_translatable_string }} + +
+
+
+ {{ activity.type.name | localize_translatable_string }} +
{% if activity.emergency %} {{ 'Emergency'|trans|upper }} {% endif %} - +
-
-
- {{ document.title|chill_print_or_message("No title") }} -
- {% if document.hasTemplate %} -
-

{{ document.template.name|localize_translatable_string }}

+
+ {{ document.title|chill_print_or_message("No title") }}
- {% endif %} -
- -
-
+ {% if document.hasTemplate %} +
+

{{ document.template.name|localize_translatable_string }}

+
+ {% endif %} +
+
{{ document.createdAt|format_date('short') }}
+ {% if activity.accompanyingPeriod is not null and context == 'person' %} +
+ + {{ activity.accompanyingPeriod.id }} +   +
+ {% endif %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/GenericDoc/calendar_document_row.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/GenericDoc/calendar_document_row.html.twig index 8cf5bc4ac..8015ac600 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/views/GenericDoc/calendar_document_row.html.twig +++ b/src/Bundle/ChillCalendarBundle/Resources/views/GenericDoc/calendar_document_row.html.twig @@ -6,50 +6,48 @@
-
- {% if document.storedObject.isPending %} -
{{ 'docgen.Doc generation is pending'|trans }}
- {% elseif document.storedObject.isFailure %} -
{{ 'docgen.Doc generation failed'|trans }}
- {% endif %} - -
- {% if c.accompanyingPeriod is not null and context == 'person' %} - - {{ c.accompanyingPeriod.id }} -   +
+
+ {% if document.storedObject.isPending %} +
{{ 'docgen.Doc generation is pending'|trans }}
+ {% elseif document.storedObject.isFailure %} +
{{ 'docgen.Doc generation failed'|trans }}
{% endif %} - - - - {{ '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 %} - - -
- -
- {{ document.storedObject.title|chill_print_or_message("No title") }} -
- {% if document.storedObject.hasTemplate %}
-

{{ document.storedObject.template.name|localize_translatable_string }}

-
- {% endif %} -
-
-
+ + {{ '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 %} + +
+ +
+ {{ document.storedObject.title|chill_print_or_message("No title") }} +
+ {% if document.storedObject.hasTemplate %} +
+

{{ document.storedObject.template.name|localize_translatable_string }}

+
+ {% endif %} +
+
{{ document.storedObject.createdAt|format_date('short') }}
+ {% if c.accompanyingPeriod is not null and context == 'person' %} +
+ + {{ c.accompanyingPeriod.id }} +   +
+ {% endif %}
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item_row.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item_row.html.twig index 21812c903..a92cea589 100644 --- a/src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item_row.html.twig +++ b/src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item_row.html.twig @@ -3,54 +3,54 @@ {% import '@ChillPerson/Macro/updatedBy.html.twig' as mmm %}
-
- {% if document.object.isPending %} -
{{ 'docgen.Doc generation is pending'|trans }}
- {% elseif document.object.isFailure %} -
{{ 'docgen.Doc generation failed'|trans }}
- {% endif %} + +
+
+ {% if document.object.isPending %} +
{{ 'docgen.Doc generation is pending'|trans }}
+ {% elseif document.object.isFailure %} +
{{ 'docgen.Doc generation failed'|trans }}
+ {% endif %} - {% if context == 'person' and accompanyingCourse is defined %} -
- - {{ accompanyingCourse.id }} -   +
+ {{ document.title|chill_print_or_message("No title") }}
- {% elseif context == 'accompanying-period' and person is defined %} + {% if document.object.type is not empty %} +
+ {{ mm.mimeIcon(document.object.type) }} +
+ {% endif %}
- - {{ 'Document from person %name%'|trans({ '%name%': document.person|chill_entity_render_string }) }} -   +

{{ document.category.name|localize_translatable_string }}

- - {% endif %} -
- {{ document.title|chill_print_or_message("No title") }} -
- {% if document.object.type is not empty %} -
- {{ mm.mimeIcon(document.object.type) }} -
- {% endif %} -
-

{{ document.category.name|localize_translatable_string }}

-
- {% if document.object.hasTemplate %} -
-

{{ document.object.template.name|localize_translatable_string }}

-
- {% endif %} -
- -
-
- {% if document.date is not null %} -
- {{ document.date|format_date('short') }} + {% if document.object.hasTemplate %} +
+

{{ document.object.template.name|localize_translatable_string }}

{% endif %}
+ {% if document.date is not null %} +
+
+ {{ document.date|format_date('short') }} +
+ {% if context == 'person' and accompanyingCourse is defined %} +
+ + {{ accompanyingCourse.id }} +   +
+ {% elseif context == 'accompanying-period' and person is defined %} +
+ + {{ document.person|chill_entity_render_string }} +   +
+ {% endif %} +
+ {% endif %}
+
{% if document.description is not empty %}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss index 0adf2b628..7ac52b24e 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss +++ b/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 { diff --git a/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig index 6322ca68f..927e496f9 100644 --- a/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig +++ b/src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig @@ -136,6 +136,59 @@
+

Fix the title in the flex table

+ +

This will fix the layout of the row, with a "title" element, and an aside element. Using css grid, this is quite safe and won't overflow

+ + + <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> + + +

will render:

+ +
+
+
+
+
This is my title
+
Aside value
+
+
+
+
+
+
+
+

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

+
This is a second line
+
+
Aside value
+
+
+
+
+ +

Wrap-list

Une liste inline qui s'aligne, puis glisse sous son titre.

diff --git a/src/Bundle/ChillPersonBundle/Resources/views/GenericDoc/evaluation_document_row.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/GenericDoc/evaluation_document_row.html.twig index 451857628..50570ddc6 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/GenericDoc/evaluation_document_row.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/GenericDoc/evaluation_document_row.html.twig @@ -5,44 +5,49 @@ {% set w = document.accompanyingPeriodWorkEvaluation.accompanyingPeriodWork %}
-
- {% if document.storedObject.isPending %} -
{{ 'docgen.Doc generation is pending'|trans }}
- {% elseif document.storedObject.isFailure %} -
{{ 'docgen.Doc generation failed'|trans }}
- {% endif %} -
- {% if context == 'person' %} - - {{ w.accompanyingPeriod.id }} -   + +
+
+ {% if document.storedObject.isPending %} +
{{ 'docgen.Doc generation is pending'|trans }}
+ {% elseif document.storedObject.isFailure %} +
{{ 'docgen.Doc generation failed'|trans }}
{% endif %} -
- - {{ w.socialAction|chill_entity_render_string }} > {{ document.accompanyingPeriodWorkEvaluation.evaluation.title|localize_translatable_string }} -
-
-
- {{ document.title|chill_print_or_message("No title") }} -
- {% if document.storedObject.type is not empty %}
- {{ mm.mimeIcon(document.storedObject.type) }} +
+
+ {{ w.socialAction|chill_entity_render_string }} > {{ document.accompanyingPeriodWorkEvaluation.evaluation.title|localize_translatable_string }} +
+
+
+
+ {{ document.title|chill_print_or_message("No title") }} +
+ {% if document.storedObject.type is not empty %} +
+ {{ mm.mimeIcon(document.storedObject.type) }} +
+ {% endif %} + {% if document.storedObject.hasTemplate %} +
+

{{ document.storedObject.template.name|localize_translatable_string }}

+
+ {% endif %} +
+ {% if document.storedObject.createdAt is not null %} +
+
+ {{ document.storedObject.createdAt|format_date('short') }} +
+ {% if context == 'person' %} +
+ + {{ w.accompanyingPeriod.id }} +   +
+ {% endif %}
{% endif %} - {% if document.storedObject.hasTemplate %} -
-

{{ document.storedObject.template.name|localize_translatable_string }}

-
- {% endif %} -
- -
-
-
- {{ document.storedObject.createdAt|format_date('short') }} -
-