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

Jump to bottom

Simple change of layout #502

Merged
merged 4 commits into from Oct 21, 2020
Merged

Simple change of layout #502

merged 4 commits into from Oct 21, 2020

Conversation

mucinoab
Copy link
Contributor

@mucinoab mucinoab commented Jun 20, 2020 •
edited

draw_input_and_help_box moved to draw_user_block so the search and help bar is reduced and the main panel is adjusted to fill that space. The constraints of size of both functions were tweaked as well to better fit the new layout.

I feel this new layout does a better job at taking advantage of space as the strings we search are usually not that long and after some use of the client the help bar becomes more or less irrelevant.

Here some screenshots

Fullscreen in a 1080p monitor
Screenshot_full

Halfscreen in a 1080p monitor
Screenshot_half

Current layout for comparison
old

@mucinoab
Change of layout. Constraints of size in fn draw_input_and_help_box c…
be350d5 
…hanged from ".constraints([Constraint::Percentage(90), Constraint::Percentage(10)].as_ref())" to ".constraints([Constraint::Percentage(65), Constraint::Percentage(35)].as_ref())" to better suit the smaller space. fn draw_input_and_help_box moved to fn_draw_user_block
Rigellute
Rigellute reviewed Jun 29, 2020
View reviewed changes
Copy link
Owner

@Rigellute Rigellute left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great suggestion and thanks for opening this PR.

Would be awesome if this was responsive - so your new layout kicked in on larger screens and the previous layout for smaller screens?

@mucinoab
Copy link
Contributor Author

@Rigellute No, the new layout I propose will display always, no matter the size of the screen.

@Rigellute
Copy link
Owner

So sorry for the late response @mucinoab.

What I mean to say is that we should pick some breakpoint at which your new layout kicks in.

For example, we might say on larger screens (width = 800px) your new layout is active. And the old layout is active for smaller screens.

Hope this makes sense?

If you don't know what I mean, I could merge this in to a side branch and have a look myself?

@mucinoab
Copy link
Contributor Author

@Rigellute
I see what you mean, that seems a good idea. I am not very familiar with the tui crate but let me give it a go, if any trouble comes out I will let you know so you can go ahead with the branch.
Thanks, don't worry about the late response.

@mucinoab
Copy link
Contributor Author

@Rigellute I didn't find a nice way of doing the dynamic change, all my tries were mess, buggy or didn't work at all. :(
Could you give it a go? I think is a nice feature.

@OrangeFran
Add responsiveness to new layout change
dd33d03 
The new layout kicks in is the width is bigger than 150 (defined as SMALL_TERMINAL_WIDTH
@OrangeFran
Copy link
Contributor

OrangeFran commented Oct 17, 2020 •
edited

I added responsiveness and opened a pull request on the fork of @mucinoab . The point of change is defined in the src/ui/util.rs as SMALL_TERMINAL_WIDTH and is currently 150. I used app.size.width to check for the width of the terminal and changed the layouts accordingly.

Rigellute
Rigellute approved these changes Oct 21, 2020
View reviewed changes
Copy link
Owner

@Rigellute Rigellute left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent work @mucinoab @OrangeFran 👏

I just tested this and it looks great!

Thank you both 🙏

@Rigellute
Copy link
Owner

@all-contributors please add @mucinoab and @OrangeFran for code

@allcontributors allcontributors bot mentioned this pull request Oct 21, 2020
Merged
@allcontributors
Copy link
Contributor

@Rigellute

I've put up a pull request to add @mucinoab! 🎉

@Rigellute
Copy link
Owner

@all-contributors please add @OrangeFran for code

@allcontributors allcontributors bot mentioned this pull request Oct 21, 2020
Closed
@allcontributors
Copy link
Contributor

@Rigellute

I've put up a pull request to add @OrangeFran! 🎉

@Rigellute Rigellute merged commit 35950f1 into Rigellute:master Oct 21, 2020
@Rigellute
Copy link
Owner

@all-contributors please add @OrangeFran for code

@allcontributors allcontributors bot mentioned this pull request Oct 21, 2020
Merged
@allcontributors
Copy link
Contributor

@Rigellute

I've put up a pull request to add @OrangeFran! 🎉

lanej pushed a commit to lanej/spotify-tui that referenced this pull request Jul 13, 2021
@mucinoab @OrangeFran @lanej
Simple change of layout (Rigellute#502)
21d324d 
* Change of layout. Constraints of size in fn draw_input_and_help_box changed from ".constraints([Constraint::Percentage(90), Constraint::Percentage(10)].as_ref())" to ".constraints([Constraint::Percentage(65), Constraint::Percentage(35)].as_ref())" to better suit the smaller space. fn draw_input_and_help_box moved to fn_draw_user_block

* Add responsiveness to new layout change

The new layout kicks in is the width is bigger than 150 (defined as SMALL_TERMINAL_WIDTH

* Fix formatting.

Co-authored-by: Finn Hediger <finn.hediger@thurweb.ch>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Rigellute Rigellute Rigellute approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@mucinoab @Rigellute @OrangeFran