MDL-63058 block_myoverview: starring and storing preferences

This commit is contained in:
Bas Brands 2018-10-20 17:53:35 +02:00
parent b81722e22f
commit 3cfff88516
39 changed files with 1403 additions and 101 deletions

View file

@ -106,6 +106,31 @@ $card-gutter : $card-deck-margin * 2;
.summary img {
max-width: 100%;
}
.icon {
margin-right: 0;
}
a,
.btn-link {
color: inherit;
}
.btn.btn-link.btn-icon {
height: $icon-width;
width: $icon-width;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
@include hover-focus {
background-color: $gray-200;
}
@each $size, $length in $iconsizes {
&.icon-size-#{$size} {
height: ($length + 20px) !important;
width: ($length + 20px) !important;
}
}
}
@include media-breakpoint-down(sm) {
.summaryimage {
max-height: 7rem;
@ -165,6 +190,11 @@ body.drawer-open-left #region-main.has-blocks .block_myoverview {
flex-basis: calc(33.33% - #{$card-gutter});
}
}
@media (min-width: 1400px) {
.course-card {
flex-basis: calc(25% - #{$card-gutter});
}
}
}
// Show expand collapse with font-awesome.

View file

@ -11162,6 +11162,40 @@ div.editor_atto_toolbar button .icon {
.block_myoverview .summary img {
max-width: 100%; }
.block_myoverview .icon {
margin-right: 0; }
.block_myoverview a,
.block_myoverview .btn-link {
color: inherit; }
.block_myoverview .btn.btn-link.btn-icon, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.addcriterion {
height: 16px;
width: 16px;
padding: 0;
border-radius: 50%;
flex-shrink: 0; }
.block_myoverview .btn.btn-link.btn-icon:hover, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.action:hover, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.action:hover, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:hover, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon:hover, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:hover, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.addcriterion:hover, .block_myoverview .btn.btn-link.btn-icon:focus, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.action:focus, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.action:focus, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:focus, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon:focus, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:focus, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.addcriterion:focus {
background-color: #e9ecef; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-0, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-0.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-0.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-0, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-0, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-0.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-0.addcriterion {
height: 20px !important;
width: 20px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-1, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-1.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-1.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-1, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-1, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-1.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-1.addcriterion {
height: 24px !important;
width: 24px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-2, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-2.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-2.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-2, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-2, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-2.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-2.addcriterion {
height: 28px !important;
width: 28px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-3, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-3.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-3.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-3, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-3, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-3.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-3.addcriterion {
height: 36px !important;
width: 36px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-4, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-4.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-4.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-4, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-4, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-4.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-4.addcriterion {
height: 44px !important;
width: 44px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-5, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-5.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-5.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-5, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-5, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-5.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-5.addcriterion {
height: 68px !important;
width: 68px !important; }
@media (max-width: 767.98px) {
.block_myoverview .summaryimage {
max-height: 7rem; } }
@ -11202,6 +11236,10 @@ body.drawer-open-left #region-main.has-blocks .block_myoverview .course-card {
body.drawer-open-left #region-main.has-blocks .block_myoverview .course-card {
flex-basis: calc(33.33% - 0.5rem); } }
@media (min-width: 1400px) {
body.drawer-open-left #region-main.has-blocks .block_myoverview .course-card {
flex-basis: calc(25% - 0.5rem); } }
.block_settings .block_tree [aria-expanded="true"],
.block_settings .block_tree [aria-expanded="true"].emptybranch,
.block_settings .block_tree [aria-expanded="false"],

View file

@ -346,6 +346,12 @@
*::after {
box-sizing: border-box;
}
.favouritebtn {
box-sizing: content-box;
* {
box-sizing: content-box;
}
}
.empty-placeholder-image-lg {
height: 125px;
}
@ -396,6 +402,24 @@
.summary img {
max-width: 100%;
}
.favouritebtn {
cursor: pointer;
margin-left: 0;
}
.coursemenubtn {
border-radius: 50%;
height: 36px;
width: 36px;
padding: 8px 0;
&:hover {
background-color: #e9ecef;
}
img.icon {
padding-right: 0;
height: 16px;
width: 16px;
}
}
@media (max-width: 576px) {
.summaryimage {

View file

@ -337,6 +337,10 @@
align-self: stretch;
}
.align-items-start {
align-items: flex-start !important;
}
.ml-auto {
margin-left: auto;
}

View file

@ -16541,6 +16541,12 @@ body {
.block_myoverview *::after {
box-sizing: border-box;
}
.block_myoverview .favouritebtn {
box-sizing: content-box;
}
.block_myoverview .favouritebtn * {
box-sizing: content-box;
}
.block_myoverview .empty-placeholder-image-lg {
height: 125px;
}
@ -16607,6 +16613,24 @@ body {
.block_myoverview .summary img {
max-width: 100%;
}
.block_myoverview .favouritebtn {
cursor: pointer;
margin-left: 0;
}
.block_myoverview .coursemenubtn {
border-radius: 50%;
height: 36px;
width: 36px;
padding: 8px 0;
}
.block_myoverview .coursemenubtn:hover {
background-color: #e9ecef;
}
.block_myoverview .coursemenubtn img.icon {
padding-right: 0;
height: 16px;
width: 16px;
}
@media (max-width: 576px) {
.block_myoverview .summaryimage {
max-height: 7rem;
@ -22180,6 +22204,9 @@ ul.indented-list {
.align-self-stretch {
align-self: stretch;
}
.align-items-start {
align-items: flex-start !important;
}
.ml-auto {
margin-left: auto;
}

View file

@ -0,0 +1,51 @@
{{!
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-action-menu
This template renders action menu for each course.
Example context (json):
{
"isfavourite": true
}
}}
<div class="ml-auto dropdown">
<button class="btn btn-link btn-icon icon-size-3 coursemenubtn"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
aria-label="{{#str}} aria:courseactions, block_myoverview {{/str}}">
{{#pix}} i/moremenu, core {{/pix}}
</button>
<div class="dropdown-menu pull-right">
<ul class="list-unstyled">
<li class="{{#isfavourite}}hidden{{/isfavourite}}" data-action="add-favourite" data-course-id="{{id}}">
<a class="dropdown-item p-a-1" href="#">
{{#pix}} i/star, core, {{#str}} starred, block_myoverview {{/str}} {{/pix}}
{{#str}} addtofavourites, block_myoverview {{/str}}
</a>
</li>
<li class="{{^isfavourite}}hidden{{/isfavourite}}" data-action="remove-favourite" data-course-id="{{id}}">
<a class="dropdown-item p-a-1" href="#">
{{#str}} removefromfavourites, block_myoverview {{/str}}
</a>
</li>
</ul>
</div>
</div>