mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-21 00:12:56 +02:00
Code Issues Projects Releases Wiki Activity

MDL-72790 block_timeline: Fix button layout and row wrapping on mobile

Browse Source 
This ensures all row content wraps nicely on smaller screen sizes, and
forces all action buttons to be displayed in a consistent position
indepdendent of the length of the activity name etc. Buttons are also
now aligned under the text on small screens, to maximise space for the
text content.

Co-authored-by: Michael Hawkins <michaelh@moodle.com>
This commit is contained in:
Huong Nguyen 2021-10-15 16:50:53 +08:00 committed by Michael Hawkins
parent 921eb5ce0e
commit 1a75b75b52
5 changed files with 63 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
blocks/timeline/styles.css
View File

@ -7,3 +7,17 @@
#block-region-side-pre .block_timeline h6.event-action a.btn {
width: auto;
}
.block_timeline .timeline-action-button {
margin-left: auto;
}
@media (max-width: 480px) {
.block_timeline .timeline-name {
width: 100%;
}
.block_timeline .timeline-action-button {
margin-left: 0;
}
}

70
blocks/timeline/templates/event-list-item.mustache
View File

@ -47,42 +47,46 @@
}}
<div class="list-group-item timeline-event-list-item flex-column pt-2 pb-0 border-0 {{#courseview}}px-0{{/courseview}}{{^courseview}}px-2{{/courseview}}"
data-region="event-list-item">
<div class="d-flex justify-content-between flex-wrap pb-1">
<small class="text-right text-nowrap align-self-center ml-1">
{{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
</small>
<div class="icon-size-4 align-self-top align-self-center mx-2">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="event-name-container flex-grow-1 text-truncate line-height-3">
<h6 class="event-name text-truncate mb-0">
<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>
<small class="text-truncate mb-0">
{{#courseview}}
{{activitystr}}
{{/courseview}}
{{^courseview}}
{{#course.fullnamedisplay}}{{{course.fullnamedisplay}}} &middot; {{/course.fullnamedisplay}}{{activitystr}}
{{/courseview}}
<div class="d-flex flex-wrap pb-1">
<div class="d-flex mr-auto pb-1 mw-100 timeline-name">
<small class="text-right text-nowrap align-self-center ml-1">
{{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
</small>
<div class="icon-size-4 align-self-top align-self-center mx-2 text-nowrap">
{{#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>
<small class="mb-0">
{{#courseview}}
{{activitystr}}
{{/courseview}}
{{^courseview}}
{{#course.fullnamedisplay}}{{{course.fullnamedisplay}}} &middot; {{/course.fullnamedisplay}}{{activitystr}}
{{/courseview}}
</small>
</div>
</div>
{{#action.actionable}}
<h6 class="event-action">
<a class="list-group-item-action btn btn-outline-secondary btn-sm text-nowrap"
href="{{action.url}}"
aria-label="{{action.name}}"
title="{{action.name}}">
{{{action.name}}}
{{#action.showitemcount}}
<span class="badge badge-secondary">{{action.itemcount}}</span>
{{/action.showitemcount}}
</a>
</h6>
<div class="d-flex timeline-action-button">
<h6 class="event-action">
<a class="list-group-item-action btn btn-outline-secondary btn-sm text-nowrap"
href="{{action.url}}"
aria-label="{{action.name}}"
title="{{action.name}}">
{{{action.name}}}
{{#action.showitemcount}}
<span class="badge badge-secondary">{{action.itemcount}}</span>
{{/action.showitemcount}}
</a>
</h6>
</div>
{{/action.actionable}}
</div>
<div class="pt-2 border-bottom"></div>

6
theme/boost/scss/moodle/blocks.scss
View File

@ -328,6 +328,12 @@ body.drawer-open-left #region-main.has-blocks {
}
}
.block_timeline {
.event-action {
padding-left: 5.55em;
}
}
// Show expand collapse with font-awesome.
.block_settings .block_tree [aria-expanded="true"],
.block_settings .block_tree [aria-expanded="true"].emptybranch,

3
theme/boost/style/moodle.css
View File

@ -13049,6 +13049,9 @@ body.dragging .dragging {
.block_timeline .paged-content-page-container {
background-color: #fff; }
.block_timeline .event-action {
padding-left: 5.55em; }
.block_settings .block_tree [aria-expanded="true"],
.block_settings .block_tree [aria-expanded="true"].emptybranch,
.block_settings .block_tree [aria-expanded="false"],

3
theme/classic/style/moodle.css
View File

@ -13049,6 +13049,9 @@ body.dragging .dragging {
.block_timeline .paged-content-page-container {
background-color: #fff; }
.block_timeline .event-action {
padding-left: 5.55em; }
.block_settings .block_tree [aria-expanded="true"],
.block_settings .block_tree [aria-expanded="true"].emptybranch,
.block_settings .block_tree [aria-expanded="false"],