MDL-72790 block_timeline: Ensure overdue badge visible at all widths

This ensures on narrower screens, the activity title still truncates but the overdue pill always remains visible where present. There is no visual change where an item is not overdue, or on wider screens where there is room to display the full content.
nilo72 · Nov 24, 2021 · 873262b · 873262b
1 parent 1a75b75
commit 873262b
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/blocks/timeline/templates/event-list-item.mustache b/blocks/timeline/templates/event-list-item.mustache
@@ -56,13 +56,15 @@
                 {{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
             </div>
             <div class="event-name-container flex-grow-1 line-height-3 nowrap text-truncate">
-                <h6 class="event-name mb-0 pb-1 text-truncate">
-                    <a href="{{url}}"
-                            title="{{name}}"
-                            aria-label='{{#cleanstr}} ariaeventlistitem, block_timeline, { "name": {{#quote}}{{{activityname}}}{{/quote}}, "course": {{#quote}}{{{course.fullnamedisplay}}}{{/quote}}, "date": "{{#userdate}} {{timesort}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}" } {{/cleanstr}}'>
-                        {{{activityname}}}</a>
-                    {{#overdue}}<span class="badge badge-pill badge-danger ml-1">{{#str}} overdue, block_timeline {{/str}}</span>{{/overdue}}
-                </h6>
+                <div class="d-flex">
+                    <h6 class="event-name mb-0 pb-1 text-truncate">
+                        {{#overdue}}<span class="badge badge-pill badge-danger ml-1 float-right">{{#str}} overdue, block_timeline {{/str}}</span>{{/overdue}}
+                        <a href="{{url}}"
+                                title="{{name}}"
+                                aria-label='{{#cleanstr}} ariaeventlistitem, block_timeline, { "name": {{#quote}}{{{activityname}}}{{/quote}}, "course": {{#quote}}{{{course.fullnamedisplay}}}{{/quote}}, "date": "{{#userdate}} {{timesort}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}" } {{/cleanstr}}'>
+                            {{{activityname}}}</a>
+                    </h6>
+                </div>
                 <small class="mb-0">
                     {{#courseview}}
                         {{activitystr}}