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

New sidebar min-width leaves a lot of dead screen space #2742

Open
4 tasks done
GrumpyBear57 opened this issue Oct 15, 2024 · 9 comments
Open
4 tasks done

New sidebar min-width leaves a lot of dead screen space #2742

GrumpyBear57 opened this issue Oct 15, 2024 · 9 comments

Comments

@GrumpyBear57
Copy link

Please complete the following tasks.

  • Web browser cache cleared
  • Link provided to install script if applicable
  • Not using broken rtinst install script
  • Web browser, ruTorrent, PHP and OS version provided

Tell us about your environment

Browser: Firefox 131.0 (tested in private mode to ensure no cache/extension conflicts)
ruTorrent: git tag v5.1-beta2
PHP: 7.4.3-4ubuntu2.24
OS: Ubuntu 20.04.6 LTS

Tell us how you installed ruTorrent

git checkout v5.1-beta2

Describe the bug

After updating to v5 beta (and now subsequently v5.1B2, which fixed a couple of my other nitpicks 👍), I noticed that the sidebar (using the DarkBetter theme, if that matters) on the left takes up a ton of extra room now, with no way to decrease the width after a certain point.

Steps to reproduce

No response

Expected behavior

I'd like to be able to shrink the sidebar as much as possible (in v4 I shrunk it so that there was no empty space after the state labels -- see screenshot below), so that I waste less of my screen real estate, allowing me to see more of the many columns of information that ruTorrent can display in the main table :)

Additional context

For example, here's what it looks like with the sidebar as narrow as possible in v5.1B2 on a 1080p display:
image
vs the sidebar as narrow as possible in v4.2.11 (same 1080p display):
image
As you can see, in v5, the sidebar extends out to around where the settings button is, whereas in v4, it only just went past the start button.

@stickz
Copy link
Collaborator

stickz commented Oct 16, 2024

Thanks for testing the Beta release! @GrumpyBear57

Could you let us know what you think about the font visibility on the DarkBetter theme as well?

I'd like to add something to our roadmap before v5.1 is marked as stable this address this feedback!

@jevenski
Copy link
Contributor

There are two options for the main window layout in the general UI settings. We can set the minimum width of the side panel (which defaults to 280px), and the minimum height of the torrent list (which defaults to 300px). The values can be set to any proper value for users' own preference, or left blank to lift the limitation.

20241016102412

@GrumpyBear57
Copy link
Author

Could you let us know what you think about the font visibility on the DarkBetter theme as well?

Sure, the first thing that immediately comes to mind is the contrast between the text and background on the sidebar. I can also do some more poking around the other parts of the UI tomorrow probably (hopefully). If you'd like, I can open a new issue with any findings, or continue to add them here.


There are two options for the main window layout in the general UI settings. We can set the minimum width of the side panel (which defaults to 280px), and the minimum height of the torrent list (which defaults to 300px). The values can be set to any proper value for users' own preference, or left blank to lift the limitation.

I'll admit that I didn't notice there's a new setting in there, though I'm a bit confused as to why this setting needs to exist. Seems to me like it can be simplified to remove the min-width entirely (or at least, within reason, I have no idea if having no minimum would break the drag bar to resize it again, though the bottom panel seems to be fine), since putting it behind an option seems to just add an unnecessary step a user must take in order to get their desired width. At the very least, I think 280px isn't the most sane default for the option, due to how much space is wasted when set to that. I think whatever the previous minimum was should still be fine going forward, as it prevented you from shrinking the sidebar so much that the text (at least in the default English locale) didn't get truncated, while still allowing for dead space to be eliminated in favour of displaying more torrent information in the main grid.

That being said, now that I know there's an option I'm not so fussed about having any changes be made, since I know I can now change it, but I obviously can't speak for the many other existing users of ruTorrent who may or may not notice there's an option.


On another note:

