Comments (3)
Hey @brisourceful, thanks for opening this issue. Yes, I've def noticed this before, and have been wondering what to do about it for a while. Overall, the site really isn't optimized for smaller screen sizes. Since this is an in-browser coding project, I figured smaller-screen optimization could be sort of low on the priority list, but ideally, I'd eventually like to make the site fully responsive, to the point where on smaller screens, the menu and console are hidden by default and can be opened by click/touch.
In the meantime, what are your thoughts on what the best solution is?
I'm working on a big PR (#25), and have a bandaid for this worked in: essentially, below a certain width, the console pane just slides all the way up, hiding the menu, which reappears when you get past that same breakpoint. This really just avoids the real problem of poor responsiveness, but does hide the ugly results. EDIT: I just realized this solution had some problematic edge cases. Instead, adding overflow-x: hidden to the menu divs at least keeps the buttons contained, though it doesn't look very good. What do you think? I'm open to suggestions if you got any!
P.S. Once this big PR is in, I'm really going to be looking for active contributors to help take the site to the next level! If you're interested, please let me know!
from cs-playground-react.
Sorry for the super delay in my reply. I've been slammed at work. I think the update looks a lot better and is more responsive. I'm happy to help here and there when I can as I find this project very valuable.
from cs-playground-react.
@brisourceful no worries, and glad to hear you find the project useful! If you ever have any extra time, I'd still welcome the contributions. I think the biggest need at this point is to improve the content - especially the algorithms section. So if you know of any cool challenges, hopefully adding them in isn't too painful (though this is something that could be worked on, as it does require editing at least a couple of files right now).
Anyway, a new PR has recently been merged which improves the menu UI ten-fold, so I think this problem is non-existent at this point.
from cs-playground-react.
Related Issues (20)
- Fix "Flatten An Array" tests
- Add infinite loop protection
- cursor does not have enough contrast on light themes
- fix loop-protect bug
- Error (stack exhausted, infinite loop, reference error etc.) silences console.log HOT 3
- Add theme class to sidebar--menu--sub-header HOT 8
- add reverse vowels challenge
- fix loop-protect issue, change timeout length HOT 4
- [staging]: add user created repls HOT 2
- [staging]: add repl share feature & address ls overwrite problem
- track menu state HOT 4
- future feature: searchable menu
- future feature: settings menu
- add flow for static type checking
- add modal for move to forced https warning
- [future feature] add "save / share all state" feature
- add hamburger menu and keybindings modal HOT 9
- BST algo remove has small glitch HOT 6
- Add transition to dropdowns HOT 1
- Benchmark for native sort() flawed? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cs-playground-react.