Ticket #24736: 24736.23.patch

wp-admin/css/wp-admin-rtl.css

@@ -1030 +1030 @@
 
 .revisions-tooltip {
         margin-left: 0;
-        margin-right: -70px;
+        margin-right: -69px;
 }
 
 .revisions-tooltip.flipped {

wp-admin/css/wp-admin.css

@@ -3539 +3539 @@
         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 +3555 @@
         box-sizing: border-box;
 }
 
-.revisions-tickmarks > div:last-child {
+.revisions-tickmarks > div:first-child {
         border-width: 0;
 }
 
@@ -3762 +3760 @@
 
 .revisions-tooltip {
         position: absolute;
-        bottom: 105px;
+        bottom: 106px;
         margin-right: 0;
-        margin-left: -70px;
+        margin-left: -69px;
         z-index: 1;
         max-width: 350px;
         min-width: 130px;

wp-admin/js/revisions.js

@@ -615 +615 @@
         // 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 +652 @@
                         tickCount = this.model.revisions.length - 1;
                         tickWidth = 1 / tickCount;
 
-                        _(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this );
-
-                        this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
+                        _(tickCount).times( function( index ){
+                                this.$el.append( '<div style="' + this.direction + ': ' + ( 100 * tickWidth * index ) + '%"></div>' ); }, this );
                 }
         });