search

benji011 / cool-pictures-of-space

My own version of NASAs "picture of the day" but with the ability to zoom in without clicking on the image
MIT License
1 stars 2 forks source link

Improve responsive UI #3

Open benji011 opened 4 years ago

benji011 commented 4 years ago

Issue

Currently the webpage is suited for desktop only

image

What

Improve UI for mobile & tablet devices

Questions

If you have any questions please let me know :)

mkamranhamid commented 4 years ago

Hey, can I have this issue?

benji011 commented 4 years ago

Hi @mkamranhamid, It's yours! Looking forward to see what you come up with 👍

mkamranhamid commented 4 years ago

What's the REACT_APP_API_KEY

benji011 commented 4 years ago

@mkamranhamid

You need to generate one from the NASA API portal, which is a 40 character string. After you generate one you need to create a file .env.development.local and then save this key before starting your server. You can refer here for more info

RegenJacob commented 4 years ago

i could do it too

benji011 commented 4 years ago

@RegenJacob sorry, This issue is already taken by @mkamranhamid but I'm not sure he's still working on it. So it's up to him if he wants to forfeit and have over to you

mkamranhamid commented 4 years ago

Hey @benji011 sure you can give it to @RegenJacob as I caught up in some work

benji011 commented 4 years ago

@mkamranhamid Alright thanks! @RegenJacob The task is yours. Let me know if you have any questions 👍

RegenJacob commented 4 years ago

at this moment i only know how to fix the fork me button but i keep researching :+1:

benji011 commented 4 years ago

Hi @RegenJacob Thanks for the hard work!

Just an update; The fork me ribbon has been replaced with the react-github-fork-ribbon package so this has already been fixed.

There are still 2 things you could do in the next change:

  1. set the preview-image CSS class to 100% when viewing from mobile. You can use the @media rule for this 👍 (ref: https://developer.mozilla.org/en-US/docs/Web/CSS/@media)

    image

  2. Next is the zoom magnifier panel.

    image

Probably this snippet needs to be modified when viewing on mobile. Ideally, showing on the bottom half of the screen instead of the side might be better. https://github.com/benji011/cool-pictures-of-space/blob/f9e8ebb236fbd6764ddc20a27ef35c86cf587e2c/src/App.js#L48-L53

Hope this helps!

mkamranhamid commented 4 years ago

Hey I saw no activity here and have some time so I made a PR. Please have a look at it

RegenJacob commented 4 years ago

thanks for the infos i start working on this