Make table of contents accessible on mobile about climate-tech-handbook HOT 13 CLOSED

Holy crap we did it! So great!!! 🎉

from climate-tech-handbook.

I'm checking this out. From initial observation it seems we just need to add a drawer button for mobile layout that displays the table of contents. Will update with further findings

from climate-tech-handbook.

Alright so a media query should fix this with a little custom js and css. Then I'll work on adding the drawer and onClick functionality for the toc menu

max-width: 959px

vs

max-width: 960px

from climate-tech-handbook.

We have liftoff! Need to implement drawer and nav functionality for it now

https://pictogrammers.com/library/mdi/

Also the second hamburger icon on the other side is kind of gross imo. Maybe someone has an idea for a better icon? @futuresoup

from climate-tech-handbook.

Making progress. I am looking for the css/js for .md-drawer and the .md-overlay so I don't recreate it. See if I can just copy the existing styles.

{{page.toc}} is showing thanks to the nav: permalink: true in the config

from climate-tech-handbook.

Wiki made for anyone who wants more insight: https://github.com/climate-tech-handbook/climate-tech-handbook/wiki/Customizing-MKDocs

Drawer is 95% of the way done outside of a minor bug I should have sorted in the next day or two.

BUG DETAILS

When programmatically navigating forward with <a> tags the {{page.toc}} updates normally with a popState() event. I was able to workaround most of the missed updates using a simple location.reload() cheat. (This obviously isn't optimal, but for a static text based site it shouldn't cause issues)

So for example If you reference the image above and I click the main Climate Tech Handbook title it would not update the new table of contents for the page unless you refreshed first, this is where my cheat comes in.

I went home and the {{page.toc}} updates with my tocDrawer.js script.

This workaround doesn't cover everything yet and here is what happens (it keeps the memory of the last updated {{page.toc}})

Clicking anything in the right side drawer doesn't update our {{page.toc}}

The <a> tag here uses href=[".."] so I thought adding all of the relative paths to my script and rediverting to the home page with a forced reload would work. But a popState() event doesn't occur.

So figuring out what event is occurring and how to mitigate would be our fastest fix.

Best fix is to figure out how to control the update to {{page.toc}}

from climate-tech-handbook.

After looking more at meta tags I think I have a better approach.

We can create tags for each page's table of contents(TOC) and store them in the Frontmatter

And then just load that for each page's drawer. I believe this will prevent the need for unnecessary page refreshes.

Something similar to this

tocTags: 
  - Welcome
  - Join the Movement
  - Nav 3
  - ... so on

Will experiment and hopefully have some final updates soon!

from climate-tech-handbook.

page-toc branch pushed to the handbook repo.

@futuresoup @alexmayberry @ArLough @connor-cs

Check it out and tell me what you think

If someone could tag Uliana too please!

from climate-tech-handbook.

@ArLough do you want to review and test Wes's code

from climate-tech-handbook.

Sure, I'll take a look 👍🏻

from climate-tech-handbook.

@bigolboyyo Overall it looks good to me!

The only thing is I feel like the TOC heading and items hug the left a little too much especially when viewing it in the iPhone SE dimension simulation on chrome. We may want to add more left padding. But, I'm open if people have other opinions on this

from climate-tech-handbook.

Found some bugs and determined that this will be on hold until we migrate to Docusaurus or Starlight

from climate-tech-handbook.

@mzhanggg how is this going? Are you taking a break with the project?

@dovid11564 is also happy to pick it up if you're too busy?

from climate-tech-handbook.