WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 2 years ago

#16834 closed enhancement (fixed)

UI problem in Permalinks SubPanel (on RTL sites)

Reported by: ramiy Owned by: ramiy
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.1
Component: RTL Keywords: rtl-feedback has-patch 3.6-early
Focuses: Cc:

Description

hi,
i want to report a UI problem in RTL sites, on the Settings->Permalinks SubPanel.

See the Attached screenshots.

Attachments (11)

permalinks-ltr.png (7.9 KB) - added by ramiy 4 years ago.
The ltr Permalinks SubPanel
permalinks-rtl.png (8.0 KB) - added by ramiy 4 years ago.
The rtl Permalinks SubPanel
16834.patch (2.3 KB) - added by ramiy 4 years ago.
patch to fix the problem
permalinks-rtl-patch.png (7.7 KB) - added by ramiy 4 years ago.
rtl subpanel with the patch
16834-override.diff (2.0 KB) - added by yoavf 4 years ago.
16834.2.patch (1.4 KB) - added by ocean90 2 years ago.
16834.left-edge.patch (1.2 KB) - added by SergeyBiryukov 2 years ago.
16834.left-edge.png (58.3 KB) - added by SergeyBiryukov 2 years ago.
16834.3.patch (1.7 KB) - added by DrewAPicture 2 years ago.
Refresh + float fix
22463.4.patch (1.7 KB) - added by SergeyBiryukov 2 years ago.
16834.htaccess.png (29.1 KB) - added by SergeyBiryukov 2 years ago.

Download all attachments as: .zip

Change History (39)

@ramiy4 years ago

The ltr Permalinks SubPanel

@ramiy4 years ago

The rtl Permalinks SubPanel

comment:1 @ramiy4 years ago

All the links should be on the left, on LTR and RTL sites.

@ramiy4 years ago

patch to fix the problem

@ramiy4 years ago

rtl subpanel with the patch

comment:2 @ramiy4 years ago

  • Keywords has-patch added
  • Owner set to ramiy
  • Status changed from new to accepted

comment:3 @ocean904 years ago

  • Keywords 3.2-early added; needs-ui ui-feedback removed
  • Milestone changed from Awaiting Review to Future Release

comment:4 @ramiy4 years ago

i added

class="textleft"

but i think we need to add

style="direction:lrt;"

too.

comment:5 @yoavf4 years ago

  • Cc yoavf added

@yoavf4 years ago

comment:6 @yoavf4 years ago

@ramiy - I don't think this would work as the table will stretch to the far end.
https://skitch.com/yoavf/rai1h/wordpress

However, we should add some bid-overriding there so that the slashes are in the right place.
16834-override.diff does that.

comment:7 @ramiy4 years ago

can you add a screenshot for the bid-overriding patch?

comment:8 @ramiy4 years ago

  • Component changed from UI to RTL

comment:9 follow-up: @nacin3 years ago

Still an issue?

comment:10 in reply to: ↑ 9 @ramiy3 years ago

Replying to nacin:

Still an issue?

Yes.

comment:11 @SergeyBiryukov3 years ago

#19507 was marked as a duplicate.

comment:12 @ramiy2 years ago

Yoav, i tried to recreate this on WordPress350-Beta3, but it's not working.

Tried both direction: lrt; and unicode-bidi: override;.

Fixed this using:

.options-permalink-php code,
#permalink_structure {
	float:left;
}

(on wp-admin-rtl.css:1322)

Here is the result - http://i.imgur.com/cnmNa.png

@ocean902 years ago

comment:13 follow-up: @ocean902 years ago

@ramily:

Does attachment:16834.2.patch​ fix the issue for you?

http://f.cl.ly/items/021s2E3Z1m0V2u0w3T1s/Bildschirmfoto%202012-11-18%20um%2016.03.33.png

comment:14 in reply to: ↑ 13 @ramiy2 years ago

Replying to ocean90:

Does attachment:16834.2.patch​ fix the issue for you?

Yes, and here is the result
http://i.imgur.com/cnmNa.png

