Make code editor larger?


#1

Is there an existing way to make the code editor larger? It’s very tiny.


Bigger code editor
#2

i second this. my code editor is pretty useless. (in fact the ui itself is pretty useless. i have to delete all my code for the window to collapse up enough to see all the commands and such . if i have code in the editor it pushes the edge of the page up covering that whole area. Possible solution is to make that panel scrolling. But better management of screen real estate (responsive design) is preferred.


#3

Last week, there was a full screen button (for the editor, not everything). I can’t find it now. Must be a bug with it.


#4

This Pull Request was merged that introduced a full screen editor, but my editor doesn’t have those controls in the top right. Maybe the change was never deployed? Or maybe it was reverted?

There’s also another issue open about it:


#5

That is certainly a step in the right direction, but i’d prefer to see them do something about making the interface fluid to eliminate the wasted black space at the bottom of the screen. At least let us make full use of the whole screen. :slight_smile:

Also, a “true” fullscreen code editor would be nice. (that expands over the game window as well.) then when you hit run it shrinks back down so you can see the game.


#6

According to this screenshot, that’s possible with the code that was (supposedly) merged:

Agreed, that would be nice. As you can see from my gameplay screenshot (and yours), some content is being hidden by the dark section. I’m assuming the developers use high-res displays (e.g. retina) so aren’t affected by it.


#7

Oh sweet! that looks fantastic!


#8

The full screen editor button isn’t in because I think it was slightly buggy and because we wanted to keep the controls simple, but I could reintroduce it after the dungeon where you start getting more and more APIs. I also want to make sure the bottom right command list area doesn’t take up as much space when you have a ton of methods in there, maybe having it scroll or go below the rest of the UI or something.

You can follow the progress on this issue: https://github.com/codecombat/codecombat/issues/1777


#9

Thanks for the info, Nick.

I can see this being a difficult problem since you want to keep the methods as discoverable as possible and ideally visible without blocking input on the editor.

Your suggestions could work though. I would prefer just having that small area scrollable instead of the whole page, because then I call still see and use the code editor while looking at the docs.


#10

While the full screen editor button isn’t stable, how about collapsing the help? And since we’re at it, how about allowing us to scroll it? Both things should be pretty straight forward css.


#11

I think it’s going to be pretty tricky in CSS, actually, but you’re welcome to prove me wrong–I’d love to review a pull request! https://github.com/codecombat/codecombat/tree/master/app/styles/play/level/tome


#12

I’m on it.

For scrolling it was easy: http://www.w3schools.com/cssref/pr_pos_overflow.asp
<div class="properties" style="width: 500px; height: 230px; overflow: auto;">

As for animated collapsing, I will probably need to modify the HTML as well: http://cssdeck.com/labs/css-only-showhide

Hardest part will be making the pull request.


I’m amazed at how easy it was to get my dev env up and running. I did have an issue with npm, but nothing too hard or too relevant. I’m only really struggling needing a more complete sandbox to test stuff out.


Well, I realize you wanted it to have flexible height, but now I’m convinced the height is fixed and it’s only really varying due to other parameters, and not the canvas size. I’m not so sure why updateMaxHeight is so complex. Looks like there are a whole lot of things on that layout which could be fixed. Removing it certainly doesn’t affect the abilities being grouped by item nor the branching choices, I think. I trust this PR shall pass now! :slight_smile:


#13

hey, cant u change it to be 100% height? left side dont mind, but right side would be great to have a bigger console, without editing…
2 Monitor using, extreme amount of unused space…


#14

I couldn’t, dude. Life happened. Sorry.

I wish I could be spending more time on this and have it fixed by now, but I had to basically abandon it all to take care of some business.

Let just me tell you, there’s nothing simple on tweaking the code editor. Unfortunately. And one of my current businesses is precisely tweaking CSS/javascript on third parties.

However, if nobody handles this for long enough, I might be able to get back later on this year. Lets hope. :stuck_out_tongue_winking_eye:


#15

I fixed it! Well, there’s one bug left, but it should use all the height when needed, by the way. (And it wasn’t simple at all.)


#16

Awesome! :slight_smile:

I’d love to hear more details on how you’ve done it!

Both related issues I could quickly glimpse at are still open and looking at your latest commits also didn’t help me. :frowning:


#17

It’s this commit: https://github.com/codecombat/codecombat/commit/7dff105cdf73bc5173376450be73cfe910734da1 – I did a lot of funky styling and scripting to make it more clever about where and when to take up space, and I let it scroll down past the previous bottom of the interface.

Also I just closed #1777.