Mobile UI improvements - Githubissues

ollelauribostrom commented 5 years ago

The game is currently playable on mobile devices but there is a lot of room for improvements when it comes to the UI. Long words causing overflow makes some elements not visible, and the autofocus is a bit annoying.

Note: The game looks better when simulating a mobile device in Chrome dev tools that in actually does on a real device.

Steps:

Try the game on your mobile device: https://ollelauribostrom.github.io/rebus/
Look at posible improvements
Implement improvements in src/css/main.css

mbailey1983 commented 5 years ago

I'd like to work on this. I've forked the project and will check it out on mobile.

ollelauribostrom commented 5 years ago

@rockstarcreativestudio Awesome, go ahead! 🙂

mbailey1983 commented 5 years ago

So, I have added a font-size in the media query using em to adjust the font a little on mobile. I've also updated the next button as it is hard to see on the dark background.

In terms of the auto-focus, that is from line 26 in rebus.js

this.$parent.querySelector('.change-button--next').focus();

I also think it may be overriding any css styling for :focus on the button.

I ran the tests but I am getting a ton of errors that seem connected to some of the js files:

error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style

Not sure if I can do a pull request.

andyn95 commented 5 years ago

What should I do to fix this issue?

mbailey1983 commented 5 years ago

@ollelauribostrom Is the errors on the tests fixed? I am going to go ahead and push changes and do a pull request.

ollelauribostrom commented 5 years ago

@rockstarcreativestudio These are lint errors caused by the different linebreak styles on unix/windows systems. If you are using vscode and you are on Windows I would recommend you to click the option at the bottom-right of the window and set it to LF from CRLF. You can also run the lint command with the --fix option to fix all of these errors: npm run lint -- --fix

lindakatcodes commented 4 years ago

I would like to take a look at this - at least on my device (Samsung S5) there's lots to work on dealing with text responses and how things look & act while the keyboard is up. Will be sure to update with what I find!

Edit: Got everything up and running on my laptop, but I'm curious - what's the best way to test this on an actual phone? I'm able to get the dev server running on localhost, but that's not accessible from my phone. Does Webpack allow a link that you can go to from any device if you know the path? Or is there a route to follow for pushing local changes and running the local project on the phone? Or is the best option to just test using dev tools (knowing it won't be exactly the same as a phone) and testing it out once / if the changes are merged into master?

PabloMD commented 4 years ago

@lindakatcodes you need to specify the host in config, please see #375. Then you can enter your IP in browser e.x. http://10.0.0.2:3000 Please note:

you need to provide your laptop IP instead of 10.0.0.2
you need the phone to be connected to the same network, so if you have connected your laptop to your home/office network the phone need to be connected to that as well. If you will use your GSM operator, then it will not find that IP as it is for private use only

I hope it helps, if not please do not hesitate to ask :)

lindakatcodes commented 4 years ago

@PabloMD Thanks! I swear I tried that the other day and was getting nowhere, but trying it tonight I got a different IP address from my laptop, and now it's working. :) Helps a lot for something like this!