Some mobile optimisations - mainly for the header. (PR #105)

This sets the container width to 100% under 966px and adds some padding - the header is now formatted appropriately for mobile.

GitHub

@SamSaffron I’ve done some limited testing on mobile (see below) and the only issue I’m having is that the content is zoomable - easily fixed with . We do need full treatment, but I think the @media query for devices less than 966px (using all device sizes below the optimisation for 7") would work well.

2013-02-10 22 24 21

2013-02-10 22 23 22

Edit: I’ve got it set up in my development environment now whereby zooming in past initial-scale is no longer possible, but you can still zoom out.

yeah that gray box in your screen shot bothered us when we did this, also, what happens when you browse down topics? How does the docking look with long titles?

@SamSaffron that grey box is actually the background, upon resize the browser doesn’t resize the element thus creating a “grey box” where the resized element should be. There is some JavaScript that can be used to make it automatically resize which I am currently looking at implementing. When you browse down topics the header stays docked at the top. With longer titles it splits the header onto two lines with the navigation buttons on the right, I’ve had an idea on how to fix that though.

cool with me, just want to make sure we have a comprehensive fix, also be sure to sign the cla http://www.discourse.org/cla

On Mon, Feb 11, 2013 at 10:04 AM, jamiehoyle notifications@github.comwrote:

@SamSaffron https://github.com/SamSaffron that grey box is actually the background, upon resize the browser doesn’t resize the element thus creating a “grey box” where the resized element should be. There is some JavaScript that can be used to make it automatically resize which I am currently looking at implementing. When you browse down topics the header stays docked at the top. With longer titles it splits the header onto two lines with the navigation buttons on the right, I’ve had an idea on how to fix that though.

— Reply to this email directly or view it on GitHubhttps://github.com/discourse/discourse/pull/105#issuecomment-13363486…

Also, lets try and keep mobile hacks all in one spot / css file for now (mobile.scss or something), I think it will help us going forward cause finding all the spots is going to become a pita

On Mon, Feb 11, 2013 at 10:04 AM, jamiehoyle notifications@github.comwrote:

@SamSaffron https://github.com/SamSaffron that grey box is actually the background, upon resize the browser doesn’t resize the element thus creating a “grey box” where the resized element should be. There is some JavaScript that can be used to make it automatically resize which I am currently looking at implementing. When you browse down topics the header stays docked at the top. With longer titles it splits the header onto two lines with the navigation buttons on the right, I’ve had an idea on how to fix that though.

— Reply to this email directly or view it on GitHubhttps://github.com/discourse/discourse/pull/105#issuecomment-13363486…

@SamSaffron I’ve signed the CLA. The fix definitely needs to be robust! I’ll move all my changes into mobile.scss and update the branch.

I’ve done some work on the JavaScript side of things, going to use a jQuery resize handler to reset the header width css each time the innerWidth changes. Not the most elegant of solutions but probably the most robust without using third party libraries. It’s getting late over here in the UK, I’ll work in it some more in the morning. On 10 Feb 2013 23:10, “Sam” notifications@github.com wrote:

Also, lets try and keep mobile hacks all in one spot / css file for now (mobile.scss or something), I think it will help us going forward cause finding all the spots is going to become a pita

On Mon, Feb 11, 2013 at 10:04 AM, jamiehoyle notifications@github.comwrote:

@SamSaffron https://github.com/SamSaffron that grey box is actually the background, upon resize the browser doesn’t resize the element thus creating a “grey box” where the resized element should be. There is some JavaScript that can be used to make it automatically resize which I am currently looking at implementing. When you browse down topics the header stays docked at the top. With longer titles it splits the header onto two lines with the navigation buttons on the right, I’ve had an idea on how to fix that though.

— Reply to this email directly or view it on GitHub< https://github.com/discourse/discourse/pull/105#issuecomment-13363486>…

— Reply to this email directly or view it on GitHubhttps://github.com/discourse/discourse/pull/105#issuecomment-13363592…

Looks good, can you squash your commits?

@eviltrout I think that should be squashed now, I kept running into errors whilst following CONTRIBUTING.md (of my own cause).

Thanks so much for this :fish:

Is it just me or has mobile.css.scss not been pulled across?

It hasn’t - to compound matters, I’ve just git rm’d it and committed the changes so it’s no longer on the filesystem. I’ll recreate it and issue a new pull request.

Oh crap, I just did the auto merge thing. Sorry!

@eviltrout not a problem, there wasn’t too much in there and I can vaguely (!) remember what the code was.

Huh we noticed that zooming didn’t work at all on mobile due to 07f30d44 so I pulled that back. Any idea why?

@eviltrout oops, was playing around with it and left minimum-scale=1.0 maximum-scale=1.0 in the viewport tag - all in all, not the best commit I’ve ever made! I’ll upload some more mobile stuff later with a proper viewport tag.