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

MDL-36296 block_navigation: consistency fixes

Browse source 
This change fixes a couple of consistency issues in the navigation block.
At the same time it fixes it the CSS for the navigation block as it had
really degraded over the last years.
Notable points about this change:

* Fixed icon display by wrapping content in a span allowing columns to
  be styled.
* Re-wrote the CSS entirely as it could be done much better.
* Fixed inconsistencies between the php and JS for rendering nodes.
This commit is contained in:
Sam Hemelryk 2014-11-28 09:15:44 +13:00 • committed by Sam Hemelryk
parent 4c27f52d91
commit 892e21aadd
6 changed files with 167 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

149
blocks/navigation/styles.css
View file

@ -1,66 +1,105 @@
/** General display rules **/
.block_navigation .block_tree {margin:5px;padding-left:0px;overflow:visible;}
.block_navigation .block_tree li {margin:3px;list-style: none;padding:0;}
.block_navigation .block_tree li.item_with_icon > p {position:relative; padding-left: 21px;}
.block_navigation .block_tree li.item_with_icon > p img,
.block_navigation .block_tree .type_activity > p.tree_item.active_tree_node img,
.block_navigation .block_tree li > p.hasicon img {vertical-align:middle;position:absolute;left:0;top:-1px;width:16px;height:16px;}
.block_navigation .block_tree li.item_with_icon.contains_branch > p img {left:16px;}
.block_navigation .block_tree .type_activity > p.branch.hasicon,
.block_navigation .block_tree .type_activity > p.emptybranch.hasicon,
.block_navigation .block_tree li.item_with_icon.contains_branch > .tree_item {padding-left:37px;}
.block_navigation .block_tree {
margin: 0;
list-style: none;
}
.block_navigation .block_tree li ul {padding-left:0;margin:0;}
.block_navigation .block_tree li.depth_2 ul {padding-left:16px;margin:0;}
.block_navigation .block_tree .type_activity > p.tree_item.branch.hasicon.active_tree_node,
.block_navigation .block_tree .tree_item {padding-left: 21px;margin:3px 0px;text-align:left;}
.block_navigation .block_tree .depth_1 > .tree_item.branch,
.block_navigation .block_tree .depth_1 > .tree_item.emptybranch {
padding-left: 0;
background-image: none;
}
.block_navigation .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: 0 0;background-repeat: no-repeat;}
.block_navigation .block_tree .tree_item.branch.navigation_node {background-image:none;padding-left:0;}
.block_navigation .block_tree .type_activity > .tree_item.emptybranch,
.block_navigation .block_tree .type_activity > .tree_item.branch {background-image:none;position:relative;}
.block_navigation .block_tree .type_activity > .tree_item.hasicon.emptybranch img,
.block_navigation .block_tree .type_activity > .tree_item.branch img {left: 16px;}
.block_navigation .block_tree .root_node.leaf {padding-left:0px;}
.block_navigation .block_tree .active_tree_node {font-weight:bold;}
.block_navigation .block_tree .depth_1.current_branch ul {font-weight:normal;}
.block_navigation .block_tree .tree_item {
margin: 3px 0;
background-position: 0 50%;
background-repeat: no-repeat;
}
.dock .block_navigation .tree_item {white-space: nowrap;}
.block_navigation .block_tree .tree_item.branch {
padding-left: 21px;
cursor: pointer;
background-image: url('[[pix:t/expanded]]');
}
.jsenabled .block_navigation .block_tree .tree_item.branch {cursor:pointer;}
.jsenabled .block_navigation .block_tree .tree_item.emptybranch {background-image: url([[pix:t/collapsed_empty]]);background-position: 0 0;background-repeat: no-repeat;}
.jsenabled .block_navigation .block_tree .collapsed ul {display: none;}
.jsenabled .block_navigation .block_tree .type_activity > .tree_item.branch {background-image: url([[pix:t/expanded]]);}
.jsenabled .block_navigation .block_tree .collapsed .tree_item.branch {background-image: url([[pix:t/collapsed]]);}
.jsenabled .block_navigation .block_tree .tree_item.branch.loadingbranch {background-image:url([[pix:i/loading_small]]);}
.block_navigation .block_tree .tree_item.emptybranch {
padding-left: 21px;
background-image: url('[[pix:t/collapsed_empty]]');
}
/** JavaScript state rules **/
.jsenabled .block_navigation.dock_on_load,
.block_navigation .block_tree_box .requiresjs {display:none;}
.jsenabled .block_navigation .block_tree_box .requiresjs {display:inline;}
.block_navigation .block_tree .tree_item.loadingbranch {
background-image: url('[[pix:i/loading_small]]');
}
/** Internet explorer specific rules **/
.ie6 .block_navigation .block_tree .tree_item {width:100%;}
.block_navigation .block_tree .tree_item img {
width: 16px;
height: 16px;
margin-top: 3px;
margin-right: 5px;
vertical-align: top;
}
/** Overide for RTL layout **/
.dir-rtl .block_navigation .block_tree li.depth_2 ul {padding-left: 0; padding-right: 16px;}
.dir-rtl .block_navigation .block_tree .type_activity > p.tree_item.branch.hasicon.active_tree_node,
.dir-rtl .block_navigation .block_tree .tree_item {padding-right: 21px;text-align:right;}
.block_navigation .block_tree .tree_item.active_tree_node {
font-weight: bold;
}
.dir-rtl .block_navigation .block_tree .tree_item.branch {background-position: center right;}
.block_navigation .block_tree .tree_item.hasicon {
white-space: nowrap;
}
.dir-rtl .block_navigation .block_tree,
.dir-rtl .block_navigation .block_tree li ul,
.dir-rtl .block_navigation .block_tree .navigation_node.tree_item.branch,
.dir-rtl .block_navigation .block_tree .root_node.leaf {padding-right:0;}
.block_navigation .block_tree .tree_item.hasicon .item-content-wrap {
display: inline-block;
white-space: normal;
}
.dir-rtl .block_navigation .block_tree li.item_with_icon > p img,
.dir-rtl .block_navigation .block_tree .type_activity > p.tree_item.active_tree_node img,
.dir-rtl .block_navigation .block_tree li > p.hasicon img {left:auto; right:0;}
.dir-rtl .block_navigation .block_tree li.item_with_icon.contains_branch > p img {left: auto; right:16px;}
.dir-rtl .block_navigation .block_tree .type_activity > p.branch.hasicon,
.dir-rtl .block_navigation .block_tree li.item_with_icon.contains_branch > .tree_item {padding-right:37px; padding-left: 0;}
.dir-rtl .block_navigation .block_tree .type_activity > .tree_item.branch img {right: 16px; left: auto;}
.block_navigation .block_tree ul {
margin: 0;
}
.jsenabled.dir-rtl .block_navigation .block_tree .tree_item.emptybranch {background-image: url([[pix:t/collapsed_empty_rtl]]);background-position: center right;}
.jsenabled.dir-rtl .block_navigation .block_tree .collapsed .tree_item.branch {background-image: url([[pix:t/collapsed_rtl]]);}
.block_navigation .block_tree ul ul {
margin: 0 0 0 16px;
list-style: none;
}
.jsenabled .block_navigation .block_tree li.collapsed ul {
display: none;
}
.jsenabled .block_navigation .block_tree li.collapsed .tree_item.branch {
background-image: url('[[pix:t/collapsed]]');
}
.jsenabled .block_navigation.dock_on_load {
display: none;
}
.dir-rtl .block_navigation .block_tree .depth_1 .tree_item {
padding-left: 0;
}
.dir-rtl .block_navigation .block_tree .tree_item {
background-position: 100% 50%;
}
.dir-rtl .block_navigation .block_tree .tree_item.branch {
padding-right: 21px;
padding-left: 0;
}
.dir-rtl .block_navigation .block_tree .tree_item.emptybranch {
padding-right: 21px;
padding-left: 0;
background-image: url('[[pix:t/collapsed_empty_rtl]]');
}
.dir-rtl .block_navigation .block_tree .tree_item img {
margin-right: 0;
margin-left: 5px;
}
.dir-rtl .block_navigation .block_tree ul {
margin: 0 16px 0 0;
}
.dir-rtl.jsenabled .block_navigation .block_tree .collapsed .tree_item.branch {
background-image: url('[[pix:t/collapsed_rtl]]');
}