Feature/UI layout update

[dhvcc]

Hi, this is a fix/enhancment of #29

My changes are:

• Media queries
• Painted repl input so it's noticeable
• Moved toolbar to navbar to save space

A screenshot of 1920x937 inner height window

[romanvm]

Thank you for your contribution. I'll check the PR and update accordingly.

[romanvm]

Movind the toolbar to the navbar area is a sound idea but media queries don't do a good job of dynamically adjusting the UI while the browser window is being resized. I'll post videos later if needed.

[dhvcc]

@romanvm I agree that media queries are not the best way of dealing with this stuff. I just added them for a couple of most used cases. I'm ok with removing them

[dhvcc]

Hey, any updates on your decision? Thanks!

[romanvm]

Sorry, I had no time to re-test this one because of the real life stuff. I'll try to do this as soon as I can.

[dhvcc]

No worries mate, just wanted to check this out is not abandoned. This is not urgent, take care and be safe

[romanvm]

I've finally found some time to work on this project. Could you merge the current master into this and resolve possible conflicts?

[dhvcc]

Hi @romanvm 👋
I've updated the PR

[dhvcc]

Seems like there's an issue with builds on master

[romanvm]

I have fixed GH pipelines on master. Please merge again.

[dhvcc]

Not sure if you've seen it, but I pushed new commits, you can start a workflow, @romanvm 👍

[romanvm]

I've tested your PR again. The idea to move the button bar to the top is a good one. But media queries do terrible job of adjusting the debugger UI to the browser's viewport compared to my initial solution. So I'm afraid I cannot accept this PR as it is now. I see 2 options:

a) you leave only the part about the button bar and restore the initial method of resizing the debugger UI;

b) you improve your resizing method (if it's possible).

I admit that my frontend skills are limited and my solution for auto-resizing the debugger UI may not be an optimal one but it does the job.

[dhvcc]

@romanvm Hi, I agree that media queries are terrible, guess I just wanted to do a quick hack. Let me see if I can come up with something better than this.

[dhvcc]

@romanvm quickly hacked a new layout using css grid, heres the showcase. It may still not work idealy on really smal screens where title wraps into 2 lines. This is not the issue of this PR, but of the the way it's coded. I might revisit this and fix this one also. Don't close this PR so I can push here. But yeah, may be give this update a review and some feedback

[dhvcc]

@romanvm had to use this lib again so just bumping this issue in case you have time in near future, no rush

[romanvm]

Thanks. I'll check it as soon as I can considering all the circumstances.

[dhvcc]

Hi, revisiting this stale PR. Do I need to sync the new branch to be reviewed?

[romanvm]

Hi. No need to do anything at the moment. I was busy with my life matters for quite a while but hopefully I will be able to address pending PRs soon.

[dhvcc]

Hi. No need to do anything at the moment. I was busy with my life matters for quite a while but hopefully I will be able to address pending PRs soon.

Sure, no pressure, be safe and well, was just wondering around my PRs

[romanvm]

Now the UI is totally broken: it's bigger than browser's viewport with horisontal and vertical scrollbars. And this is on 1920x1080 monitor resolution. The horizontal sizing is especially bad: if a variable is a collection with many members then the UI is stretched very wide.

I'm afraid I have to respectfully decline this PR. My time for maintaining this project is limited so I want to focus only on maintaining compatibility with current Python version and fixing bugs if any found, so I'd rather not to introduce additional complexity.

[dhvcc]

Ok sure, I'll fix it in my fork and leave it there 👋