closed livingstoneonline/livingstoneonline#131

Sticky header

awisnicki

As noted, we'd like to put our normal header in the level 3 sticky header space as well. When this shrinks to mobile, the logo should lost the second line and move into the area on the left, per the screen shot below. screen shot 2017-04-25 at 14 01 39

awisnicki

See issue #10

nigelgbanks

I've been working on this a bit and gone though several iterations as to what looks best at every resolution, does this work for you?

Phones (320px - 768px) extra small

Tablets (769px - 991px) small

Tablets and Small Desktop (992px - 1199px) medium

Desktop (1200px and greater) large

awisnicki

Yes, this looks good to me.

On mobile, the search bar could probably be a bit wider, maybe 10-15%.

On tablets, I would give it just a little padding on the left and right so text/tiles are not right up against the edge of the screen, but otherwise all good. I could note any additional tweaking when I do a full review of the desktop theme.

Also, it looks like this isn't on stage yet. Is that correct?

nigelgbanks

Nope not on stage yet, still tweaking.

awisnicki

See attached. This is how the sticky header looks on my mobile. Here the search box could be widened a bit. img_6407

awisnicki

Just a note about this one that it looks like you've not yet pushed up the new sticky header for me to review. We should sort this before pushing to prod. From the screen shots you've provided, it looks close to done.

nigelgbanks

Other changes have messed with the work I've done thus far, I think we should wait on this till after the move to production.

awisnicki

OK, no problem. Since this will go on production for a bit, however, could you adjust the text in the center of the sticky header to match the colored nav tabs on levels 2/3? See screen shot. screen shot 2017-08-03 at 15 12 18

nigelgbanks

K I've changed the font and size to match closer to the other uses of nav tabs for now.

awisnicki

OK, great. Thanks for doing this!

awisnicki

Note that there is a small theming issue with the search bar on the current sticky header. See screen shot and note how the text is running out. This looks to be confined to the grid pages, as it's not an issue on the section pages. We can probably ignore this since you'll be replacing the sticky header per the work in this ticket, but here's a note of this issue in case it's of use. screen shot 2017-11-13 at 14 02 36

awisnicki

Note that on this ticket, the new sticky header still needs to be implemented. See the comment above that begins: "I've been working on this...." and the comments that follow.

Re: sticky header, please ensure that anchors clear the new header.

nigelgbanks

I've sorted the text running out issue, but I won't be able to do the change in the header.

I've already spent 3 hours today sorting out the other remains issues including this. Change the header will take a long time no doubt (its changes are far behind) have to wait for another round of work perhaps you can have someone look into it with the grant.

awisnicki

No problem. Let me offer a simpler solution. There are two variants to the header. The one that appears at larger resolutions and the one that appears at smaller resolutions.

screen shot 2017-12-07 at 17 05 52 copy

screen shot 2017-12-07 at 17 05 49 copy

Can you simply turn off the one for larger resolutions? In other words, on larger resolutions there would be no sticky header, and the current smaller resolutions sticky header would only appear at smaller resolutions. The only question I have is whether this would mess up the anchors. Note too that it needs to be turned off on both the grid and section pages.

awisnicki

I figured out how to hide the sticky header, so for now I've hidden it for all screen widths. Anchors look OK, also.

If we come to develop the sticky header more at some future project stage, we can just show it again as all the code is still there.