Skip to content

Commit

Permalink
MDL-58235 block_myoverview: clean theme style for block_myoverview
Browse files Browse the repository at this point in the history
This is for the 'Timeline' view in Clean theme

Part of MDL-55611
  • Loading branch information
barbararamiro authored and ryanwyllie committed Apr 10, 2017
1 parent c3d8643 commit 24b423f
Show file tree
Hide file tree
Showing 12 changed files with 582 additions and 36 deletions.
21 changes: 21 additions & 0 deletions theme/bootstrapbase/less/moodle/blocks.less
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,19 @@
}

.block_myoverview {
background-color: transparent;

.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;

Expand Down Expand Up @@ -368,4 +380,13 @@
height: 220px;
overflow-y: hidden;
}

h4 {
font-weight: normal;
}

.well {
background-color: @white;
box-shadow: none;
}
}
20 changes: 20 additions & 0 deletions theme/bootstrapbase/style/moodle.css
Original file line number Diff line number Diff line change
Expand Up @@ -16365,6 +16365,19 @@ body {
height: 35px;
width: 35px;
}
.block_myoverview {
background-color: transparent;
}
.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;
}
Expand Down Expand Up @@ -16393,6 +16406,13 @@ body {
height: 220px;
overflow-y: hidden;
}
.block_myoverview h4 {
font-weight: normal;
}
.block_myoverview .well {
background-color: #fff;
box-shadow: none;
}
/**
* Moodle forms HTML isn't changeable via renderers (yet?) so this
* .less file imports styles from the bootstrap @variables file and
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,15 @@
Example context (json):
{
"enddate": "Nov 4th, 10am",
"name": "Assignment due 1",
"url": "https://www.google.com",
"timesort": 1490320388,
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1
"itemcount": 1,
"showitemcount": true,
"actionable": true
},
"icon": {
"key": "icon",
Expand All @@ -37,29 +39,57 @@
}
}
}}
<li class="list-group-item event-list-item m-b-1" data-region="event-list-item">
<div class="row-fluid">
<div class="span8">
<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="text-muted text-truncate">
{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}
<div class="muted text-truncate">
<small>{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}</small>
</div>
</div>
</div>
<div class="visible-desktop span4 text-truncate">
<div class="span5 text-truncate">
{{#action.actionable}}
<a href="{{{action.url}}}">{{action.name}}</a>
{{#action.itemcount}}
<span class="tag tag-pill tag-default">{{.}}</span>
{{#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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
{{!
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):
{
}
}}
<div data-region="event-list-container"
data-limit="{{$limit}}20{{/limit}}"
data-course-id="{{$courseid}}{{/courseid}}"
data-last-id="{{$lastid}}{{/lastid}}"
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" data-region="empty-message">
<img class="empty-placeholder-image-sm"
src="{{urls.noevents}}"
alt="{{#str}} noevents, block_myoverview {{/str}}">
<p class="text-muted m-t-1">{{#str}} noevents, block_myoverview {{/str}}</p>
<a href="{{viewurl}}" class="btn btn-secondary text-primary">
{{#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}}
28 changes: 13 additions & 15 deletions theme/bootstrapbase/templates/block_myoverview/course-item.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,23 @@
{
"shortname": "course 3",
"viewurl": "https://www.google.com",
"startdate": "Nov 1th, 10am",
"enddate": "Nov 4th, 10am",
"startdate": 1490320388,
"enddate": 1490320388,
"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 m-y-1">
<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="container-fluid">
<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 }}
</div>
<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 }}
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -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_myoverview/course-paging-content-item
This template renders each course block.
Example context (json):
{
"page": 1,
"active": true,
"courses": [
{
"fullnamedisplay": "course 1",
"viewurl": "https://www.google.com",
"startdate": 1490252232,
"enddate": 1490252232,
"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."
},
{
"fullnamedisplay": "course 2",
"viewurl": "https://www.google.com",
"startdate": 1490252232,
"enddate": 1490252232,
"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."
}
]
}
}}
{{< block_myoverview/paging-content-item }}
{{$content}}
{{#courses}}
{{> block_myoverview/courses-view-course-item }}
{{/courses}}
{{/content}}
{{/ block_myoverview/paging-content-item }}
Loading

0 comments on commit 24b423f

Please sign in to comment.