There's a couple of layouting/responsiveness issues in the OpenTTD website. #117

James103 · 2019-12-22T12:17:33Z

I ran openttd.org through Google Translate (https://translate.google.com/translate?source=osdd&sl=en&tl=es&u=openttd.org), and found the following layouting/responsiveness problems along the way:

(Green) If the total size of the buttons in the navigation bar is too large, then ALL buttons get pushed over to the line below. Suggested Fix: Reduce the spacing between buttons in the navigation bar, or if that doesn't fix it, properly expand the navigation bar to two lines upon button overflow.
(Red) On the links that say "Download OpenTTD", "Visit the manual", and "Visit the community", the title text/subtext seems to be handled with a long space instead of a proper line break. Expected: Insert a line break instead of a long space where it makes sense to do so, and separate the images from the text.
The padding on the bottom of the page is wrong, as shown in the second image from the top.

Todo:

Fix the padding in the main bar buttons.
Allow stretching or two-lining the main bar in case it's impossible to reduce the padding enough to fit in the original width.
Fix the OpenTTD logo for right-to-left languages.
Fix the "download OpenTTD", "visit the manual", and "visit the community" panel for other languages (make the subtext properly start on the line below the main text). (EDIT: Change: Rework banner image use more modern CSS, and replace all images #132 has fixed it for English, but breaks it in a different way when run through Google Translate, as shown in the 3rd image)
In right-to-left languages, move the screenshot panel to the left of the news window instead of keeping it in the same position.
In right-to-left languages, move the fade behind the "OpenTTD is a clone of Transport Tycoon Deluxe" such that the background image is on the right and fades to the same gray color but on the left.
Fix the paddings on the bottom of the main OpenTTD website.
Optional: In right-to-left languages, swap the locations of the "Download stable/testing/nightly" panel and the OpenTTD logo.

auge8472 · 2019-12-22T12:45:46Z

The layout of the OpenTTD-website is currently not responsive at all and there are several further issues. But yes, the layout-problems does exist. I can confirm your first point without further checks. I set a minimal font size of 14px in my browser, what breaks the navigation bar even with the original English item texts.

For a menu that is able to overflow the whole layout has to be reworked. That is, because many items are tied to background graphics with their fix sizes. That pieces must get untied one by one (i.e. by dividing the background graphics into several parts or replacing parts of the background graphics by background colours and so on) what is (IMHO) a 1000-parts-puzzle in itself.

James103 · 2019-12-28T21:23:18Z

I checked again the OpenTTD website on Google Translate, and the following points can be made:

In Chinese, the padding in the main buttons is increased to stretch them to fit the original width.
In French, the padding in the main buttons is decreased to fit the original width.
In Vietnamese, the padding in the main buttons is decreased even further to fit the original width.
(Note: 1 to 3 were just noting that the main bar has been fixed somewhat with Fix overflowing nav #122).
In other languages (besides English), the "download OpenTTD", "visit the manual", and "visit the community" are still broken the same as in the original image.
In Arabic and Hebrew, while the main bar buttons work, the screenshot window overlaps with the news text (it should be to the left of the news text), and the OpenTTD logo is broken.

auge8472 · 2019-12-29T20:23:26Z

My post is referring to the preceding posting of @James103.

Your points 1 to 3: You'll find further similar issues in further languages, even none of them is supported by the website. What you want to achieve with your listings?
Your point 4: until now noone made an attepmt to fix the issue.
Your point 5: Please provide a screenshot. I do not fully understand your description. In general it seems to be a right-to-left-scripting-issue.

James103 · 2019-12-30T02:11:39Z

Updated with an image about the right-to-left situation and a note that these were just the results from an earlier pull request.

LordAro · 2019-12-31T12:00:08Z

I've gone through the entire list of languages on google translate, the menu no longer overflows for any of them (though I am missing suitable fonts for a few)

4 should be fixed by #132

LordAro · 2020-02-09T13:46:50Z

In right-to-left languages, move the fade behind the "OpenTTD is a clone of Transport Tycoon Deluxe" such that the background image is on the right and fades to the same gray color but on the left.

As far as I can tell, there's no way to fix this. "to left" is a property of the linear-gradient that does the fade, and isn't altered by google translate or whatever else does the translation. Perhaps you should take that up with Google :)

auge8472 · 2020-02-10T09:54:23Z

As far as I can tell, there's no way to fix this. "to left" is a property of the linear-gradient that does the fade

For the records: FACK, but to be fair, if the site in itself would be delivered in a rtl-language, the solution would be simple.

provide informations about language and writing direction in the documents HTML-source (<html lang="ar" dir="rtl">)
use the value of the dir-attribute as part of a CSS-selector (i.e. html[dir="rtl"] #openttd-banner-left-7 { … }) to reverse the gradients direction.

edit: At that point the structure of the corresponding CSS-rules are debatable. For every of the (currently) possible screenshots a distinct block for setting the background image and the gradient exists. With own rules for rtl-languages we would double the amount of rulesets.

James103 · 2020-06-02T12:37:47Z

As for fixing the paddings on the bottom of the website (again, here's the current state):

The CSS code behind the footer of the website shows this:

#content-bottom-links {
    float: left;
    font-size: 11px;
    padding: 7px 5px 0px 5px;
}

#content-bottom-copyright {
    float: right;
    font-size: 11px;
    padding: 7px 5px 0px 5px;
}

If this is changed to:

#content-bottom-links {
    float: left;
    font-size: 11px;
-   padding: 7px 5px 0px 5px;
+   padding: 3px 5px 3px 5px;
}

#content-bottom-copyright {
    float: right;
    font-size: 11px;
-   padding: 7px 5px 0px 5px;
+   padding: 3px 5px 3px 5px;
}

