diff --git a/lib/scripts/page.js b/lib/scripts/page.js index b8e83cb0cd01c09d679b1fd4ab1d58b0f0ec7965..4ab0bf9b5d35827f5af45999b04c05e15aad2e54 100644 --- a/lib/scripts/page.js +++ b/lib/scripts/page.js @@ -22,24 +22,27 @@ dw_page = { jQuery('form.btn_secedit') .mouseover(function(){ var $tgt = jQuery(this).parent(), - nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2]; - - // Walk the DOM tree up (first previous siblings, then parents) - // until boundary element - while($tgt.length > 0 && !$tgt.hasClass('sectionedit' + nr)) { - // go down when the sectionedit begin marker is below $tgt - if ($tgt.find('.sectionedit' + nr).length > 0) { - $tgt = $tgt.children().last(); - } else { - // $.last gives the DOM-ordered last element: - // prev if present, else parent. - $tgt = $tgt.prev().add($tgt.parent()).last(); - } - $tgt.addClass('section_highlight'); + nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2], + $highlight = jQuery(), // holder for elements in the section to be highlighted + $highlightWrap = jQuery('<div class="section_highlight"></div>'); // section highlight wrapper + + // Walk the dom tree in reverse to find the sibling which is or contains the section edit marker + while($tgt.length > 0 && !($tgt.hasClass('sectionedit' + nr) || $tgt.find('.sectionedit' + nr).length)) { + $tgt = $tgt.prev(); + $highlight = $highlight.add($tgt); } + // insert the section highlight wrapper before the last element added to $highlight + $highlight.filter(':last').before($highlightWrap); + // and move the elements to be highlighted inside the section highlight wrapper + $highlight.detach().appendTo($highlightWrap); }) .mouseout(function(){ - jQuery('.section_highlight').removeClass('section_highlight'); + // find the section highlight wrapper... + var $highlightWrap = jQuery('.section_highlight'); + // ...move its children in front of it (as siblings)... + $highlightWrap.before($highlightWrap.children().detach()); + // ...and remove the section highlight wrapper + $highlightWrap.detach(); }); }, diff --git a/lib/tpl/dokuwiki/css/_edit.css b/lib/tpl/dokuwiki/css/_edit.css index e4182774e4156c4134ddc2a9857e1fa7af192ca0..bae69ad967acfbdcf363da6d02c42fc972a97e96 100644 --- a/lib/tpl/dokuwiki/css/_edit.css +++ b/lib/tpl/dokuwiki/css/_edit.css @@ -140,8 +140,10 @@ div.picker button.toolbutton { } /* style for section highlighting (only sections below headings) */ .dokuwiki div.section_highlight { - margin: -3em -1em -.01em -1em; /* negative side margin = side padding + side border */ - padding: 3em .5em .01em .5em; + margin-left: -1em; /* negative side margin = side padding + side border */ + margin-right: -1em; /* negative side margin = side padding + side border */ + padding-left: .5em; + padding-right: .5em; border: solid __background_alt__; border-width: 0 .5em; } diff --git a/lib/tpl/dokuwiki/css/design.css b/lib/tpl/dokuwiki/css/design.css index 501e0a613136a4dd365cedf8fbcab2c8e952e286..87610663d28b9ce8cf260d2d928af9fb47787f67 100644 --- a/lib/tpl/dokuwiki/css/design.css +++ b/lib/tpl/dokuwiki/css/design.css @@ -421,8 +421,10 @@ } .dokuwiki div.section_highlight { - margin: -3em -2em -.01em -2em; - padding: 3em 1em .01em 1em; + margin-left: -2em; + margin-right: -2em; + padding-left: 1em; + padding-right: 1em; border-width: 0 1em; } [dir=rtl] .dokuwiki div.section_highlight { diff --git a/lib/tpl/dokuwiki/css/mobile.css b/lib/tpl/dokuwiki/css/mobile.css index cc61ab06cf21fb8c61ed3cf448f01b3149d132f0..7f106b046e35da53ec453b9602dab3a81d668fb2 100644 --- a/lib/tpl/dokuwiki/css/mobile.css +++ b/lib/tpl/dokuwiki/css/mobile.css @@ -92,8 +92,10 @@ /* _edit */ .dokuwiki div.section_highlight { - margin: -3em -1em -.01em -1em; - padding: 3em .5em .01em .5em; + margin-left: -1em; + margin-right: -1em; + padding-left: .5em; + padding-right: .5em; border-width: 0 .5em; } .dokuwiki div.preview {