Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
MDL-38923 theme_bootstrapbase: pre-integration fixups
* Fixed the way we added the block class to the dock panel in dock.js
* Added a class to the h2 that is used to test dock title width
* Fixed RTL alignment issues as best I could at present
* Fixed overlap of dock + navbar on small screens
* Fixed the docked block width to be constrained to the available space
* Fixed hidden actions on docked blocks

Conflicts:
	theme/bootstrapbase/style/moodle.css
  • Loading branch information
Sam Hemelryk committed May 19, 2014
1 parent 0720ecb commit e6e58c7
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 38 deletions.
2 changes: 1 addition & 1 deletion lib/yui/build/moodle-core-dock/moodle-core-dock-debug.js
Expand Up @@ -193,7 +193,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
}

// We need to fix a font-size - sorry theme designers.
test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
BODY.insert(test, 0);
width = test.one('span').get('offsetWidth') * 1.2;
height = test.one('span').get('offsetHeight');
Expand Down
8 changes: 4 additions & 4 deletions lib/yui/build/moodle-core-dock/moodle-core-dock-min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/yui/build/moodle-core-dock/moodle-core-dock.js
Expand Up @@ -192,7 +192,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
}

// We need to fix a font-size - sorry theme designers.
test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
BODY.insert(test, 0);
width = test.one('span').get('offsetWidth') * 1.2;
height = test.one('span').get('offsetHeight');
Expand Down
2 changes: 1 addition & 1 deletion lib/yui/src/dock/js/dock.js
Expand Up @@ -191,7 +191,7 @@ M.core.dock.fixTitleOrientation = function(title, text) {
}

// We need to fix a font-size - sorry theme designers.
test = Y.Node.create('<h2><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
test = Y.Node.create('<h2 class="transform-test-heading"><span class="transform-test-node" style="font-size:'+fontsize+';">'+text+'</span></h2>');
BODY.insert(test, 0);
width = test.one('span').get('offsetWidth') * 1.2;
height = test.one('span').get('offsetHeight');
Expand Down
53 changes: 50 additions & 3 deletions theme/bootstrapbase/javascript/dock.js
@@ -1,10 +1,57 @@
/**
* Customise the dock for this theme.
*
* Tasks we do within this function:
* - Add 'block' as a class to the dock panel so that its items are styled the same as they are when being displayed
* in page as blocks.
* - Constrain the width of the docked block to the window width using a responsible max-width.
* - Handle the opening/closing of the Bootstrap collapsible navbar on small screens.
*/
function customise_dock_for_theme() {
function customise_dock_for_theme(dock) {
// Add the "block" class to docked blocks.
// This prevents having to restyle all docked blocks and simply use standard block styling.
M.core_dock.on('dock:panelgenerated', function(){
Y.all('.dockeditempanel_content').addClass('block');
// First we wait until the panel has been generated.
dock.on('dock:panelgenerated', function() {
// Then we wait until the panel it is being shown for the first time.
dock.get('panel').once('dockpanel:beforeshow', function() {
// Finally we add the block class.
Y.all('.dockeditempanel_content').addClass('block');
});
dock.get('panel').on('dockpanel:beforeshow', function() {
var content = Y.all('.dockeditempanel_content');
// Finally set a responsible max width.
content.setStyle('maxWidth', content.get('winWidth') - dock.get('dockNode').get('offsetWidth') - 10);
});
});

// Handle the opening/closing of the bootstrap collapsible navbar on small screens.
// This is a complex little bit of JS because we need to simulate Bootstrap actions in order to measure height changes
// in the dom and apply them as spacing to the dock.
dock.on('dock:initialised', function() {
var navbar = Y.one('header.navbar'),
navbarbtn = Y.one('header.navbar .btn-navbar'),
navcollapse = Y.one('header.navbar .nav-collapse'),
container = Y.one('#dock .dockeditem_container'),
margintop = null,
newmargintop = null,
diff = null;
if (navbar && navbarbtn && container) {
margintop = parseInt(container.getStyle('marginTop').replace(/px$/, ''), 10);
diff = margintop - parseInt(navbar.get('offsetHeight'), 10);
navbarbtn.ancestor().on('click', function() {
// We need to fake the collapsible region being active, this JS *ALWAYS* executes before the bootstrap JS.
navcollapse.toggleClass('active');
if (!this.hasClass('active')) {
newmargintop = (parseInt(navbar.get('offsetHeight'), 10) + diff);
container.setStyle('marginTop', newmargintop + 'px');
} else {
container.setStyle('marginTop', margintop + 'px');
}
// Undo the simulation.
navcollapse.toggleClass('active');
// Tell the dock things have changed so that it automatically resizes things.
dock.fire('dock:itemschanged');
}, navbarbtn);
}
});
}
33 changes: 9 additions & 24 deletions theme/bootstrapbase/less/moodle/dock.less
@@ -1,19 +1,20 @@
@dockWidth: 36px;
@dockTitleMargin: 3px;
@dockPanelWidth: (768px / 2);
@dockTitleFontSize: 11px;

/**
* This styles the H2 node the dock creates to test the width before making its title rotation.
* We need to apply these EXACT styles to the #dock .dockedtitle h2 to be sure things are spaced correctly.
*/
.transform-test-node {
.transform-test-heading {
font-family: @sansFontFamily;
font-size: 1.2em;
font-size: @dockTitleFontSize;
line-height: @dockWidth;
text-align: center;
font-weight: bold;
margin:0;
padding:0;
margin: 0;
padding: 0;
}

body.has_dock {
Expand Down Expand Up @@ -51,7 +52,7 @@ body.has_dock {
padding:0;
cursor: pointer;
h2 {
.transform-test-node;
.transform-test-heading;
}
.filterrotate {
margin-left: 8px;
Expand Down Expand Up @@ -119,13 +120,6 @@ body.has_dock {
cursor: pointer;
}
}
a.editing_move,
a.editing_edit,
a.editing_roles,
a.editing_delete,
a.editing_hide {
display: none;
}
}
}

Expand All @@ -138,25 +132,16 @@ body.has_dock {
left: auto;
right: 0%;
.dockedtitle {
border-bottom: 1px solid darken(@grayLighter, 10%);
border-top: 1px solid @grayLighter;
cursor: pointer;
h2 {
line-height: @dockWidth - @dockTitleFontSize;
}
}
}
#dockeditempanel {
right: 100%;
.dockeditempanel_hd {
h2 {
padding: 10px;
margin: 0;
border-bottom: 1px solid @white;
}
.commands {
float: left;
right: auto;
left: 0px;
text-align: left;
top: 6px;
}
}
}
Expand Down
9 changes: 6 additions & 3 deletions theme/bootstrapbase/less/moodle/responsive.less
Expand Up @@ -162,7 +162,8 @@
.fluid-span (@columns) {
.fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
}
.empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#region-main.span8 {
/** increase the span size by 1 **/
.fluid-span(9);
Expand Down Expand Up @@ -199,7 +200,8 @@
.fluid-span (@columns) {
.fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
}
.empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#region-main.span8 {
/** increase the span size by 1 **/
.fluid-span(9);
Expand Down Expand Up @@ -503,7 +505,8 @@
// cases when we have content in the side-pre blockregion but not in the
// side-post blockregion as there are more specific selectors in
// core.less which take precedence which break responsiveness.
.empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#block-region-side-pre.span4,
#region-main.span8 {
.fluid-span(12);
Expand Down
2 changes: 1 addition & 1 deletion theme/bootstrapbase/style/moodle.css

Large diffs are not rendered by default.

0 comments on commit e6e58c7

Please sign in to comment.