diff --git a/wp-admin/css/wp-admin-rtl.css b/wp-admin/css/wp-admin-rtl.css index f0145a805c..c91da287d8 100644 --- a/wp-admin/css/wp-admin-rtl.css +++ b/wp-admin/css/wp-admin-rtl.css @@ -1030,7 +1030,7 @@ body.folded .revisions .loading-indicator { .revisions-tooltip { margin-left: 0; - margin-right: -70px; + margin-right: -69px; } .revisions-tooltip.flipped { @@ -1042,6 +1042,10 @@ body.folded .revisions .loading-indicator { margin-right: -75px; } +.ie8 .revisions-tooltip.flipped { + margin-left: -63px; +} + .revisions-tooltip-arrow { right: 0; margin-left: 0; @@ -1064,6 +1068,10 @@ body.folded .revisions .loading-indicator { left: 20px; } +.ie8 .revisions-tooltip-arrow > span { + right: 21px; +} + .revisions-tooltip img { float: right; margin: 2px 0 0 5px; diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index d3f33f4e1c..67da8424b0 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -3539,17 +3539,15 @@ td.plugin-title p { margin: 0 auto; height: 0.8em; top: 7px; - width: 100%; - padding: 0 15%; + width: 70%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .revisions-tickmarks > div { - position: relative; + position: absolute; height: 100%; - float: left; border-style: solid; border-width: 0 1px 0 0; -moz-box-sizing: border-box; @@ -3557,7 +3555,7 @@ td.plugin-title p { box-sizing: border-box; } -.revisions-tickmarks > div:last-child { +.revisions-tickmarks > div:first-child { border-width: 0; } @@ -3764,7 +3762,7 @@ table.diff .diff-addedline ins { position: absolute; bottom: 105px; margin-right: 0; - margin-left: -70px; + margin-left: -69px; z-index: 1; max-width: 350px; min-width: 130px; @@ -3824,11 +3822,15 @@ table.diff .diff-addedline ins { } .ie8 .revisions-tooltip-arrow > span { - left: 14px; + left: 15px; top: -25px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; } +.ie8 .revisions-tooltip.flipped .revisions-tooltip-arrow > span { + right: 25px; +} + .revisions-tooltip, .revisions-tooltip-arrow > span { border-width: 1px; diff --git a/wp-admin/js/revisions.js b/wp-admin/js/revisions.js index 1f08acac03..3bc5200d30 100644 --- a/wp-admin/js/revisions.js +++ b/wp-admin/js/revisions.js @@ -615,29 +615,33 @@ window.wp = window.wp || {}; // The tickmarks view revisions.view.Tickmarks = wp.Backbone.View.extend({ className: 'revisions-tickmarks', + direction: isRtl ? 'right' : 'left', initialize: function() { this.listenTo( this.model, 'change:revision', this.reportTickPosition ); }, reportTickPosition: function( model, revision ) { - var elWidth, offset, tick, index = this.model.revisions.indexOf( revision ); + var offset, thisOffset, parentOffset, tick, index = this.model.revisions.indexOf( revision ); + thisOffset = this.$el.allOffsets(); + parentOffset = this.$el.parent().allOffsets(); if ( index === this.model.revisions.length - 1 ) { // Last one - tick = this.$('div:nth-of-type(' + index + ')'); - offset = tick.allPositions(); - elWidth = tick.outerWidth(); - _.extend( offset, { - rightPlusWidth: offset.right, - leftPlusWidth: offset.left - }); + offset = { + rightPlusWidth: thisOffset.left - parentOffset.left + 1, + leftPlusWidth: thisOffset.right - parentOffset.right + 1 + }; } else { // Normal tick tick = this.$('div:nth-of-type(' + (index + 1) + ')'); offset = tick.allPositions(); _.extend( offset, { - leftPlusWidth: offset.left + tick.outerWidth() + 1, - rightPlusWidth: offset.right + tick.outerWidth() + 1 + left: offset.left + thisOffset.left - parentOffset.left, + right: offset.right + thisOffset.right - parentOffset.right + }); + _.extend( offset, { + leftPlusWidth: offset.left + tick.outerWidth(), + rightPlusWidth: offset.right + tick.outerWidth() }); } this.model.set({ offset: offset }); @@ -648,9 +652,8 @@ window.wp = window.wp || {}; tickCount = this.model.revisions.length - 1; tickWidth = 1 / tickCount; - _(tickCount).times( function(){ this.$el.append( '
' ); }, this ); - - this.$('div').css( 'width', ( 100 * tickWidth ) + '%' ); + _(tickCount).times( function( index ){ + this.$el.append( '
' ); }, this ); } });