WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 11 months 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 3 years ago.
The ltr Permalinks SubPanel
permalinks-rtl.png (8.0 KB) - added by ramiy 3 years ago.
The rtl Permalinks SubPanel
16834.patch (2.3 KB) - added by ramiy 3 years ago.
patch to fix the problem
permalinks-rtl-patch.png (7.7 KB) - added by ramiy 3 years ago.
rtl subpanel with the patch
16834-override.diff (2.0 KB) - added by yoavf 3 years ago.
16834.2.patch (1.4 KB) - added by ocean90 17 months ago.
16834.left-edge.patch (1.2 KB) - added by SergeyBiryukov 17 months ago.
16834.left-edge.png (58.3 KB) - added by SergeyBiryukov 17 months ago.
16834.3.patch (1.7 KB) - added by DrewAPicture 12 months ago.
Refresh + float fix
22463.4.patch (1.7 KB) - added by SergeyBiryukov 11 months ago.
16834.htaccess.png (29.1 KB) - added by SergeyBiryukov 11 months ago.

Download all attachments as: .zip

Change History (39)

ramiy3 years ago

The ltr Permalinks SubPanel

ramiy3 years ago

The rtl Permalinks SubPanel

comment:1 ramiy3 years ago

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

ramiy3 years ago

patch to fix the problem

ramiy3 years ago

rtl subpanel with the patch

comment:2 ramiy3 years ago

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

comment:3 ocean903 years ago

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

comment:4 ramiy3 years ago

i added

class="textleft"

but i think we need to add

style="direction:lrt;"

too.

comment:5 yoavf3 years ago

  • Cc yoavf added

yoavf3 years ago

comment:6 yoavf3 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 ramiy3 years ago

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

comment:8 ramiy2 years ago

  • Component changed from UI to RTL

comment:9 follow-up: nacin19 months ago

Still an issue?

comment:10 in reply to: ↑ 9 ramiy19 months ago

Replying to nacin:

Still an issue?

Yes.

comment:11 SergeyBiryukov18 months ago

#19507 was marked as a duplicate.

comment:12 ramiy17 months 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

ocean9017 months ago

comment:13 follow-up: ocean9017 months 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 ramiy17 months 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 ocean9017 months 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 SergeyBiryukov17 months 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 SergeyBiryukov17 months ago

  • Keywords 3.6-early added; 3.2-early removed

comment:18 ocean9017 months ago

16834.left-edge.patch looks good too.

Last edited 11 months ago by ocean90 (previous) (diff)

comment:19 SergeyBiryukov16 months ago

  • Milestone changed from Future Release to 3.6

comment:20 mark-k16 months 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.

DrewAPicture12 months ago

Refresh + float fix

comment:21 follow-ups: DrewAPicture12 months 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-k12 months ago

Replying to DrewAPicture:

+1 to 16834.left-edge.png

comment:23 ocean9012 months 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-k12 months 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-ye11 months ago

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

comment:26 ocean9011 months 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.

SergeyBiryukov11 months ago

comment:27 in reply to: ↑ 21 SergeyBiryukov11 months 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 11 months ago by SergeyBiryukov (previous) (diff)

comment:28 ocean9011 months 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.