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

MDL-38661 Course: Add JS category expander.

Browse source 
This adds a category expanded which:
* fetches child content in a category tree if it has not already been loaded;
* toggles relevant classes on the category node to show and hide child content; and
* applies appropriate animations to improve user experience.
This commit is contained in:
Andrew Robert Nicols 2013-03-12 11:27:45 +00:00 • committed by Marina Glancy
parent b69ec2889e
commit 53c1b936e5
18 changed files with 1437 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

22
theme/base/style/core.css
View file

@ -241,13 +241,13 @@ a.skip:active {position: static;display: block;}
.mform fieldset.hidden {border-width:0;}
.mform fieldset.group {margin-bottom: 0}
.mform fieldset.error {border: 1px solid #A00;}
.mform .collapsible-actions {display: none;}
.jsenabled .mform .collapsible-actions {text-align: right; display: block;}
.dir-rtl .mform .collapsible-actions {text-align: left;}
.mform .collapseexpand {background: url([[pix:t/collapsed]]) left center no-repeat; padding-left: 18px;}
.dir-rtl .mform .collapseexpand {background-image: url([[pix:t/collapsed_rtl]]); background-position: right center; padding-left: 0; padding-right: 18px;}
.mform .collapse-all,
.dir-rtl .mform .collapse-all {background-image: url([[pix:t/expanded]]);}
.collapsible-actions {display: none;}
.jsenabled .collapsible-actions {text-align: right; display: block;}
.dir-rtl .collapsible-actions {text-align: left;}
.collapseexpand {background: url([[pix:t/collapsed]]) left center no-repeat; padding-left: 18px;}
.dir-rtl .collapseexpand {background-image: url([[pix:t/collapsed_rtl]]); background-position: right center; padding-left: 0; padding-right: 18px;}
.collapse-all,
.dir-rtl .collapse-all {background-image: url([[pix:t/expanded]]);}
.mform fieldset legend {padding: 0 0.35em;}
.mform fieldset.collapsible legend a.fheader {padding-left: 18px; background: url([[pix:t/expanded]]) left center no-repeat;}
.mform fieldset.collapsed legend a.fheader {background-image: url([[pix:t/collapsed]]);}
@ -1494,3 +1494,11 @@ div.badge .expireimage { width: 100px; height: 100px; left: 20px; top: 0px; }
ul.dragdrop-keyboard-drag li { list-style-type: none; }
.block-control-actions .moodle-core-dragdrop-draghandle img { width: 12px; height: 12px; }
a.disabled:hover,
a.disabled {
text-decoration: none;
cursor: default;
font-style: italic;
color: #808080;
}

4
theme/base/style/course.css
View file

@ -155,10 +155,6 @@ li.section.hidden span.commands a.editing_show {cursor:default;}
.course_category_tree .category .numberofcourse {font-size: 0.85em;}
.course_category_tree .controls {visibility: hidden;}
.course_category_tree .controls div {display:inline;cursor:pointer;}
.jsenabled .course_category_tree .controls {visibility: visible;}
.course_category_tree .category>.info .name {background-image:url([[pix:moodle|t/collapsed_empty]]);background-repeat: no-repeat;background-position:center left;}
.dir-rtl .course_category_tree .category>.info .name {background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);background-position:center right;}
.course_category_tree .category.with_children>.info .name {background-image:url([[pix:moodle|t/expanded]]);}

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

