MakeContributions / markdown-dungeon

This is an example that how to use Markdown creating a dungeon, please give a ⭐
https://markdown-dungeon.netlify.app/
MIT License
322 stars 148 forks source link

Improve home page UI. #144

Closed xaerru closed 3 years ago

xaerru commented 3 years ago

Made the UI of the home page a little better.

xaerru commented 3 years ago

Site isn't responsive on Netlify, but when I run it locally it is.

xaerru commented 3 years ago

I don't know why this is happening but whenever I open it in mobile view it doesn't render correctly until I click on a card and then go back to the home page.

xaerru commented 3 years ago

It's changing after building. So it's not a Netlify problem

xaerru commented 3 years ago

I overthought it. It was really simple. I didn't even need react-device-detect.

ming-tsai commented 3 years ago

Hi @gauravsingh5, Thanks for contributions, could your replace double quotes to single? I should configure prettier

ming-tsai commented 3 years ago

Hi @gauravsingh5, Please ensure the card is the same size and the ArrowForward button should on the left side image And keep 3 cards on one flow image

xaerru commented 3 years ago

The size of the cards didn't match because the description of the Chinese dungeon was 3 characters less. I used google translate and added "and start" to the description but you can change it as i don't know Chinese. Just add 3 more characters to the description.

ming-tsai commented 3 years ago

The size of the cards didn't match because the description of the Chinese dungeon was 3 characters less. I used google translate and added "and start" to the description but you can change it as i don't know Chinese. Just add 3 more characters to the description.

Couldn't add the same size for the card o material ui?

xaerru commented 3 years ago

I don't know about material ui much but let me try.

ming-tsai commented 3 years ago

Could you tell me what do you want to change? Because for me the old card size is good, it doesn't seem too big or too small

xaerru commented 3 years ago

All the cards were located in center and the space on the side was looking weird.

ming-tsai commented 3 years ago

For me is good, I'm just think have a background image image

xaerru commented 3 years ago

Should we have 4 per row?

ming-tsai commented 3 years ago

We could try, but keep it on the same size

xaerru commented 3 years ago

Ok

xaerru commented 3 years ago

image

xaerru commented 3 years ago

Do you know how to size it?

xaerru commented 3 years ago

image I just sliced the excerpt

xaerru commented 3 years ago

Maybe we can add 3 dots at the end.

ming-tsai commented 3 years ago

For me is good

xaerru commented 3 years ago

It seemed to work

xaerru commented 3 years ago

This is a temporary fix btw, we need to find a permanent one

ming-tsai commented 3 years ago

It fails because you change the text alignment to the center?

xaerru commented 3 years ago

It's the number of lines it takes

xaerru commented 3 years ago

image This is right align

xaerru commented 3 years ago

It's without the slice btw.

ming-tsai commented 3 years ago

image This is right align

You could specify the pruneLength to another length image

ming-tsai commented 3 years ago

But the question, why the current is align? image

xaerru commented 3 years ago

image Prune 30 in English vs Chinese

xaerru commented 3 years ago

image This is Prune 10

xaerru commented 3 years ago

I guess prune 10 should work.

ming-tsai commented 3 years ago

I will check your branch

xaerru commented 3 years ago

Just check the deploy preview

ming-tsai commented 3 years ago

The 10 prune didn't show the description of dungeon

xaerru commented 3 years ago

We can leave it like a teaser, if they click on it they see the full description.

ming-tsai commented 3 years ago

Let me check what is going on with the card

ming-tsai commented 3 years ago

Hi @gauravsingh5, Could you set the prune length to 100? I will check when merge to master

sonarcloud[bot] commented 3 years ago

Kudos, SonarCloud Quality Gate passed!

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication