OpenRA / OpenRAWeb

The former source for the official OpenRA website.
http://www.openra.net
47 stars 34 forks source link

Add accordion widget for linux distros. #447

Closed ghost closed 5 years ago

ghost commented 5 years ago

This adds an accordion widget to the download page to manage the increasing number of community maintained Linux packages and is a prerequisite for #443. It uses JavaScript to toggle the height of the accordion panels, which are visible by default and are only collapsed when JavaScript is available.

Added a .codebox class and used it whenever code is presented to the visitor on the download page. I also fixed the indentation of the script block that I edited. body needs height: 100% so that it can expand to the bottom when opening a panel. The arrows are done with CSS pseudo selectors and use the ASCII code for the arrow sign in their content property. Added a modest transition effect that could be applied to the hover state of download links later, too.

Tested it in Chrome and Firefox. I'm unsure about the font size and weight of the button text and the description text on the right so happy about feedback.

pchote commented 5 years ago

The CSS is broken on Safari:

Screenshot 2019-04-15 at 21 29 47

Notice the ▲ next to the Linux penguin (this moves with the selected platform) as well as the much smaller label and symbol size.

ghost commented 5 years ago

Updated and set font-sizes on the elements explicitly which hopefully fixes the issues in Safari. Also fixed the arrow appearing on elements with .active class

ghost commented 5 years ago

Please take over if still interested in this.

pchote commented 5 years ago

See #453.