@ -141,6 +141,29 @@ a.autolink.glossary:hover {
.jsenabled .collapsed .collapsibleregioninner {
visibility: hidden;
}
.collapsible-actions {
display: none;
text-align: right;
}
.dir-rtl .collapsible-actions {
text-align: left;
}
.jsenabled .collapsible-actions {
display: block;
}
.collapsible-actions .collapseexpand {
padding-left: 20px;
background: url([[pix:t/collapsed]]) 2px center no-repeat;
}
.dir-rtl .collapsible-actions .collapseexpand {
padding-right: 20px;
padding-left: 0;
background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
}
.collapsible-actions .collapse-all,
.dir-rtl .collapsible-actions .collapse-all {
background-image: url([[pix:t/expanded]]);
}
.yui-overlay .yui-widget-bd {
background-color: #FFEE69;
border: 1px solid #A6982B;
@ -2110,3 +2133,11 @@ ul.dragdrop-keyboard-drag li {
width: 12px;
height: 12px;
}
a.disabled:hover,
a.disabled {
text-decoration: none;
cursor: default;
font-style: italic;
color: #808080;
}

21
theme/bootstrapbase/less/moodle/course.less
View file

@ -498,26 +498,6 @@ span.editinstructions {
font-size: @fontSizeSmall;
}
.course_category_tree .controls {
visibility: hidden;
}
.course_category_tree .controls div {
display:inline;
cursor:pointer;
}
.jsenabled .course_category_tree .controls {
visibility: visible;
}
.course_category_tree .controls {
margin-bottom:5px;
text-align:right;
float:right;
}
.course_category_tree .controls div {
padding-right:2em;
font-size:75%;
}
.course_category_tree .category>.info .name {
background-image:url([[pix:moodle|t/collapsed_empty]]);
background-repeat: no-repeat;
@ -548,6 +528,7 @@ span.editinstructions {
padding:0;
margin:3px 0;
margin-bottom:3px;
clear: both;
}
.course_category_tree.frontpage-category-names .category >.info {
background:none;

23
theme/bootstrapbase/less/moodle/forms.less
View file

@ -51,29 +51,6 @@ form {
.jsenabled .mform .collapsed .fcontainer {
display: none;
}
.mform .collapsible-actions {
display: none;
text-align: right;
}
.dir-rtl .mform .collapsible-actions {
text-align: left;
}
.jsenabled .mform .collapsible-actions {
display: block;
}
.mform .collapsible-actions .collapseexpand {
padding-left: 20px;
background: url([[pix:t/collapsed]]) 2px center no-repeat;
}
.dir-rtl .mform .collapsible-actions .collapseexpand {
padding-right: 20px;
padding-left: 0;
background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
}
.mform .collapsible-actions .collapse-all,
.dir-rtl .mform .collapsible-actions .collapse-all {
background-image: url([[pix:t/expanded]]);
}
.mform .fitem .fitemtitle div {
display: inline;

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

File diff suppressed because one or more lines are too long

10
theme/canvas/style/course.css
View file

@ -8,16 +8,6 @@
margin: 15px 0 25px;
}
.course_category_tree .controls {
color: #888;
font-size: 0.9em;
margin-top: 10px;
}
.course_category_tree .controls div {
margin: 0 5px 0 0;
}
#page-course-index-category .generalbox.info {
margin: 25px auto 30px;
width: 75%;

2
theme/formal_white/style/course.css
View file

@ -99,8 +99,6 @@
.courses .coursebox.odd:hover, .course_category_tree .courses > .paging:hover {background-color:[[setting:hovercolor]];}
/* Category listings */
.course_category_tree .controls {margin-bottom:5px;text-align:right;float:right;}
.course_category_tree .controls div {padding-right:2em;font-size:75%;}
.course_category_tree .category > .info {background-image:url([[pix:theme|trend/__setting_trendcolor__/hgradient]]);background-repeat:repeat-x;border:1px solid #ddd;}
.course_category_tree.frontpage-category-names .category > .info {background:none;border:none;}
.course_category_tree .category > .info {margin: 5px 0;}

12
theme/magazine/style/core.css
View file

@ -941,18 +941,6 @@ div.course_category_tree div.coursebox > .info > .name > a {
font-size: 14px;
}
div.course_category_tree div.controls {
font-size: 10px;
color: #666;
text-transform: uppercase;
}
div.course_category_tree div.controls div {
margin-top: 3px;
margin-right: 10px;
border-bottom: 1px solid #dadada;
}
/** inside of course **/
li.section {

3
theme/standard/style/course.css
View file

@ -85,9 +85,6 @@
.coursebox .content .coursefile,
.coursebox.remotecoursebox .remotecourseinfo {font-size:0.9em;}
.course_category_tree .controls {margin-bottom:5px;text-align:right;float:right;}
.course_category_tree .controls div {padding-right:2em;font-size:75%;}
.course_category_tree .category >.info {background-image:url([[pix:theme|hgradient]]);background-repeat: repeat-x;background-color:#e1e1df;border:1px solid #ddd;margin:3px 0;}
.course_category_tree.frontpage-category-names .category >.info {background:none;border:none;margin:0;}