RTL support

Topic: RTL support (Read 10581 times) previous topic - next topic

0 Members and 5 Guests are viewing this topic.

Re: RTL support

Reply #15 – March 09, 2017, 09:16:39 pm

Not really a performance problem given what it is, but replace the function grabJumpToContent(elem) with the below to clear it up.

Code: [Select]

/**
 * This function will retrieve the contents needed for the jump to boxes.
 *
 * @param {type} elem
 */
function grabJumpToContent(elem) {
	this.elem = elem;
	getXMLDocument(elk_prepareScriptUrl(elk_scripturl) + 'action=xmlhttp;sa=jumpto;xml', onJumpReceived);
}

/**
 * Callback function for loading the jumpto box
 *
 * @param {object} XMLDoc
 */
function onJumpReceived(oXMLDoc) {
	var aBoardsAndCategories = [],
		i,
		n,
		items = oXMLDoc.getElementsByTagName('elk')[0].getElementsByTagName('item');

	for (i = 0, n = items.length; i < n; i++)
	{
		aBoardsAndCategories[aBoardsAndCategories.length] = {
			id: parseInt(items[i].getAttribute('id')),
			isCategory: items[i].getAttribute('type') === 'category',
			name: items[i].firstChild.nodeValue.removeEntities(),
			is_current: false,
			childLevel: parseInt(items[i].getAttribute('childlevel'))
		};
	}

	for (i = 0, n = aJumpTo.length; i < n; i++)
		aJumpTo[i].fillSelect(aBoardsAndCategories);

	// Internet Explorer needs this to keep the box dropped down.
	this.elem.style.width = 'auto';
	this.elem.focus();
}

Re: RTL support

Reply #16 – March 10, 2017, 02:49:03 am

Ok, I may not have a full understanding of the problem yet as I haven't done any live testing, but I've been checking out the markup for the file upload stuff.

You can use a styled anchor for the fake button, but there's not much point. A span would do just as well, and would mean you don't have to include a redundant href. The anchor or span, and any text inside an anchor or a span, should automatically sort itself for RTL. If it doesn't, something has been bungled somewhere. For that matter you could even use a div or several other tags and get the same result. It mattereth not.

It should also be possible to put the input inside the span, with right and left positioning set to 0, or with max-width and min-width set to 100%, and overflow set to hidden. That way it should always cover the text no matter what language was being used, and shouldn't need any special treatment for RTL.

Regarding styling: if you're going for a normal buttony look there it might be an idea to add a hover style to match the others, and it might be an idea to use cursor: pointer; too. Just to make it consistent with other buttons and links in the interface.

ETA: Try this for a basic HTML test page. So far I've only tested it in Pale Moon, but it should work in all browsers AFAIK.

ETA2: Better version. Should be clearer.