it will look like this, which should be better than the original.

LordAro · 2020-06-02T12:52:51Z

Seems reasonable, feel free to PR it (a change like this should be easily done by the web interface, if you're opposed to making a checkout)

See OpenTTD#117

LordAro · 2021-01-19T17:10:07Z

Took another look at this. Seems like Google Translate has updated how they do things now, as it seems like elements are no longer swapping sides.

Happy to call this done?

James103 · 2021-01-19T17:11:49Z

Yes, we can call this resolved.

auge8472 mentioned this issue Jan 2, 2020

More or less complete rework of the page header #136

Merged

LordAro closed this as completed Feb 9, 2020

LordAro reopened this Feb 9, 2020

James103 added a commit to James103/website that referenced this issue Jun 2, 2020

Fix: paddings in website footer

d12943b

See OpenTTD#117

James103 mentioned this issue Jun 2, 2020

Fix: paddings in website footer #161

Merged

James103 closed this as completed Jan 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

There's a couple of layouting/responsiveness issues in the OpenTTD website. #117

There's a couple of layouting/responsiveness issues in the OpenTTD website. #117

James103 commented Dec 22, 2019 •

edited by 2TallTyler

auge8472 commented Dec 22, 2019

James103 commented Dec 28, 2019 •

edited

auge8472 commented Dec 29, 2019 •

edited

James103 commented Dec 30, 2019

LordAro commented Dec 31, 2019

LordAro commented Feb 9, 2020

auge8472 commented Feb 10, 2020 •

edited

James103 commented Jun 2, 2020

LordAro commented Jun 2, 2020

LordAro commented Jan 19, 2021

James103 commented Jan 19, 2021

There's a couple of layouting/responsiveness issues in the OpenTTD website. #117

There's a couple of layouting/responsiveness issues in the OpenTTD website. #117

Comments

James103 commented Dec 22, 2019 • edited by 2TallTyler

auge8472 commented Dec 22, 2019

James103 commented Dec 28, 2019 • edited

auge8472 commented Dec 29, 2019 • edited

James103 commented Dec 30, 2019

LordAro commented Dec 31, 2019

LordAro commented Feb 9, 2020

auge8472 commented Feb 10, 2020 • edited

James103 commented Jun 2, 2020

LordAro commented Jun 2, 2020

LordAro commented Jan 19, 2021

James103 commented Jan 19, 2021

James103 commented Dec 22, 2019 •

edited by 2TallTyler

James103 commented Dec 28, 2019 •

edited

auge8472 commented Dec 29, 2019 •

edited

auge8472 commented Feb 10, 2020 •

edited