moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-08 02:16:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'dashboard-split-overview-block' of https://github.com/ryanwyllie/moodle

Browse source
This commit is contained in:
Andrew Nicols 2018-09-27 14:08:55 +08:00
commit 20f9b981f9
137 changed files with 5871 additions and 2450 deletions
Download patch file Download diff file Expand all files Collapse all files

28
theme/boost/scss/moodle/blocks.scss
View file

@ -158,34 +158,6 @@ $doughnut-fill-colour: $brand-warning;
}
.block_myoverview {
.event-list-item {
.event-icon {
vertical-align: middle;
&::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
.event-name-container {
vertical-align: middle;
max-width: calc(100% - 50px);
.event-name {
display: block;
}
}
}
.content-centred {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.empty-placeholder-image-sm {
height: 50px;
}

33
theme/boost/scss/moodle/core.scss
View file

@ -2108,3 +2108,36 @@ div.editor_atto_toolbar button .icon {
width: auto;
}
.bg-pulse-grey {
animation: bg-pulse-grey 2s infinite linear;
}
@keyframes bg-pulse-grey {
0% {
background-color: $gray-100;
}
50% {
background-color: darken($gray-100, 5%);
}
100% {
background-color: $gray-100;
}
}
@each $size, $length in $spacers {
.line-height-#{$size} {
line-height: $length !important; /* stylelint-disable-line declaration-no-important */
}
}
.dir-rtl {
.dir-rtl-hide {
display: none;
}
}
.dir-ltr {
.dir-ltr-hide {
display: none;
}
}

30
theme/boost/scss/moodle/icons.scss
View file

@ -8,6 +8,18 @@ $icon-height: 16px;
$icon-big-width: 64px;
$icon-big-height: 64px;
// stylelint-disable
$iconsizes: () !default;
$iconsizes: map-merge((
0: 0,
1: ($icon-width * .25),
2: ($icon-width * .5),
3: $icon-width,
4: ($icon-width * 1.5),
5: ($icon-width * 3)
), $iconsizes);
// stylelint-enable
.icon {
font-size: $icon-height;
width: $icon-width;
@ -59,11 +71,29 @@ $icon-big-height: 64px;
margin: 0;
}
.icon-no-margin {
.icon {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
}
.icon-large > .icon {
width: ($icon-width * 2);
height: ($icon-height * 2);
}
@each $size, $length in $iconsizes {
.icon-size-#{$size} {
.icon {
height: $length !important; /* stylelint-disable-line declaration-no-important */
width: $length !important; /* stylelint-disable-line declaration-no-important */
}
}
}
.helplink .icon {
margin-left: 0.5rem;
}

8
theme/boost/scss/preset/default.scss
View file

@ -97,3 +97,11 @@ body {
.userpicture {
border-radius: 50%;
}
// Reset the default styling back to the bootstrap defaults for
// the secondary outline button because gray-200 is much too light
// for an outline button.
.btn-outline-secondary {
@include button-outline-variant($gray-600);
border-color: $border-color;
}

126
theme/boost/style/moodle.css
View file

@ -10417,6 +10417,47 @@ div.editor_atto_toolbar button .icon {
.w-auto {
width: auto; }
.bg-pulse-grey {
animation: bg-pulse-grey 2s infinite linear; }
@keyframes bg-pulse-grey {
0% {
background-color: #f8f9fa; }
50% {
background-color: #e9ecef; }
100% {
background-color: #f8f9fa; } }
.line-height-0 {
line-height: 0 !important;
/* stylelint-disable-line declaration-no-important */ }
.line-height-1 {
line-height: 0.25rem !important;
/* stylelint-disable-line declaration-no-important */ }
.line-height-2 {
line-height: 0.5rem !important;
/* stylelint-disable-line declaration-no-important */ }
.line-height-3 {
line-height: 1rem !important;
/* stylelint-disable-line declaration-no-important */ }
.line-height-4 {
line-height: 1.5rem !important;
/* stylelint-disable-line declaration-no-important */ }
.line-height-5 {
line-height: 3rem !important;
/* stylelint-disable-line declaration-no-important */ }
.dir-rtl .dir-rtl-hide {
display: none; }
.dir-ltr .dir-ltr-hide {
display: none; }
.icon {
font-size: 16px;
width: 16px;
@ -10453,10 +10494,52 @@ div.editor_atto_toolbar button .icon {
.icon-no-spacing a > .icon {
margin: 0; }
.icon-no-margin .icon {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0; }
.icon-large > .icon {
width: 32px;
height: 32px; }
.icon-size-0 .icon {
height: 0 !important;
/* stylelint-disable-line declaration-no-important */
width: 0 !important;
/* stylelint-disable-line declaration-no-important */ }
.icon-size-1 .icon {
height: 4px !important;
/* stylelint-disable-line declaration-no-important */
width: 4px !important;
/* stylelint-disable-line declaration-no-important */ }
.icon-size-2 .icon {
height: 8px !important;
/* stylelint-disable-line declaration-no-important */
width: 8px !important;
/* stylelint-disable-line declaration-no-important */ }
.icon-size-3 .icon {
height: 16px !important;
/* stylelint-disable-line declaration-no-important */
width: 16px !important;
/* stylelint-disable-line declaration-no-important */ }
.icon-size-4 .icon {
height: 24px !important;
/* stylelint-disable-line declaration-no-important */
width: 24px !important;
/* stylelint-disable-line declaration-no-important */ }
.icon-size-5 .icon {
height: 48px !important;
/* stylelint-disable-line declaration-no-important */
width: 48px !important;
/* stylelint-disable-line declaration-no-important */ }
.helplink .icon {
margin-left: 0.5rem; }
@ -11297,25 +11380,6 @@ div.editor_atto_toolbar button .icon {
width: 45px;
font-size: 45px; }
.block_myoverview .event-list-item .event-icon {
vertical-align: middle; }
.block_myoverview .event-list-item .event-icon::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.block_myoverview .event-list-item .event-name-container {
vertical-align: middle;
max-width: calc(100% - 50px); }
.block_myoverview .event-list-item .event-name-container .event-name {
display: block; }
.block_myoverview .content-centred {
max-width: 900px;
margin-left: auto;
margin-right: auto; }
.block_myoverview .empty-placeholder-image-sm {
height: 50px; }
@ -17008,3 +17072,27 @@ body {
.userpicture {
border-radius: 50%; }
.btn-outline-secondary {
color: #868e96;
background-color: transparent;
background-image: none;
border-color: #868e96;
border-color: #dee2e6; }
.btn-outline-secondary:hover {
color: #fff;
background-color: #868e96;
border-color: #868e96; }
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
box-shadow: 0 0 0 0.2rem rgba(134, 142, 150, 0.5); }
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
color: #868e96;
background-color: transparent; }
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
color: #fff;
background-color: #868e96;
border-color: #868e96; }
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(134, 142, 150, 0.5); }

32
theme/bootstrapbase/less/moodle/blocks.less
View file

@ -347,38 +347,6 @@
margin-left: 0;
}
.event-list-item {
border-bottom: 1px solid @tableBorder;
padding-bottom: 10px;
margin-bottom: 10px;
&:last-of-type {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.event-icon {
vertical-align: middle;
&::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
.event-name-container {
vertical-align: middle;
max-width: ~"calc(100% - 50px)";
.event-name {
display: block;
}
}
}
.empty-placeholder-image-sm {
height: 50px;
}

16
theme/bootstrapbase/less/moodle/core.less
View file

@ -2426,3 +2426,19 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
[data-drag-type="move"] {
cursor: move;
}
.bg-pulse-grey {
animation: bg-pulse-grey 2s infinite linear;
}
@keyframes bg-pulse-grey {
0% {
background-color: @grayLighter;
}
50% {
background-color: darken(@grayLighter, 5%);
}
100% {
background-color: @grayLighter;
}
}

40
theme/bootstrapbase/style/moodle.css
View file

@ -4808,6 +4808,20 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
[data-drag-type="move"] {
cursor: move;
}
.bg-pulse-grey {
animation: bg-pulse-grey 2s infinite linear;
}
@keyframes bg-pulse-grey {
0% {
background-color: #eee;
}
50% {
background-color: #e1e1e1;
}
100% {
background-color: #eee;
}
}
/* admin.less */
.formtable tbody th {
font-weight: normal;
@ -16527,32 +16541,6 @@ body {
.block_myoverview .row-fluid [class*="span"] {
margin-left: 0;
}
.block_myoverview .event-list-item {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin-bottom: 10px;
}
.block_myoverview .event-list-item:last-of-type {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.block_myoverview .event-list-item .event-icon {
vertical-align: middle;
}
.block_myoverview .event-list-item .event-icon::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.block_myoverview .event-list-item .event-name-container {
vertical-align: middle;
max-width: calc(100% - 50px);
}
.block_myoverview .event-list-item .event-name-container .event-name {
display: block;
}
.block_myoverview .empty-placeholder-image-sm {
height: 50px;
}

95
theme/bootstrapbase/templates/block_myoverview/course-event-list-item.mustache
View file

@ -1,95 +0,0 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/course-event-list-item
This template renders an event list item for the myoverview block
in the courses view.
Example context (json):
{
"name": "Assignment due 1",
"url": "https://www.google.com",
"timesort": 1490320388,
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1,
"showitemcount": true,
"actionable": true
},
"icon": {
"key": "icon",
"component": "mod_assign",
"alttext": "Assignment icon"
}
}
}}
<li class="list-group-item event-list-item" data-region="event-list-item">
<div class="row-fluid visible-desktop">
<div class="span7">
<div class="d-inline-block event-icon">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="d-inline-block event-name-container">
<a class="event-name text-truncate" href="{{{url}}}">{{{name}}}</a>
<div class="muted text-truncate">
<small>{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}</small>
</div>
</div>
</div>
<div class="span5 text-truncate">
{{#action.actionable}}
<a href="{{{action.url}}}">{{action.name}}</a>
{{#action.itemcount}}
{{#action.showitemcount}}
<span class="badge">{{.}}</span>
{{/action.showitemcount}}
{{/action.itemcount}}
{{/action.actionable}}
{{^action.actionable}}
<div class="text-muted">{{action.name}}</div>
{{/action.actionable}}
</div>
</div>
<div class="row-fluid visible-tablet">
<div class="span12">
<div class="d-inline-block event-icon">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="d-inline-block event-name-container">
<a class="event-name text-truncate" href="{{{url}}}">{{{name}}}</a>
<div class="muted text-truncate">
<small>{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}</small>
</div>
</div>
</div>
</div>
<div class="row-fluid visible-phone">
<div class="span12">
<div class="d-inline-block event-icon">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="d-inline-block event-name-container">
<a class="event-name text-truncate" href="{{{url}}}">{{{name}}}</a>
<div class="muted text-truncate">
<small>{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}</small>
</div>
</div>
</div>
</div>
</li>

110
theme/bootstrapbase/templates/block_myoverview/course-event-list.mustache
View file

@ -1,110 +0,0 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/course-event-list
This template renders a list of events for the myoverview block
sort by courses view.
Example context (json):
{
"urls": {
"noevents": "#"
}
}
}}
<div data-region="event-list-container"
data-limit="{{$limit}}20{{/limit}}"
data-course-id="{{$courseid}}{{/courseid}}"
data-last-id="{{$lastid}}{{/lastid}}"
data-midnight="{{midnight}}"
id="event-list-container-{{$courseid}}{{/courseid}}">
<div data-region="event-list-content">
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} recentlyoverdue, block_myoverview {{/str}}{{/title}}
{{$extratitleclasses}}text-danger{{/extratitleclasses}}
{{$startday}}-14{{/startday}}
{{$endday}}0{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} today {{/str}}{{/title}}
{{$extratitleclasses}}{{/extratitleclasses}}
{{$startday}}0{{/startday}}
{{$endday}}1{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} next7days, block_myoverview {{/str}}{{/title}}
{{$extratitleclasses}}{{/extratitleclasses}}
{{$startday}}1{{/startday}}
{{$endday}}7{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} next30days, block_myoverview {{/str}}{{/title}}
{{$extratitleclasses}}{{/extratitleclasses}}
{{$startday}}7{{/startday}}
{{$endday}}30{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} future, block_myoverview {{/str}}{{/title}}
{{$extratitleclasses}}{{/extratitleclasses}}
{{$startday}}30{{/startday}}
{{$endday}}{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}
<div class="text-xs-center text-center m-b-1">
<button type="button" class="btn btn-secondary" data-action="view-more">
{{#str}} viewmore {{/str}}
<span class="hidden" data-region="loading-icon-container">
{{> core/loading }}
</span>
</button>
</div>
</div>
<div class="hidden text-xs-center text-center m-y-3" data-region="empty-message">
<img class="empty-placeholder-image-sm"
src="{{urls.noevents}}"
alt="{{#str}} noevents, block_myoverview {{/str}}"
role="presentation">
<p class="text-muted m-t-1">{{#str}} noevents, block_myoverview {{/str}}</p>
<a href="{{viewurl}}" class="btn"
aria-label="{{#str}} viewcoursename, block_myoverview, {{{fullnamedisplay}}} {{/str}}">
{{#str}} viewcourse, block_myoverview {{/str}}
</a>
</div>
</div>
{{#js}}
require(['jquery', 'block_myoverview/event_list'], function($, EventList) {
var root = $("#event-list-container-{{$courseid}}{{/courseid}}");
EventList.registerEventListeners(root);
});
{{/js}}

51
theme/bootstrapbase/templates/block_myoverview/course-summary.mustache
View file

@ -1,51 +0,0 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/course-summary
This template renders the course summary (view by courses) for the myoverview block.
Example context (json):
{
"fullnamedisplay": "course 3",
"viewurl": "https://www.google.com",
"summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
}
}}
<div class="course-info-container" id="course-info-container-{{id}}">
<div class="visible-desktop">
{{> block_myoverview/progress-chart}}
<h4><a href="{{viewurl}}" class="{{^visible}}dimmed{{/visible}}">{{{fullnamedisplay}}}</a></h4>
</div>
<div class="hidden-desktop">
<div class="media">
<div class="pull-left">
<div class="media-object">
{{> block_myoverview/progress-chart}}
</div>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="{{viewurl}}" class="{{^visible}}dimmed{{/visible}}">{{{fullnamedisplay}}}</a>
</h4>
</div>
</div>
</div>
<p class="muted">
{{#shortentext}} 140, {{{summary}}}{{/shortentext}}
</p>
</div>

41
theme/bootstrapbase/templates/block_myoverview/courses-view-nav-grouping-display-filter.mustache Normal file
View file

@ -0,0 +1,41 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/courses-view-nav-grouping-display-filter
This template renders the main content area for the myoverview block.
Example context (json):
{}
}}
<div data-region="courses-grouping-display-filter" class="btn-group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span data-active-item-text>{{#str}} inprogress, block_myoverview {{/str}}</span>
<span data-region="caret" class="caret"></span>
</button>
<ul class="dropdown-menu" data-show-active-item>
<li class="dropdown-item active" data-target="#myoverview_courses_view_in_progress" data-toggle="tab">
<a tabindex="-1" href="#">{{#str}} inprogress, block_myoverview {{/str}}</a>
</li>
<li class="dropdown-item" data-target="#myoverview_courses_view_future" data-toggle="tab">
<a tabindex="-1" href="#">{{#str}} future, block_myoverview {{/str}}</a>
</li>
<li class="dropdown-item" data-target="#myoverview_courses_view_past" data-toggle="tab">
<a tabindex="-1" href="#">{{#str}} past, block_myoverview {{/str}}</a>
</li>
</ul>
</div>

13
theme/bootstrapbase/templates/block_myoverview/courses-view.mustache
View file

@ -24,19 +24,6 @@
}}
<div id="courses-view-{{uniqid}}" data-region="courses-view">
{{#hascourses}}
<div class="row text-center">
<div class="btn-group m-b-1" role="group" data-toggle="btns">
<a class="btn btn-default active" href="#myoverview_courses_view_in_progress" data-toggle="tab">
{{#str}} inprogress, block_myoverview {{/str}}
</a>
<a class="btn btn-default" href="#myoverview_courses_view_future" data-toggle="tab">
{{#str}} future, block_myoverview {{/str}}
</a>
<a class="btn btn-default" href="#myoverview_courses_view_past" data-toggle="tab">
{{#str}} past, block_myoverview {{/str}}
</a>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active fade in" id="myoverview_courses_view_in_progress">
{{#inprogress}}

104
theme/bootstrapbase/templates/block_myoverview/event-list-item.mustache
View file

@ -1,104 +0,0 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/event-list-item
This template renders an event list item for the myoverview block.
Example context (json):
{
"name": "Assignment due 1",
"url": "https://www.google.com",
"timesort": 1490320388,
"course": {
"fullnamedisplay": "Course 1"
},
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1,
"showitemcount": true,
"actionable": true
},
"icon": {
"key": "icon",
"component": "mod_assign",
"alttext": "Assignment icon"
}
}
}}
<li class="list-group-item event-list-item" data-region="event-list-item">
<div class="row-fluid visible-desktop">
<div class="span6">
<div class="d-inline-block event-icon">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="d-inline-block event-name-container">
<a class="event-name text-truncate" href="{{{url}}}">{{{name}}}</a>
<div class="muted text-truncate"><small>{{{course.fullnamedisplay}}}</small></div>
</div>
</div>
<div class="span6">
<div class="row-fluid">
<div class="span5 text-truncate">
{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}
</div>
<div class="span7 text-truncate">
{{#action.actionable}}
<a href="{{{action.url}}}">{{action.name}}</a>
{{#action.itemcount}}
{{#action.showitemcount}}
<span class="badge">{{.}}</span>
{{/action.showitemcount}}
{{/action.itemcount}}
{{/action.actionable}}
{{^action.actionable}}
<div class="muted">{{action.name}}</div>
{{/action.actionable}}
</div>
</div>
</div>
</div>
<div class="row-fluid visible-tablet">
<div class="span8">
<div class="d-inline-block event-icon">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="d-inline-block event-name-container">
<a class="event-name text-truncate" href="{{{url}}}">{{name}}</a>
<div class="muted text-truncate"><small>{{{course.fullnamedisplay}}}</small></div>
</div>
</div>
<div class="span4 text-right text-truncate">
{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}
</div>
</div>
<div class="row-fluid visible-phone">
<div class="span12">
<div class="d-inline-block event-icon">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="d-inline-block event-name-container">
<a class="event-name text-truncate" href="{{{url}}}">{{{name}}}</a>
<div class="muted text-truncate"><small>{{{course.fullnamedisplay}}}</small></div>
</div>
<div class="text-right text-truncate">
{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}
</div>
</div>
</div>
</li>

37
theme/bootstrapbase/templates/block_myoverview/main.mustache
View file

@ -24,33 +24,20 @@
}}
<div id="block-myoverview-{{uniqid}}" class="block-myoverview" data-region="myoverview">
<ul id="block-myoverview-view-choices-{{uniqid}}" class="nav nav-tabs" role="tablist">
<li class="nav-item {{#viewingtimeline}}active{{/viewingtimeline}}">
<a class="nav-link" href="#myoverview_timeline_view" role="tab" data-toggle="tab" data-tabname="timeline">
{{#str}} timeline, block_myoverview {{/str}}
</a>
</li>
<li class="nav-item {{#viewingcourses}}active{{/viewingcourses}}">
<a class="nav-link" href="#myoverview_courses_view" role="tab" data-toggle="tab" data-tabname="courses">
{{#str}} courses {{/str}}
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade {{#viewingtimeline}}in active{{/viewingtimeline}}" id="myoverview_timeline_view">
{{> block_myoverview/timeline-view }}
</div>
<div role="tabpanel" class="tab-pane fade {{#viewingcourses}}in active{{/viewingcourses}}" id="myoverview_courses_view">
<div class="container-fluid p-0 m-b-1">
<div class="row-fluid no-gutters">
{{#coursesview}}
{{> block_myoverview/courses-view }}
{{#hascourses}}
<div class="{{#viewingtimeline}}d-none{{/viewingtimeline}}" data-tab-content="courses">
{{> block_myoverview/courses-view-nav-grouping-display-filter }}
</div>
{{/hascourses}}
{{/coursesview}}
</div>
</div>
<div class="container-fluid p-0">
{{#coursesview}}
{{> block_myoverview/courses-view }}
{{/coursesview}}
</div>
</div>
{{#js}}
require(['jquery', 'block_myoverview/tab_preferences'], function($, TabPreferences) {
var root = $('#block-myoverview-view-choices-{{uniqid}}');
TabPreferences.registerEventListeners(root);
});
{{/js}}

55
theme/bootstrapbase/templates/block_myoverview/timeline-view.mustache
View file

@ -1,55 +0,0 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/timeline-view
This template renders the timeline view for the myoverview block.
Example context (json):
{}
}}
<div id="timeline-view-{{uniqid}}" data-region="timeline-view">
<div class="row text-center">
<div class="btn-group m-b-1" role="group" data-toggle="btns">
<a class="btn btn-default active" href="#myoverview_timeline_dates" data-toggle="tab">
{{#str}} sortbydates, block_myoverview {{/str}}
</a>
<a class="btn btn-default" href="#myoverview_timeline_courses" data-toggle="tab">
{{#str}} sortbycourses, block_myoverview {{/str}}
</a>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active fade in" id="myoverview_timeline_dates">
{{> block_myoverview/timeline-view-dates }}
</div>
<div class="tab-pane fade" id="myoverview_timeline_courses">
{{> block_myoverview/timeline-view-courses }}
</div>
</div>
</div>
{{#js}}
require(['jquery', 'core/custom_interaction_events'], function($, customEvents) {
var root = $('#timeline-view-{{uniqid}}');
customEvents.define(root, [customEvents.events.activate]);
root.on(customEvents.events.activate, '[data-toggle="btns"] > .btn', function() {
root.find('.btn.active').removeClass('active');
$(this).addClass('active');
});
});
{{/js}}

28
theme/bootstrapbase/templates/block_myoverview/course-item.mustache → theme/bootstrapbase/templates/block_timeline/course-item-loading-placeholder.mustache
View file

@ -15,7 +15,7 @@
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/course-item
@template block_timeline/course-item-loading-placeholder
This template renders the each course block containing a summary and calendar events.
@ -26,19 +26,19 @@
"summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
}
}}
<li class="list-group-item well well-small">
<div data-region="course-events-container" id="course-events-container-{{id}}" data-course-id="{{id}}">
<div class="row-fluid">
<div class="span3">
{{> block_myoverview/course-summary }}
</div>
<div class="span9">
{{< block_myoverview/course-event-list }}
{{$limit}}10{{/limit}}
{{$offset}}0{{/offset}}
{{$courseid}}{{id}}{{/courseid}}
{{/ block_myoverview/course-event-list }}
<li class="m-t-1">
<div class="bg-pulse-grey" style="height: 25px; width: 50%;"></div>
<div class="m-t-1">
<ul class="media-list">
{{> block_timeline/placeholder-event-list-item }}
{{> block_timeline/placeholder-event-list-item }}
{{> block_timeline/placeholder-event-list-item }}
{{> block_timeline/placeholder-event-list-item }}
{{> block_timeline/placeholder-event-list-item }}
</ul>
<div class="m-t-1">
<div class="bg-pulse-grey pull-right" style="height: 35px; width: 25%;"></div>
<div class="bg-pulse-grey" style="height: 35px; width: 25%;"></div>
</div>
</div>
</div>
</li>

63
theme/bootstrapbase/templates/block_timeline/event-list-item.mustache Normal file
View file

@ -0,0 +1,63 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_timeline/event-list-item
This template renders an event list item for the timeline block.
Example context (json):
{
"name": "Assignment due 1",
"url": "https://www.google.com",
"timesort": 1490320388,
"course": {
"fullnamedisplay": "Course 1"
},
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1,
"showitemcount": true,
"actionable": true
},
"icon": {
"key": "icon",
"component": "mod_assign",
"alttext": "Assignment icon"
}
}
}}
<li class="media">
<a
class="media"
href="{{{action.url}}}"
title="{{name}}"
data-region="event-list-item"
aria-label='{{#str}} ariaeventlistitem, block_timeline, { "name": "{{name}}", "course": "{{course.fullnamedisplay}}", "date": "{{#userdate}} {{timesort}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}" } {{/str}}'
>
<div class="icon-size-4 pull-left">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<small class="text-right text-nowrap pull-right">
{{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
</small>
<div class="text-truncate line-height-3 media-body">
<h6 class="text-truncate m-0">{{{name}}}</h6>
<small class="text-muted text-truncate">{{{course.fullnamedisplay}}}</small>
</div>
</a>
</li>

35
theme/bootstrapbase/templates/block_myoverview/event-list-group.mustache → theme/bootstrapbase/templates/block_timeline/event-list-items.mustache
View file

@ -15,24 +15,25 @@
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_myoverview/event-list-group
@template block_timeline/event-list-items
This template renders a list of events for the myoverview block.
This template renders a group of event list items for the timeline block.
Example context (json):
{
"events": [
{
"enddate": "Nov 4th, 10am",
"name": "Assignment due 1",
"url": "https://www.google.com",
"timesort": 1490320388,
"course": {
"fullname": "Course 1"
"fullnamedisplay": "Course 1"
},
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1
"itemcount": 1,
"actionable": true
},
"icon": {
"key": "icon",
@ -41,16 +42,17 @@
}
},
{
"enddate": "Nov 4th, 10am",
"name": "Assignment due 2",
"url": "https://www.google.com",
"timesort": 1490320388,
"course": {
"fullname": "Course 1"
"fullnamedisplay": "Course 1"
},
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1
"itemcount": 1,
"actionable": true
},
"icon": {
"key": "icon",
@ -61,15 +63,8 @@
]
}
}}
<div data-region="event-list-group-container"
data-start-day="{{$startday}}0{{/startday}}"
data-end-day="{{$endday}}{{/endday}}"
class="hidden">
<h5 class="{{$extratitleclasses}}{{/extratitleclasses}}" id="event-list-title-{{uniqid}}"><strong>{{$title}}{{/title}}</strong></h5>
<ul class="unstyled well well-small" data-region="event-list" aria-describedby="event-list-title-{{uniqid}}">
{{$eventlistitems}}
{{> block_myoverview/event-list-items }}
{{/eventlistitems}}
</ul>
</div>
<ul class="media-list">
{{#events}}
{{> block_timeline/event-list-item }}
{{/events}}
</ul>

55
theme/bootstrapbase/templates/block_timeline/event-list.mustache Normal file
View file

@ -0,0 +1,55 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_timeline/event-list
This template renders a list of events for the timeline block.
Example context (json):
{
}
}}
<div data-region="event-list-container"
data-days-offset="{{$daysoffset}}{{#hasdaysoffset}}{{daysoffset}}{{/hasdaysoffset}}{{^hasdaysoffset}}0{{/hasdaysoffset}}{{/daysoffset}}"
{{^nodayslimit}}data-days-limit="{{$dayslimit}}{{#hasdayslimit}}{{dayslimit}}{{/hasdayslimit}}{{^hasdayslimit}}30{{/hasdayslimit}}{{/dayslimit}}"{{/nodayslimit}}
data-course-id="{{$courseid}}{{/courseid}}"
data-midnight="{{midnight}}"
>
<div data-region="event-list-loading-placeholder">
<ul class="media-list m-t-1">
{{> block_timeline/placeholder-event-list-item }}
{{> block_timeline/placeholder-event-list-item }}
{{> block_timeline/placeholder-event-list-item }}
{{> block_timeline/placeholder-event-list-item }}
{{> block_timeline/placeholder-event-list-item }}
</ul>
<div class="m-t-1">
<div class="bg-pulse-grey pull-right" style="height: 35px; width: 25%;"></div>
<div class="bg-pulse-grey" style="height: 35px; width: 25%;"></div>
</div>
</div>
<div data-region="event-list-content"></div>
<div class="hidden text-xs-center text-center mt-3" data-region="empty-message">
<img
src="{{urls.noevents}}"
alt="{{#str}} noevents, block_timeline {{/str}}"
role="presentation"
style="height: 70px; width: 70px"
>
<p class="text-muted m-t-1">{{#str}} noevents, block_timeline {{/str}}</p>
</div>
</div>

50
theme/bootstrapbase/templates/block_timeline/main.mustache Normal file
View file

@ -0,0 +1,50 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_timeline/main
This template renders the main content area for the timeline block.
Example context (json):
{}
}}
<div id="block-timeline-{{uniqid}}" class="block-timeline" data-region="timeline">
<div class="container-fluid p-0 pb-3 border-bottom">
<div class="row-fluid no-gutters">
{{> block_timeline/nav-day-filter }}
{{> block_timeline/nav-view-selector }}
</div>
</div>
<div class="container-fluid p-0">
{{> block_timeline/view }}
</div>
</div>
{{#js}}
require(
[
'jquery',
'block_timeline/main',
],
function(
$,
Main
) {
var root = $('#block-timeline-{{uniqid}}');
Main.init(root);
});
{{/js}}

67
theme/bootstrapbase/templates/block_timeline/nav-day-filter.mustache Normal file
View file

@ -0,0 +1,67 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_timeline/nav-day-filter
This template renders the day range selector for the timeline view.
Example context (json):
{}
}}
<div data-region="day-filter" class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#pix}} i/duration {{/pix}}
<span class="sr-only">
{{#str}} ariadayfilter, block_timeline {{/str}}
<span data-active-item-text>{{#str}} next30days, block_timeline {{/str}}</span>
</span>
<span data-region="caret" class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu" data-show-active-item>
<li class="dropdown-item" data-from="-14">
<a href="#" aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} all, core {{/str}}{{/str}}">
{{#str}} all, core {{/str}}
</a>
</li>
<li class="dropdown-item" data-from="-14" data-to="0">
<a href="#" aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} overdue, block_timeline {{/str}}{{/str}}">
{{#str}} overdue, block_timeline {{/str}}
</a>
</li>
<li class="divider"></li>
<li class="dropdown-item" data-from="0" data-to="7">
<a href="#" aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next7days, block_timeline {{/str}}{{/str}}">
{{#str}} next7days, block_timeline {{/str}}
</a>
</li>
<li class="dropdown-item active" data-from="0" data-to="30">
<a href="#" aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next30days, block_timeline {{/str}}{{/str}}">
{{#str}} next30days, block_timeline {{/str}}
</a>
</li>
<li class="dropdown-item" data-from="0" data-to="90">
<a href="#" aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next3months, block_timeline {{/str}}{{/str}}">
{{#str}} next3months, block_timeline {{/str}}
</a>
</li>
<li class="dropdown-item" data-from="0" data-to="180">
<a href="#" aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next6months, block_timeline {{/str}}{{/str}}">
{{#str}} next6months, block_timeline {{/str}}
</a>
</li>
</ul>
</div>

46
theme/bootstrapbase/templates/block_timeline/nav-view-selector.mustache Normal file
View file

@ -0,0 +1,46 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_timeline/nav-view-selector
This template renders the timeline sort selector.
Example context (json):
{}
}}
<div data-region="view-selector" class="btn-group pull-right">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{#pix}} i/filter {{/pix}}
<span class="sr-only">
{{#str}} ariaviewselector, block_timeline{{/str}}
<span data-active-item-text>{{#str}} sortbydates, block_timeline {{/str}}</span>
</span>
<span data-region="caret" class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu dropdown-menu-right" data-show-active-item>
<li class="dropdown-item active" data-target="#view_dates_{{uniqid}}" data-toggle="tab">
<a href="#" aria-label="{{#str}} ariaviewselectoroption, block_timeline, {{#str}} sortbydates, block_timeline {{/str}}{{/str}}">
{{#str}} sortbydates, block_timeline {{/str}}
</a>
</li>
<li class="dropdown-item" data-target="#view_courses_{{uniqid}}" data-toggle="tab">
<a href="#" aria-label="{{#str}} ariaviewselectoroption, block_timeline, {{#str}} sortbycourses, block_timeline {{/str}}{{/str}}">
{{#str}} sortbycourses, block_timeline {{/str}}
</a>
</li>
</ul>
</div>

31
theme/bootstrapbase/templates/block_timeline/placeholder-event-list-item.mustache Normal file
View file

@ -0,0 +1,31 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_timeline/event-list-item
This template renders an event list item loading placeholder for the timeline block.
Example context (json):
{}
}}
<li class="media" style="height: 32px">
<div class="bg-pulse-grey pull-left" style="height: 32px; width: 32px; border-radius: 50%"></div>
<div class="media-body">
<div class="bg-pulse-grey" style="height: 15px;"></div>
<div class="bg-pulse-grey" style="height: 10px; margin-top: 7px; width: 75%"></div>
</div>
</li>

44
theme/bootstrapbase/templates/block_timeline/view.mustache Normal file
View file

@ -0,0 +1,44 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template block_timeline/view
This template renders the timeline view for the timeline block.
Example context (json):
{}
}}
<div data-region="timeline-view">
<div class="tab-content" style="overflow: visible">
<div class="tab-pane active fade in" data-region="view-dates" id="view_dates_{{uniqid}}">
{{> block_timeline/view-dates }}
</div>
<div
class="tab-pane fade"
data-region="view-courses"
data-midnight="{{midnight}}"
data-limit="2"
data-offset="0"
data-days-limit="30"
data-days-offset="0"
data-no-events-url="{{urls.noevents}}"
id="view_courses_{{uniqid}}"
>
{{> block_timeline/view-courses }}
</div>
</div>
</div>

195
theme/bootstrapbase/templates/core/paged_content_paging_bar.mustache
View file

@ -27,6 +27,7 @@
"next": true,
"first": true,
"last": true,
"activepagenumber": 1,
"pages": [
{
"url": "#",
@ -40,59 +41,145 @@
]
}
}}
<div aria-label="{{label}}"
class="pagination"
id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
data-region="paging-bar"
data-items-per-page="{{itemsperpage}}">
<div data-region="paging-control-container">
{{#showitemsperpageselector}}
<div
id="paging-control-limit-container-{{uniqid}}"
data-region="paging-control-limit-container"
class="pull-left"
>
<span class="mr-1">{{#str}} show {{/str}}</span>
<div class="btn-group">
<button
type="button"
class="btn btn-outline-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-action="limit-toggle"
{{#arialabels.itemsperpage}}
aria-label="{{.}}"
{{/arialabels.itemsperpage}}
{{^arialabels.itemsperpage}}
aria-label="{{#str}} pagedcontentpagingbaritemsperpage, core, {{#itemsperpage}}{{#active}}{{value}}{{/active}}{{/itemsperpage}}{{/str}}"
{{/arialabels.itemsperpage}}
>
{{#itemsperpage}}
{{#active}}
<span data-active-item-text>{{value}}</span>
{{/active}}
{{/itemsperpage}}
<span data-region="caret" class="caret"></span>
</button>
<ul
role="menu"
class="dropdown-menu"
data-show-active-item
{{#arialabels.itemsperpagecomponents}}
data-active-item-button-aria-label-components="{{.}}"
{{/arialabels.itemsperpagecomponents}}
{{^arialabels.itemsperpagecomponents}}
data-active-item-button-aria-label-components="pagedcontentpagingbaritemsperpage, core"
{{/arialabels.itemsperpagecomponents}}
>
{{#itemsperpage}}
<li class="dropdown-item {{#active}}active{{/active}}" data-limit={{value}}>
<a href="#">
{{#value}}{{.}}{{/value}}
{{^value}}{{#str}} all, core {{/str}}{{/value}}
</a>
</li>
{{/itemsperpage}}
</ul>
</div>
</div>
{{/showitemsperpageselector}}
<ul class="pagination">
{{#previous}}
{{< core/paged_content_paging_bar_item }}
{{$item-content}}
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">{{#str}}previous{{/str}}</span>
{{/item-content}}
{{$attributes}}data-control="previous"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/previous}}
{{#first}}
{{< core/paged_content_paging_bar_item }}
{{$item-content}}
<span aria-hidden="true">{{#str}}first{{/str}}</span>
<span class="sr-only">{{#str}}first{{/str}}</span>
{{/item-content}}
{{$attributes}}data-control="first"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/first}}
{{#pages}}
{{< core/paged_content_paging_bar_item }}
{{$attributes}}data-page="true"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/pages}}
{{#last}}
{{< core/paged_content_paging_bar_item }}
{{$item-content}}
<span aria-hidden="true">{{#str}}last{{/str}}</span>
<span class="sr-only">{{#str}}last{{/str}}</span>
{{/item-content}}
{{$attributes}}data-control="last"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/last}}
{{#next}}
{{< core/paged_content_paging_bar_item }}
{{$item-content}}
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">{{#str}}next{{/str}}</span>
{{/item-content}}
{{$attributes}}data-control="next"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/next}}
</ul>
<div
aria-label="{{label}}"
id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
class="m-0 pagination {{#showitemsperpageselector}}pagination-right{{/showitemsperpageselector}}"
data-region="paging-bar"
data-ignore-control-while-loading="{{ignorecontrolwhileloading}}"
data-hide-control-on-single-page="{{hidecontrolonsinglepage}}"
{{#activepagenumber}}
data-active-page-number="{{.}}"
{{/activepagenumber}}
{{^activepagenumber}}
data-active-page-number="1"
{{/activepagenumber}}
{{#showitemsperpageselector}}
{{#itemsperpage}}
{{#active}}
data-items-per-page="{{value}}"
{{/active}}
{{/itemsperpage}}
{{/showitemsperpageselector}}
{{^showitemsperpageselector}}
data-items-per-page="{{itemsperpage}}"
{{/showitemsperpageselector}}
{{#arialabels.paginationnav}}
aria-label="{{.}}"
{{/arialabels.paginationnav}}
{{^arialabels.paginationnav}}
aria-label="{{#str}} pagedcontentnavigation, core {{/str}}"
{{/arialabels.paginationnav}}
{{#arialabels.paginationnavitemcomponents}}
data-aria-label-components-pagination-item="{{.}}"
{{/arialabels.paginationnavitemcomponents}}
{{^arialabels.paginationnavitemcomponents}}
data-aria-label-components-pagination-item="pagedcontentnavigationitem, core"
{{/arialabels.paginationnavitemcomponents}}
{{#arialabels.paginationactivenavitemcomponents}}
data-aria-label-components-pagination-active-item="{{.}}"
{{/arialabels.paginationactivenavitemcomponents}}
{{^arialabels.paginationactivenavitemcomponents}}
data-aria-label-components-pagination-active-item="pagedcontentnavigationactiveitem, core"
{{/arialabels.paginationactivenavitemcomponents}}
>
<ul class="mb-0">
{{#previous}}
{{< core/paged_content_paging_bar_item }}
{{$item-content}}
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">{{#str}}previous{{/str}}</span>
{{/item-content}}
{{$attributes}}data-control="previous"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/previous}}
{{#first}}
{{< core/paged_content_paging_bar_item }}
{{$item-content}}
<span aria-hidden="true">{{#str}}first{{/str}}</span>
<span class="sr-only">{{#str}}first{{/str}}</span>
{{/item-content}}
{{$attributes}}data-control="first"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/first}}
{{#pages}}
{{< core/paged_content_paging_bar_item }}
{{$attributes}}data-page="true"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/pages}}
{{#last}}
{{< core/paged_content_paging_bar_item }}
{{$item-content}}
<span aria-hidden="true">{{#str}}last{{/str}}</span>
<span class="sr-only">{{#str}}last{{/str}}</span>
{{/item-content}}
{{$attributes}}data-control="last"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/last}}
{{#next}}
{{< core/paged_content_paging_bar_item }}
{{$item-content}}
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">{{#str}}next{{/str}}</span>
{{/item-content}}
{{$attributes}}data-control="next"{{/attributes}}
{{/ core/paged_content_paging_bar_item }}
{{/next}}
</ul>
</div>
</div>
{{#js}}
require(['jquery', 'core/paged_content_paging_bar'], function($, PagingControl) {
var root = $('#{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}');
PagingControl.init(root);
});
{{/js}}

6
theme/bootstrapbase/templates/core/paged_content_paging_dropdown.mustache
View file

@ -68,9 +68,3 @@
{{/ core/paged_content_paging_dropdown_item }}
</ul>
</div>
{{#js}}
require(['jquery', 'core/paged_content_paging_dropdown'], function($, PagingControl) {
var root = $('#paging-dropdown-{{uniqid}}');
PagingControl.init(root);
});
{{/js}}