TOC Height/Scroll

[Jason Siefken]

There's an annoying UI issue that multiple people have brought up:

The TOC is the page height. If the contents of the page are short, then, while scrolling, there is exactly one pixel-perfect position where the TOC occupies the right amount of the page. Scroll too little, and the top banner shows. Scroll too much and the footer shows.

It would be nice if the scroll could somehow "catch" for a few pixels when it is the correct position. I don't dare propose a Javascript solution (too hard to get right...), but I recently came across the CSS property scroll-snap-type https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type   I still don't understand how it works, but maybe some CSS tinkerer could figure out how to use it to solve the TOC issue? Seems in the ball park, at least...

[Jones, Bryan]

Jason,

I've had good success with CSS calc() function plus var() coupled with custom properties. For example, to get one element of my layout to be exactly the right height, I have:

:root {

    --top-height: 6.7rem;

    --body-padding: 0.2rem;

}

body {

    padding: var(--body-padding);

    margin: 0px;

}

#CodeChat-top {

    height: var(--top-height);

}

#CodeChat-body {

    height: calc(100vh - var(--top-height) - 2 * var(--body-padding));

    overflow: auto;

}

Perhaps an approach like this would work?

Bryan

--
You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/9cd7905b-d426-79d7-768e-de998ec7733c%40gmail.com.

--

Bryan A. Jones, Ph.D.
Associate Professor
Department of Electrical and Computer Engineering
231 Simrall / PO Box 9571
Mississippi State University
Mississippi State, MS 39762
http://www.ece.msstate.edu/~bjones
bjones AT ece DOT msstate DOT edu
voice 662-325-3149
fax 662-325-2298

Our Master, Jesus Christ, is on his way. He'll show up right on
time, his arrival guaranteed by the Blessed and Undisputed Ruler,
High King, High God.
- 1 Tim. 6:14b-15 (The Message)

[Jason Siefken]

It's not the height that's the issue. It's the scrolling. Look at https://siefkenj.github.io/pretext-react/section-1.html#section-1 on a large monitor to see what I mean. Try to get it scrolled so the TOC is fully visible but the header and footer are not.

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CAHhYbD-CMOZF56tstmgxbAhj7jHSrV%2B%2BDPvS-oxo%2BW--OEs6Mw%40mail.gmail.com.

[Sean Fitzpatrick]

A related issue (sufficiently related, I hope, that this is not hijacking!)

Here is a book that I build using CLI 1.4.0:

https://opentext.uleth.ca/Math3410/linear-algebra.html

Click on the link for Back Matter.

When I do this in Chrome, because the TOC is fairly long (though not nearly as long as APEX), 

and the Back Matter is at the end, I get what I think is undesirable behaviour:

The page focus jumps to where the Back Matter is in the TOC, and I have to scroll up to see the links to the sections.

I think the focus should be at the top of the page on page load, and it should be the TOC that scrolls, not the page.

[David W. Farmer]

I looked at this and failed to guess what behavior would be
preferred with scroll-snap-type .

Also, for the case Sean mentioned: with the current TOC, when
you are in a section that is near the end of the book,
either that section is shown in the TOC, or the first sections
are visible. You can't have both. Once we have the the
react version, we can dynamically compress parts of the TOC
so that the (sub)sections of the current sections are visible,
and also the earlier chapters.

Maybe drop-in is a better way to discuss this than email.

> https://groups.google.com/d/msgid/pretext-dev/6f3e5ef3-6947-4f04-885e-8da06084a372n%40googlegroups.com.
>
>

[Sean Fitzpatrick]

I'm not sure if I'll be able to make it to drop in.

For the case I'm describing, the issue is not that I can't see the sections at the top of the TOC.

It's that when the page scrolls down to get the TOC to that point, it takes the page with it.

I want the page I want to read to begin at the top of the page, not at the bottom.

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/ef98d598-715f-7ecf-62df-3cb33e8583b7%40aimath.org.

[David W. Farmer]

Thanks, I should have understood the first time. I'll look again.

> https://groups.google.com/d/msgid/pretext-dev/CAH%2BNcPZRsu6k9LuDEazPMguR8sof4mY8C7L0vWA0SSRMNSFxSg%40mail.gmail.com.
>
>