Checking out the 'List table min height' option got me thinking, in software I've worked on previously, we tried to make tables heights display in steps equal to the number of pixels each row is comprised of. For example, if each row is 10px tall, the table height can only be set in increments of 10px, which prevents partial rows from being displayed, like in this example where the row is only half displayed:
image
I don't think this would be something easy to implement into ruTorrent due to the dynamic nature of the table, but I also very much don't know this codebase and frontend dev is not my forte (as evident by the fact that I tried to fix the min-width and couldn't figure out where it was being set 😄), so maybe it is easy to implement and could be considered.

@stickz
Copy link
Collaborator

stickz commented Oct 16, 2024

Could you let us know what you think about the font visibility on the DarkBetter theme as well?

Sure, the first thing that immediately comes to mind is the contrast between the text and background on the sidebar. I can also do some more poking around the other parts of the UI tomorrow probably (hopefully). If you'd like, I can open a new issue with any findings, or continue to add them here.

You can add everything here.

There are two options for the main window layout in the general UI settings. We can set the minimum width of the side panel (which defaults to 280px), and the minimum height of the torrent list (which defaults to 300px). The values can be set to any proper value for users' own preference, or left blank to lift the limitation.

At the very least, I think 280px isn't the most sane default for the option, due to how much space is wasted when set to that.

I will lower the default minimum side panel width to 200px tomorrow. I just need to test to ensure it's a smooth fit.

On another note:

Checking out the 'List table min height' option got me thinking, in software I've worked on previously, we tried to make tables heights display in steps equal to the number of pixels each row is comprised of. For example, if each row is 10px tall, the table height can only be set in increments of 10px, which prevents partial rows from being displayed, like in this example where the row is only half displayed: image I don't think this would be something easy to implement into ruTorrent due to the dynamic nature of the table, but I also very much don't know this codebase and frontend dev is not my forte (as evident by the fact that I tried to fix the min-width and couldn't figure out where it was being set 😄), so maybe it is easy to implement and could be considered.

This is a really easy fix. @jevenski what do you think about a dropdown menu, with sane values for the table min height?

@jevenski
Copy link
Contributor

A dropdown menu may cause conflicts with drag'n'drop resizing. I'd say we can set the table height to the nearest multiple of the line height on resizing. I think this feature is more in need when using keyboard navigation, when you press the arrow down key all the way down and the table begins to scroll, you'll want a next row to show up in full instead of in half. For mouse navigation, one can scroll the mouse button easily and move the last rows into the center of the table area. If a row is at the end of the table area and not displayed in full, it's probably not the one on concern at the moment. Otherwise just scroll the mouse or drag the scrollbar to move it into the center of the table area. That's an area more confortable to read.

@stickz
Copy link
Collaborator

stickz commented Oct 16, 2024

I'd say we can set the table height to the nearest multiple of the line height on resizing.

Sounds good, let's do it!

@GrumpyBear57
Copy link
Author

OK sorry for the delay, I've gone through a bunch of screens and really the only issue I have with the fonts is contrast in some places, as well as size in general (I basically always keep ruTorrent zoomed to 120% so I can actually read it, whether on a 4K display (either 125% to 175% scaling, depending on if I load it on just on my desktop, or a computer connected to my TV), or on a standard 1080p desktop display).

Contrast could be improved in:

  • Main sidebar status/label/tracker/etc names (actually maybe this is just anything marked as a link/clickable, ie in the About window and the Comment field of the bottom details panel)
  • Rule list in RSS Rules Manager window
  • MediaInfo Console text field

I also found an interesting bug with labels (which is not present in my v4.2.11 install, but it is present on my v4.3.5 one, so I'm not sure when it was introduced), where if you put a / character in the label name, it will break the list in the sidebar:
image
image

@jevenski
Copy link
Contributor

I'd say we can set the table height to the nearest multiple of the line height on resizing.

Sounds good, let's do it!

To be honest, I don't think this feature is worth the effort. This will add complex calculation to the resize function, and increase the likelihood to break. Besides, different browsers have different behaviors regarding scrollbars. Firefox has floating scrollbars that don't take up the space of an HTML block, while Chrome has fixed scrollbars that take up the space of an HTML block. So what works fine on Firefox will not work as expected on Chrome, because the bottom scrollbar will cover the last row and make it half-shown. We'll have to cover every possible browser if we want this feature to actually work, which is going to further add to the complexity of the resize function. In my opinion, if one wants to look at the half-shown row at the bottom, one just scroll the mouse or drag the touchscreen to bring it to the center of the screen. If one doesn't want to look at the half-shown row, one won't care whether it's shown in half or in full.

@stickz
Copy link
Collaborator

stickz commented Oct 22, 2024

I'd say we can set the table height to the nearest multiple of the line height on resizing.

Sounds good, let's do it!

To be honest, I don't think this feature is worth the effort. This will add complex calculation to the resize function, and increase the likelihood to break. Besides, different browsers have different behaviors regarding scrollbars. Firefox has floating scrollbars that don't take up the space of an HTML block, while Chrome has fixed scrollbars that take up the space of an HTML block. So what works fine on Firefox will not work as expected on Chrome, because the bottom scrollbar will cover the last row and make it half-shown. We'll have to cover every possible browser if we want this feature to actually work, which is going to further add to the complexity of the resize function. In my opinion, if one wants to look at the half-shown row at the bottom, one just scroll the mouse or drag the touchscreen to bring it to the center of the screen. If one doesn't want to look at the half-shown row, one won't care whether it's shown in half or in full.

Okay, let's not implement this feature! Maybe can address the contrast issues with the font visibility though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants