stevage / map-gl-utils

A utility library that makes Mapbox GL JS or Maplibre GL a bit more convenient to work with.
https://npmjs.com/package/map-gl-utils
210 stars 24 forks source link

Website TOC resize handle broken #32

Closed WebMechanic closed 2 years ago

WebMechanic commented 2 years ago

Hello,

if I grab the drag handler between TOC and content parts to get some space for the content itself w/o the need to scroll horizontally, the handler sticks to the mouse and can no longer be released: click, dblclick, esc -- all do nothing. That's on Chrome 95 for Win10 with a vanilla mouse.

I have to reload the page and face a screen-estate wasting TOC panel and scroll the content part. Yes, I don't have a HD monitor :-)

May I suggest to reduce the overall width of the left TOC anyway? It's way to large for the short lines present in the TOC wasting alot of horizontal space.

Thanks.

WebMechanic commented 2 years ago

here's an idea:

/* the container which oddly enough has no id nor is it <main> */
div.flex {
  --toc: 20vw;
  --gap: 10px;
}
.gutter-horizontal {
  flex-basis: calc(var(--gap) * 2)
}
#split-left {
  flex-basis: calc(var(--toc) - var(--gap))
}
#split-right {
  flex-basis: calc(100vw - var(--toc) - var(--gap))
}

then your slit-dragging script could just change the --toc variable and let the browser do its job.

Enjoy!

stevage commented 2 years ago

The documentation is generated by documentation.js so that's probably the place to raise this. I'd accept a PR that does some post-generation hackery to implement the above though.

WebMechanic commented 2 years ago

I wasn't aware of this (obviously). Will check this out. I'll think abut the PR :-)