Skip to content

Simple change of layout #502

Merged
Rigellute merged 4 commits into
Rigellute:masterfrom
mucinoab:master
Oct 21, 2020
Merged

Simple change of layout #502
Rigellute merged 4 commits into
Rigellute:masterfrom
mucinoab:master

Conversation

@mucinoab
Copy link
Copy Markdown
Contributor

@mucinoab mucinoab commented Jun 20, 2020 •
edited
Loading

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
Copy Markdown
Owner

@Rigellute Rigellute left a comment •
edited
Loading

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

mucinoab commented Jun 29, 2020

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

@Rigellute
Copy link
Copy Markdown
Owner

Rigellute commented Jul 22, 2020

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

mucinoab commented Jul 22, 2020

@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
Copy Markdown
Contributor Author

mucinoab commented Aug 10, 2020

@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
Copy Markdown
Contributor

OrangeFran commented Oct 17, 2020 •
edited
Loading

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
Copy Markdown
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
Copy Markdown
Owner

Rigellute commented Oct 21, 2020

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

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

allcontributors Bot commented Oct 21, 2020

@Rigellute

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

@Rigellute
Copy link
Copy Markdown
Owner

Rigellute commented Oct 21, 2020

@all-contributors please add @OrangeFran for code

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

allcontributors Bot commented Oct 21, 2020

@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
Copy Markdown
Owner

Rigellute commented Oct 21, 2020

@all-contributors please add @OrangeFran for code

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

allcontributors Bot commented Oct 21, 2020

@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>
nighi pushed a commit to nighi/spotify-tui that referenced this pull request Jul 11, 2025
@mucinoab @OrangeFran
Simple change of layout (Rigellute#502)
30d8213 
* 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.

3 participants

@mucinoab @Rigellute @OrangeFran