Improve Mobile Support

[iansinnott]

• Extract the monaco code editor into a separate component
• Create a typescript interface (ICodeEditor) which will be used to standardize the code editing lib. Monaco and CodeMirror will both adhere to this interface while the implementations details can be lib specific.
• Add new workspace tests, specifically for support functions like theme/font-size/formatting/etc. Want more tests since I'm adding another code editor lib

[iansinnott]

This is still a WIP but I want the tests to run, so it's no longer a "draft"

[bonham000]

@iansinnott everything works on my phone with Chrome. It's still hard to navigate around the workspace but the code-mirror editor works perfectly fine, as far as I can tell. And I can solve challenges, which means the rest of the functionality works. 👍

By the way, I think draft PRs will still run status checks, they don't have to be marked ready for review.

[iansinnott]

Awesome, thanks for checking.

I'm not sure what was happening earlier but the tests weren't running. the branch sat here for hours without any actions getting run. either that or I totally missed it, but I'm pretty used to the process now.

Anyway, i also thought it would run draft PRs. maybe something else happened here

[bonham000]

Mobile experience on my phone is AWESOME 💯

• Highly usable.
• I can solve all the challenge types: HTML/CSS, TS, async, React.
• Pretty intuitive to see how to use it.
• Feels designed more for mobile.
• code-mirror looks and feels great.
• UI adjusts when focusing the code editor.
• All the features work.
• Very consistent with the desktop experience.
• Overall ⭐ ⭐ ⭐ ⭐ ⭐

There are a few minor UI/UX issues, which can be easily addressed later:

• Nav menu, as mentioned elsewhere.
• Some layout issues for the "Next Challenge" box at the bottom.
• Sometimes the editor controls get in the way of interacting with the editor.
• Scrolling the editor panels is horizontally doesn't work perfectly.
• Some z-index overlap issues I noticed with the header and modals we display.
• UI layout for the search results list.

But these are all pretty minor - just commenting them here to record them since I just noticed them all. Overall, the experience is really good and this definitely makes the app totally usable on mobile.

Really like Code Mirror!

[iansinnott]

Awesome! Glad it's working on your end too. Going to be really nice to stop redirecting people to a screen about how bad we are on mobile 😅

I agree about the minor things. There are still a few more touches I'd like to put on before merging, but generally we can iterate from here.

CM is pretty sweet. I really like one of the auto-close plugins. It's great on mobile to have tags close themselves out without having to type symbols.

[iansinnott]

More changes:

• Remove mobile redirect from workspace
• Some editor function buttons move into the "..." menu?
  • make that menu button larger, easier to click
  • Remove buttons that don't make sense
• Run buttons should auto-show preview window on mobile? Probably.
• Move run button so that it's less likely to cover up code (especially a problem on mobile)
• Navigation menu supports mobile
• Up next styling supports mobile
• Codemirror theme styles comments better. More obvious, like monaco
• Full screen code editor
  • I'm going to say that it works because you can collapse the test instructions area via the header.
• The tests view has mobile styling. The incomplete status should stack
• Tests tab will respond to passed tests, without being visible
• Video button more visible (red icon)
• Header cannot be fixed. Real estate too precious
• Add a button below the instructions on mobile to shrink the view. Adds discoverability hopefully

[bonham000]

LGTM 👍

Checked it out on my phone again. A few more comments, but nothing major to take action on. Overall really cool! I like the updates.

• Should we hide the export code to file option on mobile?
• The option to switch to the Desktop Editor is cool 👍
• On my phone, the navigation menu challenges run off screen if they are too wide (not sure if this is intended or not). Also, the 0 of N Completed tends to be off the right side of the screen, along with the expand/collapse control. We could probably try to truncate these or render various elements differently on mobile.
• I noticed some of the Blueprint tooltips have issues being dismissed on mobile, probably because mouse movements don't really exist or behavior totally different. It could be helper to see if there is a way to just disable the tooltips if the app is on mobile.

[iansinnott]

Good points.

I made some stylistic updates, especially to the nav menu. Will merge if tests pass and we can iterate from there