Consider Converting Dialog Layout from HTML Table Elements to CSS Flex Layout?

[jevenski]

At first, I noticed the issue of alignment between checkboxes and labels, when adding new torrents. See the screen recording below to find out the position of the label shifting a bit when checking and unchecking the checkbox. This seems to be working fine in other themes, but only in MaterialDesign theme.

Then I looked into the HTML codes of the "Add Torrent" dialog itself, and the "Settings" where there are a lot of checkboxes and labels. It turned out to be that the "Add Torrent" dialog was arranged using the HTML table elements, while the "User Interface" part of the "Settings" dialog was arranged using CSS flex layout. Checking and unchecking the checkboxes in that part wouldn't make any alignment shift.

Since the flex layout was first introduced over a decade ago to be a new layout system, and has now been supported by over 99% of installed desktop web browsers (source: Can I Use), I think it's time for ruTorrent to make the shift from the HTML table elements to the CSS flex layout system.

I've made a few changes myself, and it looks good for my own use. However, a discussion ought to be made before submitting such a pull request, since it requires quite a load of code changes.

[stickz]

Yes I agree. If you're willing to support it and address any issue reports, feel free to submit it to the develop branch.

We have done a lot of major code changes to ruTorrent to bring it up to date with this decade. I'm okay with doing more of them.

[jevenski]

Great. So here is one concern about plugin compatibility regarding the change.

Can I alter the HTML structure of the index page, so that elements are re-arranged properly? As for built-in plugins, we can adjust the code while we alter the HTML structure, but for some third-party plugins, the authors need to make the change accordingly, and the development on that plugin may have been stalled for quite some time.

[stickz]

Yes, feel free to break compatibility with 3rd party plugins. I will bump the version to 5.0 to signal a major API change and support 4.3 for longer.

[stickz]

Hello @jevenski, thanks for all your contributions to ruTorrent! You are driving the wheel here for mobile optimizations! I was wondering if you'd like to optimize any other dialogs such as the Save to... or the Edit Torrent... dialog, before I post ruTorrent version 5. There is no hurry, we can wait a couple more weeks if required to post this release. Or even make anther minor release afterwards.

[jevenski]

Yes, sure. That is already on my agenda.😉 I was occupied with the mobile optimization on the main content for the past few days. It's really fun but time consuming in the mean time. Now that the PR has been submitted, I'll come back to work on the rest of the dialogs.