MDL-57447 block_myoverview: add templates for courses view
Part of MDL-55611 epic.
This commit is contained in:
Simey Lameze
committed by
Damyon Wiese
Damyon Wiese
parent
6922c9a183
commit
0fc7dbce37
@@ -0,0 +1,53 @@
|
||||
{{!
|
||||
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):
|
||||
{
|
||||
"shortname": "course 3",
|
||||
"viewurl": "https://www.google.com",
|
||||
"startdate": "Nov 1th, 10am",
|
||||
"enddate": "Nov 4th, 10am",
|
||||
"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 col-md-4 m-b-1">
|
||||
<div class="d-inline-block">
|
||||
<div class="d-inline-block m-x-1">
|
||||
<div class="course-info-container" id="course-info-container-{{id}}">
|
||||
<div class="row m-b-1">
|
||||
<div class="col-md-6">
|
||||
<!-- Will be replaced by the chart after course completion changes are done. -->
|
||||
<img height="100px" src="https://conceptdraw.com/a3039c3/p1/preview/640/pict--1-sector-donut-chart-management-indicators---vector-stencils-library.png--diagram-flowchart-example.png">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3 class="align-text-bottom"><a href="{{viewurl}}">{{shortname}}</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-muted m-b-1">
|
||||
{{startdate}} - {{enddate}}
|
||||
</div>
|
||||
<div class="row text-muted">
|
||||
{{{summary}}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -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_myoverview/courses-view
|
||||
|
||||
This template renders the courses view for the myoverview block.
|
||||
|
||||
Example context (json):
|
||||
{}
|
||||
}}
|
||||
<ul class="list-group unstyled" id="courses-view-future-{{uniqid}}">
|
||||
<span class="hidden" data-region="loading-icon-container">
|
||||
{{> core/loading }}
|
||||
</span>
|
||||
<div id="courses-future-container"
|
||||
data-limit="{{$limit}}6{{/limit}}"
|
||||
data-offset="{{$offset}}0{{/offset}}"
|
||||
data-status="future"
|
||||
data-region="courses-future-container">
|
||||
</div>
|
||||
</ul>
|
||||
<div class="text-xs-center text-center" data-region="courses-future-paging-bar" id="courses-future-paging-bar-{{uniqid}}"></div>
|
||||
{{#js}}
|
||||
require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
|
||||
var root = $("#courses-future-container"),
|
||||
pagingRoot = $("#courses-future-paging-bar-{{uniqid}}");
|
||||
|
||||
CoursesView.init(root, pagingRoot);
|
||||
});
|
||||
{{/js}}
|
||||
@@ -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_myoverview/courses-view
|
||||
|
||||
This template renders the courses view for the myoverview block.
|
||||
|
||||
Example context (json):
|
||||
{}
|
||||
}}
|
||||
<ul class="list-group unstyled" id="courses-view-in-progress-{{uniqid}}">
|
||||
<span class="hidden" data-region="loading-icon-container">
|
||||
{{> core/loading }}
|
||||
</span>
|
||||
<div id="courses-in-progress-container"
|
||||
data-limit="{{$limit}}6{{/limit}}"
|
||||
data-offset="{{$offset}}0{{/offset}}"
|
||||
data-status="inprogress"
|
||||
data-region="courses-in-progress-container">
|
||||
</div>
|
||||
</ul>
|
||||
<div class="text-xs-center text-center" data-region="courses-in-progress-paging-bar" id="courses-in-progress-paging-bar-{{uniqid}}"></div>
|
||||
{{#js}}
|
||||
require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
|
||||
var root = $("#courses-in-progress-container"),
|
||||
pagingRoot = $("#courses-in-progress-paging-bar-{{uniqid}}");
|
||||
|
||||
CoursesView.init(root, pagingRoot);
|
||||
});
|
||||
{{/js}}
|
||||
@@ -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_myoverview/courses-view
|
||||
|
||||
This template renders the courses view for the myoverview block.
|
||||
|
||||
Example context (json):
|
||||
{}
|
||||
}}
|
||||
<ul class="list-group unstyled" id="courses-view-past-{{uniqid}}">
|
||||
<span class="hidden" data-region="loading-icon-container">
|
||||
{{> core/loading }}
|
||||
</span>
|
||||
<div id="courses-past-container"
|
||||
data-limit="{{$limit}}6{{/limit}}"
|
||||
data-offset="{{$offset}}0{{/offset}}"
|
||||
data-status="past"
|
||||
data-region="courses-past-container">
|
||||
</div>
|
||||
</ul>
|
||||
<div class="text-xs-center text-center" data-region="courses-view-past-paging-bar" id="courses-past-paging-bar-{{uniqid}}"></div>
|
||||
{{#js}}
|
||||
require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
|
||||
var root = $("#courses-past-container"),
|
||||
pagingRoot = $("#courses-past-paging-bar-{{uniqid}}");
|
||||
|
||||
CoursesView.init(root, pagingRoot);
|
||||
});
|
||||
{{/js}}
|
||||
@@ -24,18 +24,36 @@
|
||||
}}
|
||||
<div id="courses-view-{{uniqid}}" data-region="courses-view">
|
||||
<div class="row text-xs-center text-center">
|
||||
<div class="btn-group m-y-2" role="group">
|
||||
<button type="button" class="btn btn-secondary active" data-action="view-in-progress">
|
||||
<div class="btn-group m-y-2" 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}}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-action="view-future">
|
||||
</a>
|
||||
<a class="btn btn-default" href="#myoverview_courses_view_future" data-toggle="tab">
|
||||
{{#str}} future, block_myoverview {{/str}}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-action="view-past">
|
||||
</a>
|
||||
<a class="btn btn-default" href="#myoverview_courses_view_past" data-toggle="tab">
|
||||
{{#str}} past, block_myoverview {{/str}}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active fade in" id="myoverview_courses_view_in_progress">
|
||||
{{> block_myoverview/courses-view-in-progress }}
|
||||
</div>
|
||||
<div class="tab-pane fade" id="myoverview_courses_view_future">
|
||||
{{> block_myoverview/courses-view-future }}
|
||||
</div>
|
||||
<div class="tab-pane fade" id="myoverview_courses_view_past">
|
||||
{{> block_myoverview/courses-view-past }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#js}}
|
||||
require(['jquery', 'core/custom_interaction_events'], function($, customEvents) {
|
||||
var root = $('#courses-view-{{uniqid}}');
|
||||
customEvents.define(root, [customEvents.events.activate]);
|
||||
root.on(customEvents.events.activate, '[data-toggle="btns"] > .btn', function() {
|
||||
root.find('.btn.active').removeClass('active');
|
||||
});
|
||||
});
|
||||
{{/js}}
|
||||
Reference in New Issue
Block a user