search

parlaywithme / pweb

http://parlaywith.me
0 stars 0 forks source link

Make top navbar mobile-friendly on pages #4

Closed jimjshields closed 10 years ago

jimjshields commented 10 years ago

Non-main page Styling thought - two rows (logo & sign in in the first row, page links on the second) (or ideally just add an accordion menu)

lorensr commented 10 years ago

thoughts:

index, on all phones: no header, no signin link, logo centered beginning of

(like mobile venmo.com)

other pages: medium screen – make logo and signin smaller, place on L/R edges. move handshake and door to beside the words. small screen – menu slides from left (or tap top-left menu icon), perhaps using this drawer panel (view site on phone):

https://www.polymer-project.org/components/core-elements/demo.html#core-drawer-panel

logo in header, signin bottom: 0 in drawer

@sidneyleslie ?

jimjshields commented 10 years ago

Did some research on Polymer - it looks really nice and seems pretty straightforward, but does require installing components and restructuring the HTML. Would be happy to give it a try if you're okay with using that.

Can also try to do the simpler stuff - index is easy if you and @sidneyleslie are cool with it and the med-screen also shouldn't be difficult. I have some time after (and during) class at this point so can try to take some of these easier pieces.

lorensr commented 10 years ago

I haven't tried Polymer yet, go ahead if you'd like. Works on all current browsers. Looks like mainly adding their js files and using a <core-drawer-panel> element. Not sure how to combine that with existing html, maybe make a separate set of links inside the panel and display: none in a media query above a certain size. But maybe there's a better way. Use bower to install, in same way sweet-alert is integrated.

lorensr commented 10 years ago

Would be nice not to duplicate the nav links – maybe the existing <nav> can go inside the <core-drawer-panel>, if all the styles that come with the panel can be put inside a <= width media query.

jimjshields commented 10 years ago

Yeah, the way you described it is basically the way it works - it shouldn't take any duplication, just reorganizing HTML and overriding of Polymer's CSS. I got Polymer itself installed and working at a basic level in the page, but I'll look at it some more tomorrow to try to integrate it better.

lorensr commented 10 years ago

I think if you went in and surrounded the polymer CDs with the media query, then you wouldn't need to override for larger screen, but either way works.

On Wednesday, November 19, 2014, jimjshields notifications@github.com wrote:

Yeah, the way you described it is basically the way it works - it shouldn't take any duplication, just reorganizing HTML and overriding of Polymer's CSS. I got Polymer itself installed and working at a basic level in the page, but I'll look at it some more tomorrow to try to integrate it better.

— Reply to this email directly or view it on GitHub https://github.com/parlaywithme/pweb/issues/4#issuecomment-63759559.

jimjshields commented 10 years ago

I got almost all the way there. The drawer is styled like everything else; on a small screen, the drawer slides out of view. The part I haven't figured out yet is how to get rid of the drawer on larger screens and use the same, wrapped nav to display on top instead. Is that what you're saying about surrounding the polymer CDs with the media query? Not exactly sure how to go about that if that's what you mean.

But here's what I have so far - let me know if I'm on the right track.

Large screen w/ drawer: screen shot 2014-11-21 at 23 47 40

Small screen w/ drawer: screen shot 2014-11-21 at 23 47 48

Main page - added the shadow the drawer also uses. screen shot 2014-11-21 at 23 47 10

lorensr commented 10 years ago

Cool!

Yes. I was originally envisioning going into the bower_components / core-drawer-panel / core-drawer-panel.css file and putting @media (max-width: Ypx) { at the beginning and } at the end, but just googled stylesheet link certain sizes and got this:

http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

which looks much better!

I like the main page shadow, assuming it's just for <900px?

jimjshields commented 10 years ago

Ah got it - that makes a lot more sense now. I implemented what he says to do in that link - it works but isn't perfect. Basically it works if you're loading it for the first time, but if you change screen size between small and large (over/under 640px) it won't load/unload automatically - needs a refresh - I imagine because it's implemented in JS.

Small screen looks exactly the same. And yep - the main page shadow loads under 900px.

The styling on the top navbar needs to look a little better, and it isn't fixed like the main page navbar (yet).

Large screen on pages now: screen shot 2014-11-22 at 10 20 30

jimjshields commented 10 years ago

Ok, now the top navbar's fixed on all pages and the spacing looks better. I'm at a stopping point now - other things could obviously be added/improved but it'd be separate.

screen shot 2014-11-22 at 10 45 20

lorensr commented 10 years ago

Sorry, I was looking at his recommendation to do:

<link rel="stylesheet" 
      media="screen and (min-width: 601px)" 
      href="large.css">

which, if it works, would be JS-free and hopefully respond to window size changes. Looks good!

jimjshields commented 10 years ago

Yeah I tried that first - didn't work for me at all, the Polymer CSS and HTML still loads. Probably missing something somewhere. There's also likely an easier way to do it just with CSS.

lorensr commented 10 years ago

Oh okay. Well I'll take a look after the PR, but I don't think non-developers resize screens much, so I'm not concerned.

On Sat, Nov 22, 2014 at 12:35 PM, jimjshields notifications@github.com wrote:

Yeah I tried that first - didn't work for me at all, the Polymer CSS and HTML still loads. Probably missing something somewhere. There's also likely an easier way to do it just with CSS.

— Reply to this email directly or view it on GitHub https://github.com/parlaywithme/pweb/issues/4#issuecomment-64094449.

jimjshields commented 10 years ago

Ok cool - I'll submit it, you can take a look after that. Thanks! On Sat, Nov 22, 2014 at 5:10 PM Loren Sands-Ramshaw < notifications@github.com> wrote:

Oh okay. Well I'll take a look after the PR, but I don't think non-developers resize screens much, so I'm not concerned.

On Sat, Nov 22, 2014 at 12:35 PM, jimjshields notifications@github.com wrote:

Yeah I tried that first - didn't work for me at all, the Polymer CSS and HTML still loads. Probably missing something somewhere. There's also likely an easier way to do it just with CSS.

— Reply to this email directly or view it on GitHub https://github.com/parlaywithme/pweb/issues/4#issuecomment-64094449.

— Reply to this email directly or view it on GitHub https://github.com/parlaywithme/pweb/issues/4#issuecomment-64097497.

lorensr commented 9 years ago

You were right – the <link>'s media attribute didn't work for me either, sadly!

jimjshields commented 9 years ago

Yeah, that's so strange - would be so much easier if it worked.