diff --git a/.changes/unreleased/DX-20250410-153426.yaml b/.changes/unreleased/DX-20250410-153426.yaml new file mode 100644 index 000000000..d86d4dfed --- /dev/null +++ b/.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 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/public/chill/chillactivity.scss b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss index 13de8dfc0..6658656f9 100644 --- a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss +++ b/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; + } +} 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/public/chill/scss/badge.scss b/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/badge.scss index ffcda8f0f..04d22bfc5 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/badge.scss +++ b/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; + } +} + diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar-list.scss b/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar-list.scss index c232b78e2..6fa84f15a 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar-list.scss +++ b/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); 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/GenericDoc/person_list.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/GenericDoc/person_list.html.twig index 5bc9f42d1..533a075b6 100644 --- a/src/Bundle/ChillDocStoreBundle/Resources/views/GenericDoc/person_list.html.twig +++ b/src/Bundle/ChillDocStoreBundle/Resources/views/GenericDoc/person_list.html.twig @@ -23,7 +23,7 @@ License * along with this program. If not, see . {{ encore_entry_link_tags("mod_document_action_buttons_group") }} {% endblock %} {% block content %} -
+

{{ 'Documents for %name%'|trans({ '%name%': person|chill_entity_render_string } ) }}

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 5aafb6635..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.

@@ -392,4 +445,12 @@ Toutes les classes btn-* de bootstrap sont fonctionnelles
+
+

Badges

+ + Action d'accompagnement + Type d'échange + Rendez-vous +
+ {% endblock %} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss index e82029a1f..017b98961 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss +++ b/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 { 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') }} -
-