Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
James103 opened this issue Dec 22, 2019 · 9 comments
Open

Comments

@James103
Copy link
Contributor

@James103 James103 commented Dec 22, 2019

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:

  1. (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.
  2. (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.
  3. The padding on the bottom of the page is wrong, as shown in the second image from the top.

image

image

image

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: #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
Copy link
Contributor

@auge8472 auge8472 commented Dec 22, 2019

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.

openttd.org menu

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
Copy link
Contributor Author

@James103 James103 commented Dec 28, 2019

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

  1. In Chinese, the padding in the main buttons is increased to stretch them to fit the original width.
  2. In French, the padding in the main buttons is decreased to fit the original width.
  3. 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 #122).
  4. 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.
  5. 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.
    image
@auge8472
Copy link
Contributor

@auge8472 auge8472 commented Dec 29, 2019

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
Copy link
Contributor Author

@James103 James103 commented Dec 30, 2019

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
Copy link
Member

@LordAro LordAro commented Dec 31, 2019

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
Copy link
Member

@LordAro LordAro commented Feb 9, 2020

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 :)

@LordAro LordAro closed this Feb 9, 2020
@LordAro LordAro reopened this Feb 9, 2020
@auge8472
Copy link
Contributor

@auge8472 auge8472 commented Feb 10, 2020

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.

  1. provide informations about language and writing direction in the documents HTML-source (<html lang="ar" dir="rtl">)
  2. 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
Copy link
Contributor Author

@James103 James103 commented Jun 2, 2020

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

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.
image

@LordAro
Copy link
Member

@LordAro LordAro commented Jun 2, 2020

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)

James103 added a commit to James103/website that referenced this issue Jun 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.