Have an option to split the window vertically instead of horizontally

[nagisa]

In the world where 99.9% of the screens are already thread short (think 16:9, 21:9, 23:9, evenmore:9), vertical space is at super premium and yet the result screen is under a horizontal split.

Given the fact that on a standard 1080p monitor the 80 symbol delimiter is way off to the “left” from the centre, maybe it would be a great idea to use a vertical split instead as the old playground used to be?

[shepmaster]

The old playground actually also split horizontally, depending on how wide the window was. I never noticed because my resolution wasn't wide enough to trigger it, but other people brought it up. I do have a branch around here somewhere with a partial implementation.

[denis-golubev]

I'd like to help with this and have already managed to add a configuration option in the configuration dialog (or should this be a button in the main ui?). Based on this configuration the flex direction of the Editor- and Output-divs should be changed (currently a new div which contains both of them just collapses to zero height). I will create a pull request later today, but this is what I've done so far: denis-golubev@9ad1b46

Another question is the layout of the tabs of the output pane if the view is split vertically. I think they should still be in a row, when the output is shown, but in a column, when hidden.

[shepmaster]

@denis-golubev that's great!

a configuration option in the configuration dialog (or should this be a button in the main ui?)

A configuration option sounds perfect.

One thing that's been discussed elsewhere is actually having 3 states: "automatic", "horizontal", "vertical". The latter two map to what you have added, "automatic" would be closer to what the old playground did - adding a media query based on the size of the screen:

@media screen and (max-width: 1200px) { ... }

the layout of the tabs of the output pane if the view is split vertically

Hmm, I hadn't even thought about that! It does look a little weird, doesn't it?

I think that it would be OK to leave them as a horizontal row to start with. I'm sure the people clamoring for a side-by-side view would rather have it sooner rather than later. It's also possible that the styling for those tabs may or may not be easy to adjust for changing orientation... I vaguely remember there being some ugliness around that CSS.

---

One stylistic issue that my code had and you may want to look out for, is the lack of spacing between the side-by-side panes and extra spacing on the top:

[shepmaster]

@denis-golubev As a meta-question, how did you find the process of setting up the playground for local development? I'm not sure that many people have done it, so I'm on the lookout for feedback about improving those instructions.

[denis-golubev]

@shepmaster I just added the configurable split behaviour (automatic, vertical, horizontal) for now and will look into rotating the buttons tomorrow (the 'border' between the buttons is implemented as a border of the left or right button, if I remember correctly from my experiments earlier today).

About setting up the local development:
I just used the frontend development setup with yarn and yarn run watch, which worked perfectly. But it downloads about 150M of dependencies, which is quite a lot (is this just React+Redux or are there other dependencies?).

I tried setting up ui project using cd ui RUST_LOG=ui=debug \ PLAYGROUND_UI_ROOT=$PWD/frontend/build/ \ cargo run. But after successfully running, it resulted in error messages when trying to execute code in the local playground instance. I just looked at the README again and realized I forgot to build the containers 😆

[shepmaster]

Closed via #174

[shepmaster]

which worked perfectly

That's good to hear!

But it downloads about 150M of dependencies, which is quite a lot (is this just React+Redux or are there other dependencies?).

That's normal, I think. However, we have done a bit of work to get the deployed code size small-ish. It's at ~300K right now — and only 1K to reload the page.

I just looked at the README again and realized I forgot to build the containers 😆

Haha, that'll do it. FWIW, you can also just download the containers from docker hub, you just have to make sure to rename them to remove the namespace so the playground can see them. There's a script (compiler/fetch.sh) that does this.