Re: Fixing the TOC issues

Hi all,

Thanks for the feedback both in the list and in today’s call.
I fixed the issues (hopefully!) and also added media queries to make it adapt to smaller screens. So currently it's outside the page for resolutions with > 1400px width, inside the content area for resolutions between 700px and 1400px and a section at the top for resolutions below 700px. Furthermore, between 500px and 700px it’s two column, whereas below 500px it’s a single column list.
I deployed in current too, so it’s live now.

Hope you like it.

Cheers,
Lea

Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou






On May 24, 2013, at 19:20, Mike Sierra <letmespellitoutforyou@gmail.com> wrote:

> I like it a lot better floating outside the content.  The animation seems jerky, which is odd considering it uses CSS transitions.  Are there any cases throughout the site in which a TOC might run so long that it might not fully display within the vertical screen area?  If so, I suggest accordion-style B-heads.  Also, a bug: you can keep scrolling down once you're at the bottom of the content, with more empty space added underneath the main content as you go.
> 
> 
> On Fri, May 24, 2013 at 11:13 AM, Lea Verou <lea@w3.org> wrote:
> Hi everyone,
> 
> As you might have noticed there are several issues with the TOC pushing down content with clear:both; or content overlapping it (e.g. flags). Yesterday I tried to solve those issues, by moving the TOC outside the content div (but inside the content area) and making it scroll on the free space to the right of the content, as the page is scrolled. Doug suggested I move it outside the content area entirely, so I made a quick mockup which you can find here [1]. It’s not perfect but it should give you a rough idea of how it will look.
> The issue with that is that it requires a pretty large resolution so we would have to move it in the content area for resolutions < 1440px wide anyway. Also, I don't like the contrast of the dot with the background colors, but this could perhaps be fixed, maybe by tweaking its design a bit. The problem with my original approach is that it makes the content narrower.
> 
> Thoughts? Do you prefer this idea or do you think the TOC inside the content area would work better? 
> 
> [1]: http://docs.webplatform.org/test/css/properties/border-radius
> 
> Lea Verou
> W3C developer relations
> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou
> 
> 
> 
> 
> 
> 
>