PathakPratik commented 4 years ago

When we open the Overworld website on a mobile, we see that it is not responsive and hence very difficult to use.

We could use Flexbox and Media queries or a framework like Bootstrap for achieving a fully responsive website.

A screenshot showing how the home page is rendered in mobile is attached below:-

Overworld

danielgrijalva commented 4 years ago

Definitely, this is something that’s been bugging me since the start and I’m just delaying it. I thought that using the grid system from Semantic UI would cover this but apparently nope (or maybe we are missing something and need to implement them correctly…?)

I think that one of the main problems is that I set a min-width for the body in index.css

index.css#L11

I’ve been playing with flexbox and CSS grid myself so I’ll see if I can work on this in my free time. In the meantime I’ll share this issue with everyone, so if someone’s reading this feel free to contribute! ✨

tlaudahl commented 4 years ago

I’ll look into this as well. I’m pretty comfortable with flex box and media queries. Would there be any objection to converting the css to sass/less? @danielgrijalva It makes writing css way easier, especially media queries in my opinion. If not that’s fine

PathakPratik commented 4 years ago

Even I think using Sass/Less would be great.

danielgrijalva commented 4 years ago

@tlaudahl go ahead. I was thinking of using styled components but sass seems more flexible 😃

tlaudahl commented 4 years ago

I’ve been busy with Christmas and New Years stuff going on but I got time now I’ll finally start on this when I get home from work

PathakPratik commented 4 years ago

Had a look at the code for Home page. Removing the min-width set in index.css does help. After which some fixes specific for each component are required. The main task though looks like making the navbar responsive. We may have to create a hamburger menu for mobile devices. What do you guys think?

PathakPratik commented 4 years ago

Also, opened a PR which makes the settings page responsive. Just adding 'stackable' property to grid did the trick. #186

tlaudahl commented 4 years ago

Probably a good idea, still think it's a good idea to convert all the css to sass? It will get processed into css again anyway but I'll have to go through every css file and make a new sass file for it and compile it

PathakPratik commented 4 years ago

How about using scss? http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

It could help us incrementally use sass features with minimal efforts.

danielgrijalva commented 4 years ago

SCSS seems better to me since more people could jump into it from CSS without knowing much about SASS.

And the navbar sure is the main problem to tackle—hamburger menu sound great but couldn’t find anything related in Semantic UI docs.

Ofineo commented 4 years ago

Has this progresses since the last post? I would like to help if it's still needed.

danielgrijalva commented 4 years ago

@Ofineo @PathakPratik @tlaudahl hey guys, sorry for being absent. I just fixed a conflict in PR #191, which introduces SCSS. I merged the branch so now we got SCSS fully working :)

Panda4817 commented 4 years ago

Hello,

I think this project is a great idea and I had some ideas about how to make the site more mobile responsive. Maybe a stackable navbar would be a good idea. I have forked it and got it working locally. I have tinkered with the scss and this is the result:

homepage

logged in

These are files that have been changed (only scss, added a stackable attritube and added a class name). src/index.scss

added a bigger margin to certain containers that are affected by stacked menu on mobile screens &.container:not(.backdrop):not(.profile-menu-wrapper):not(.footer) { @media (max-width: 767px) { margin-top: 180px; } } root > p {
@media (max-width: 767px) { margin-top: 180px; } }

src/modules/app/components/backdrop/styles.scss

added no padding-bottom when menu is stacked (I think it looks better on mobile screens) .backdrop { padding-bottom: 400px; @media (max-width: 767px) { padding-bottom: 0px; } }

src/modules/app/components/footer/index.js

added footer class name to footer container component so it can be easily excluded from thee extra margin added to containers Container className="footer"

src/modules/app/components/navbar/index.js

added stackable attribute to menu componentMenu className="navbar" inverted secondary stackable

src/modules/app/components/navbar/styles.scss

Added the following css to the navbar class.navbar { @media (min-width: 1199px) { max-width: 1200px; } max-width: 100vw; .grid { @media (max-width: 800px) { margin-left: -40px !important; } @media (max-width: 767px) { margin-left: -14px !important; } } }

edit: I have also made the profile page and game page more mobile responsive by adding stackable to grid components. result

I can create a pull request if this is all acceptable or I am open to any suggestions.

danielgrijalva commented 4 years ago

Hey @Panda4817 thanks a lot! this is a nice improvement.

Maybe a stackable navbar would be a good idea

Can you work on the stackable navbar?

danielgrijalva commented 4 years ago

Hello @JohnMachado11. Not much recently, only the changes by @Panda4817 mentioned above. Seems you're a very experienced guy! feel free to make your own PRs/issues 😄

Panda4817 commented 4 years ago

@danielgrijalva I have done a PR, please take a look 🙂

danielgrijalva commented 4 years ago

@Panda4817 oh yeah sorry. I've merged it now, thanks! ❤️