Code: [Select]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test page</title>
		<style>
			body {
				background: #aaa;
			}
			#wrapper {
				max-width: 800px;
				margin: 4em auto;
				text-align: center;
			}
			span {
				position: relative;
				padding: 0 6px;
				border: 1px solid #444;
			}
			span:hover {
				color: blue;
				border: 1px solid blue;
			}
			input {
				position: absolute;
				left: 0;
				width: 100%;
				overflow: hidden;
				color: white;
				border: 1px solid red;
				cursor: pointer;
			}
			.invisible {
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h1>
				Testing nifty trix
			</h1>
			<h2>
				Long text testing, everything visible
			</h2>
			Add files by dragging & dropping or
			<span>
				selecting them by clicking here, mate!
				<input type="file">
			</span>
			<hr/>
			<h2>
				Long text testing, input hidden
			</h2>
			Add files by dragging & dropping or
			<span>
				selecting them by clicking here, mate!
				<input class="invisible" type="file">
			</span>
			<hr/>
			<h2>
				Short text testing, everything visible
			</h2>
			Add files by dragging & dropping or
			<span>
				click here
				<input type="file">
			</span>
			<hr/>
			<h2>
				Long text testing, input hidden
			</h2>
			Add files by dragging & dropping or
			<span>
				click here
				<input class="invisible" type="file">
			</span>
			<hr/>
		</div>
	</body>
</html>

Re: RTL support

Reply #17 – March 10, 2017, 09:48:08 am

@Spuds i did that and unfortunately nothing was changed as the drop down menu still stuck at one option, only current page and still getting warning on line 67
Posting this reply from my iPhone and here are a shoot

Edited by me to add another shoot for this page by Samsung/android device for comparison

Re: RTL support

Reply #18 – March 10, 2017, 10:22:34 am

@Antechinus ,I just translated into Arabic and switched wrapper direction to RTL , trying to create same environment as it would be.
please check again

Code: [Select]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>صفحة اختبار</title>
		<style>
			body {
				background: #aaa;
			}
			#wrapper {
				max-width: 800px;
				margin: 4em auto;
				text-align: center;
				direction: rtl;
			}
			span {
				position: relative;
				padding: 0 6px;
				border: 1px solid #444;
			}
			span:hover {
				color: blue;
				border: 1px solid blue;
			}
			input {
				position: absolute;
				left: 0;
				width: 100%;
				overflow: hidden;
				color: white;
				border: 1px solid red;
				cursor: pointer;
			}
			.invisible {
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h1>
      				Testing nifty trix - translated<br>wrapper direction set to rtl<br>
				اختبار نيفتي تريكس
			</h1>
			<h2>
				اختبار نص طويل ، كل شيئ ظاهر
			</h2>
			اضف ملف هنا بالسحب & الافلات أو
			<span>
				اختار ملف للرفع بالنقر هنا, اصاحبي!
				<input type="file">
			</span>
			<hr/>
			<h2>
				اختبار نص طويل, الادخال مخفي
			</h2>
			اضف ملف هنا بالسحب & الافلات أو
			<span>
				اختار ملف للرفع بالنقر هنا, اصاحبي!
				<input class="invisible" type="file">
			</span>
			<hr/>
			<h2>
				اختبار نص قصير ، كل شيئ ظاهر
			</h2>
			اضف ملف هنا بالسحب & الافلات أو
			<span>
				انقر هنا
				<input type="file">
			</span>
			<hr/>
			<h2>
				اختبار نص طويل, الادخال مخفي
			</h2>
			اضف ملف هنا بالسحب & الافلات أو
			<span>
				انقر هنا
				<input class="invisible" type="file">
			</span>
			<hr/>
		</div>
	</body>
</html>

Re: RTL support

Reply #19 – March 10, 2017, 10:47:53 am

Be sure to clear your browser cache on your iphone or it may not pick up the changes you made.

Re: RTL support

Reply #20 – March 10, 2017, 11:35:59 am

Quote from: sherif – March 10, 2017, 10:22:34 am@Antechinus ,I just translated into Arabic and switched wrapper direction to RTL , trying to create same environment as it would be.
please check again

Code: [Select]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>صفحة اختبار</title>
		<style>
			body {
				background: #aaa;
			}
			#wrapper {
				max-width: 800px;
				margin: 4em auto;
				text-align: center;
				direction: rtl;
			}
			span {
				position: relative;
				padding: 0 6px;
				border: 1px solid #444;
			}
			span:hover {
				color: blue;
				border: 1px solid blue;
			}
			input {
				position: absolute;
				left: 0;
				width: 100%;
				overflow: hidden;
				color: white;
				border: 1px solid red;
				cursor: pointer;
			}
			.invisible {
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h1>
      				Testing nifty trix - translated<br>wrapper direction set to rtl<br>
				اختبار نيفتي تريكس
			</h1>
			<h2>
				اختبار نص طويل ، كل شيئ ظاهر
			</h2>
			اضف ملف هنا بالسحب & الافلات أو
			<span>
				اختار ملف للرفع بالنقر هنا, اصاحبي!
				<input type="file">
			</span>
			<hr/>
			<h2>
				اختبار نص طويل, الادخال مخفي
			</h2>
			اضف ملف هنا بالسحب & الافلات أو
			<span>
				اختار ملف للرفع بالنقر هنا, اصاحبي!
				<input class="invisible" type="file">
			</span>
			<hr/>
			<h2>
				اختبار نص قصير ، كل شيئ ظاهر
			</h2>
			اضف ملف هنا بالسحب & الافلات أو
			<span>
				انقر هنا
				<input type="file">
			</span>
			<hr/>
			<h2>
				اختبار نص طويل, الادخال مخفي
			</h2>
			اضف ملف هنا بالسحب & الافلات أو
			<span>
				انقر هنا
				<input class="invisible" type="file">
			</span>
			<hr/>
		</div>
	</body>
</html>

Ok, I checked it. Fine in Pale Moon.

ETA: Just installed Slimjet. Both pages are fine in that too, so should be good to go in Chrome or Opera as well. Can't imagine that Edge would have problems with something this basic either, although I'm still on W7 so can't check it.

Re: RTL support

Reply #21 – March 10, 2017, 02:18:02 pm

Quote from: Spuds – March 10, 2017, 10:47:53 amBe sure to clear your browser cache on your iphone

Yes I already did that twice before checking so I can assure you that issue still exists and I noticed that its only 1 warning now as the other 2 disappeared

Re: RTL support

Reply #22 – March 10, 2017, 05:14:41 pm

Quote from: sherif – February 28, 2017, 01:37:35 pm2- In the mobile version using iPhone 5S, logging in as a member with moderation rights , then reviewing any post , here you will find the dark background is extended wide to the left because of the hidden moderation buttons css :
div#moderationbuttons.hide_30.hamburger_30_target.visible is shifted to the far left

Code: [Select]
/themes/default/css/index.css:4836 @screen and (max-width: 30em)

.hide_30.hamburger_30_target {
    left: -9999px;
    position: absolute;
}

Not sure why you'd need to offset anything that far on a screen that is 30em max.

Quote from: sherif – February 28, 2017, 01:37:35 pm3- The jump-to drop down menu contains only the current page , no other choices to jump to, so its not working

Question: why does Elk have the jump to? I remember there being some discussion about this ages ago. A lot of people never use the thing anyway. I have ever used it, either in SMF or Elk. It seems to be another one of those items that exists primarily to complicate development and clutter the interface. Oh, and bloat the javascript.

Antechinus remembers he should add hidey code to his userContent.css

Quote from: sherif – February 28, 2017, 01:37:35 pm4- there is no go-top/go-bottom button

5- no admin button

note: using screen rotation (portrait orientation) displays both buttons mentioned in 4 and 5 , so i suppose that both were skipped for smaller width , but i hope if there is an alternative for the up/bottom one

Adding the top/bottom button back should be easy. The tricky bit is arguing for days about who wants it, who doesn't, where it should go (everyone will disagree on this too) and what colour it should be.

Ditto admin button. But some admin pages are a pain on tiny screens. Others work quite well, or did last time I looked.

Re: RTL support

Reply #23 – March 10, 2017, 05:57:50 pm

Quote from: sherif – March 10, 2017, 02:18:02 pm
Quote from: Spuds – March 10, 2017, 10:47:53 amBe sure to clear your browser cache on your iphone

Yes I already did that twice before checking so I can assure you that issue still exists and I noticed that its only 1 warning now as the other 2 disappeared

Please attach your modified script.js so I can check it ... I also noticed some really old crud in the JS that sets that box .... like some old ie only checks from like prehistoric days.

QuoteIt seems to be another one of those items that exists primarily to complicate development and clutter the interface. Oh, and bloat the javascript.

Yup

Re: RTL support

Reply #24 – March 10, 2017, 06:03:38 pm

here it is

Re: RTL support

Reply #25 – March 10, 2017, 06:16:08 pm

Looks fine ... attached is a version where I removed some old checks in the event it was messing up with iOS.

I don't get any errors in my console interacting with the jump control, at least on desktop or android devices. I don't have any iOS devices to test with.

Re: RTL support

Reply #26 – March 10, 2017, 06:16:43 pm

Quote from: Spuds – March 10, 2017, 05:57:50 pmPlease attach your modified script.js so I can check it ... I also noticed some really old crud in the JS that sets that box .... like some old ie only checks from like prehistoric days.

You mean the good old days?

Re: RTL support

Reply #27 – March 10, 2017, 06:18:18 pm

LOL .. yes like IE 5.5 and the like

Re: RTL support

Reply #28 – March 11, 2017, 08:25:30 pm

Quote from: Spuds – March 10, 2017, 06:16:08 pmLooks fine ... attached is a version where I removed some old checks in the event it was messing up with iOS.

I don't get any errors in my console interacting with the jump control, at least on desktop or android devices. I don't have any iOS devices to test with.

I downloaded the attached file , cleared safari browser cache , loaded a post , touched the jump-to menu , but the result still the same
I downloaded chrome from apple store , repeated the process , still getting same result.
Let me explain what happens exactly , when i touch the jump-to menu , and as you can see in the previous attached shoot , the grey iOS scroll menu appears at bottom as usual , but with only one option which is non selectable , which is the current page.

Also when the jump-to menu get activated , it extend to a little bit larger size , but the theme get broken at the top where the mobile buttons appear , those buttons get shifted to the right and never get back to original location even after closing the jump-to menu, until i double touch somewhere , twice to get the normal look back.

Now , if touched the jump-to menu again , it will work normally showing all forums and allow choosing any of them, the top mobile buttons get shifted to the right and break the theme, but the menu functions normally .

thanks for bearing with me on this

Re: RTL support

Reply #29 – March 11, 2017, 10:51:35 pm

Quote from: Spuds – March 10, 2017, 05:57:50 pm
QuoteIt seems to be another one of those items that exists primarily to complicate development and clutter the interface. Oh, and bloat the javascript.
Yup

So why not just kill it, and save a lot of drama?