comment:15 @ocean902 years ago

Mhh, that doesn't look like my screenshot from my patch, are you sure you are using the right one? Which browser?

comment:16 @SergeyBiryukov2 years ago

16834.left-edge.patch is an attempt at left edge alignment, as in the original patch. Fixes table stretching mentioned in comment:6.

Screenshot: 16834.left-edge.png.

Perhaps unicode-bidi: embed should be applied to .code, code instead, along with direction: ltr:
http://core.trac.wordpress.org/browser/tags/3.4.2/wp-admin/css/wp-admin-rtl.dev.css#L60

comment:17 @SergeyBiryukov2 years ago

  • Keywords 3.6-early added; 3.2-early removed

comment:18 @ocean902 years ago

16834.left-edge.patch looks good too.

Last edited 2 years ago by ocean90 (previous) (diff)

comment:19 @SergeyBiryukov2 years ago

  • Milestone changed from Future Release to 3.6

comment:20 @mark-k2 years ago

-1 for left alignment. At least for me it looks very strange, like I need to stop scanning RTL and move my attention to the left side and find the point in which to start reading again and then adjust to scanning LTR. This is too much mental work.

Keeping alignment to the right like in the image in comment:13 is IMO the better solution. In that case you don't need to scan the whole length of the page to find where does the text starts again.

@DrewAPicture2 years ago

Refresh + float fix

comment:21 follow-ups: @DrewAPicture2 years ago

16834.3.patch refreshes 16834.left-edge.patch.

I also switched the float on #permalink-settings code, #permalink_structure to float right instead of left to achieve the desired look in 16834.left-edge.png. Otherwise, it looked like this: http://cl.ly/image/0c2b101L3V2n

comment:22 in reply to: ↑ 21 @mark-k2 years ago

Replying to DrewAPicture:

+1 to 16834.left-edge.png

comment:23 @ocean902 years ago

With 16834.3.patch it looks like http://cl.ly/Ojlz, which is IMO the best approach.

@mark-k
In comment:20 you give -1, in comment:22 +1, …?

comment:24 @mark-k2 years ago

lol, better compromise? going all the way to the left is bad IMO, too hard to read as you have to move your focus a long way on wide screens. having the URL aligned left in the middle of the screen in the same "view frame" is much better.

Right aligning all the way. esthetically just doesn't look very organized. Either of this two options is better then the current situation.

Thinking more of it, the problem with @DrewAPicture's patch is that there will be only limited space for long URLs. Not sure how big this problem is.

comment:25 @alex-ye2 years ago

1+ for http://cl.ly/Ojlz , It's easy to read and looks fine :)

comment:26 @ocean902 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 24283:

Improve the permalink settings UI for RTL.

props yoavf, SergeyBiryukov, DrewAPicture. fixes #16834.

@SergeyBiryukov2 years ago

comment:27 in reply to: ↑ 21 @SergeyBiryukov2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to DrewAPicture:

16834.3.patch refreshes 16834.left-edge.patch.

I also switched the float on #permalink-settings code, #permalink_structure to float right instead of left to achieve the desired look in 16834.left-edge.png. Otherwise, it looked like this: http://cl.ly/image/0c2b101L3V2n

Looks like it wasn't properly refreshed :)

In 16834.left-edge.patch, id="permalink-settings" is applied to the primary table (which would no longer be needed since [22931]). float: left was correct there.

In 16834.3.patch, id="permalink-settings" is applied to the secondary table, which doesn't have <code> tags, and its width is irrelevant. So the patch is actually a refresh of 16834.2.patch (comment:13), mixed with some pieces of 16834.left-edge.patch.

22463.4.patch removes the non-working pieces and also fixes the code suggested when .htaccess is not writable: 16834.htaccess.png.

Last edited 2 years ago by SergeyBiryukov (previous) (diff)

comment:28 @ocean902 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 24315:

Some more RTL improvements for permalink settings. props SergeyBiryukov. fixes #16834.

Note: See TracTickets for help on using tickets.