Vertical spacing in the desktop

[davidfarmer]

I'd like to discuss decreasing some of the vertical spacing. Specifically:

1) The white space above the title. 2) The height of the navigation bar (where the words "Table of Contents" appears) 3) The height of the dark boxes in the TOC where the top level item (Chapter or Section) appears, in particular the vertical space above the Chapter/section title.

It looks to me like all of those are a bit too large. I also note that the font in the TOC is larger than it was. I think it is larger than necessary, which causes more multi-line entries.

[davidfarmer]

I like that the TOC is narrower, but I am not sure about the subsection titles lining up under the numbers instead of the higher-level title.

[rbeezer]

Anything we can scrunch, without affecting readability, is good with me.

[mxdubois]

Yeah, it'd be nice to tighten the navbar up a little bit on the desktop, where we don't have to worry about touch.

I also like the idea of decreasing the font-size in the ToC. And I agree that we need the indent on the child items in the ToC. That means we may have to give up on adding another level to the ToC.

I'm okay with decreasing the padding on the headings a little bit and David is right that the top/bottom padding on those is unbalanced. I don't want to decreas the height of the child items, though. I think it's important that they feel adequately separated.

Here's a screenshot with a side-by-side comparison of some changes I've been thinking about combined with some of David's suggestions.

Here's the list of changes:

1. balanced top and bottom padding of headings
2. decreased top/bottom padding of headings
3. decreased font-size of ToC overall by 10%
4. Hanging indent in ToC headings to account for numbers. (We discussed this one before and I argued against it because it would be difficult to do reliably, but the current alignment has been bothering me. Does it still bother you too?)
   1. We'd need to add a class to distinguish numbered headings from unnumbered headings
   2. If we wanted to do it perfectly, we'd need to add a class to distinguish between 1, 2, and 3 digits.
5. Reintroduced indent in ToC section child links

Due to the added indents on child items, this ends up being about the same as far as space consumed and line-breaks, but I find it much more readable.

Let me know what you guys think of each of those changes. If the padding/height of the child items still feels excessive, I can try reducing it, but my thinking is that it helps to distinguish the items, making the ToC easier to scan.

[mxdubois]

As an aside, I wonder if it would be feasible for you to make the dash in "L-Function" a non-breaking hyphen? That would help in this particular ToC.

[rbeezer]

With an up-button, I'm not concerned about a 3rd level in ToC. And that sounds like it should be low-priority at this stage.

Make sure ToC items are still large enough to poke on mobile with fat fingers. ;-)

Rob

On 08/08/2014 08:02 PM, Michael DuBois wrote:

Yeah, it'd be nice to tighten the navbar up a little bit on the desktop, where we don't have to worry about touch.

I also like the idea of decreasing the font-size in the ToC. And I agree that we need the indent on the child items in the ToC. That means we may have to give up on adding another level to the ToC.

I'm okay with decreasing the padding on the headings a little bit and David is right that the top/bottom padding on those is unbalanced. I don't want to decreas the height of the child items, though. I think it's important that they feel adequately separated.

Here's a screenshot with a side-by-side comparison of some changes I've been thinking about combined with some of David's suggestions. vertical-spacing-toc https://cloud.githubusercontent.com/assets/1776075/3864833/6f67db0a-1f70-11e4-9bab-891254923ede.png

Here's the list of changes:

1. balanced top and bottom padding of headings
2. decreased top/bottom padding of headings
3. decreased font-size of ToC overall by 10%
4. Hanging indent in ToC headings to account for numbers. (We discussed this one before and I argued against it because it would be difficult to do reliably, but the current alignment has been bothering me. Does it still bother you too?)
   1. We'd need to add a class to distinguish numbered headings from unnumbered headings
   2. If we wanted to do it perfectly, we'd need to add a class to distinguish between 1, 2, and 3 digits.
5. Reintroduced indent in ToC section child links

Due to the added indents on child items, this ends up being about the same as far as space consumed and line-breaks, but I find it much more readable.

Let me know what you guys think of each of those changes. If the padding/height of the child items still feels excessive, I can try reducing it, but my thinking is that it helps to distinguish the items, making the ToC easier to scan.

— Reply to this email directly or view it on GitHub https://github.com/mxdubois/fcla-styles/issues/33#issuecomment-51675346.

[davidfarmer]

Good one. I'll need to detect when there is a hyphen with something short on one side (so L-function but not conservative-leaning). I added it to the SL2X issue tracker.

On Fri, 8 Aug 2014, Michael DuBois wrote:

As an aside, I wonder if it would be feasible for you to make the dash in "L-Function" a non-breaking hyphen? That would help in this particular ToC.

— Reply to this email directly or view it onGitHub.[211500__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcyMzE3MzAxOSwiZGF0YSI6eyJpZCI6MzkxOTc0MjF9fQ==--a2ca39 c34f4b9b38ba914149a50130b96417b352.gif]

[davidfarmer]

I like all those TOC changes. I think I'd like to see a bit less vertical space in the child items, but not much less.

I assume this is desktop only and you can keep Rob's big buttons for mobile?

I'd still like to see less vertical space in the horizontal nav bar. I had asked about less space above the title but am less sure about that.

On Fri, 8 Aug 2014, Michael DuBois wrote:

Yeah, it'd be nice to tighten the navbar up a little bit on the desktop, where we don't have to worry about touch.

I also like the idea of decreasing the font-size in the ToC. And I agree that we need the indent on the child items in the ToC. That means we may have to give up on adding another level to the ToC.

I'm okay with decreasing the padding on the headings a little bit and David is right that the top/bottom padding on those is unbalanced. I don't want to decreas the height of the child items, though. I think it's important that they feel adequately separated.

Here's a screenshot with a side-by-side comparison of some changes I've been thinking about combined with some of David's suggestions. vertical-spacing-toc

Here's the list of changes:

1. balanced top and bottom padding of headings
2. decreased top/bottom padding of headings
3. decreased font-size of ToC overall by 10%
4. Hanging indent in ToC headings to account for numbers. (We discussed this one before and I argued against it because it would be difficult to do reliably, but the current alignment has been bothering me. Does it still bother you too?)
   1. We'd need to add a class to distinguish numbered headings from unnumbered headings
   2. If we wanted to do it perfectly, we'd need to add a class to distinguish between 1, 2, and 3 digits.
5. Reintroduced indent in ToC section child links

Due to the added indents on child items, this ends up being about the same as far as space consumed and line-breaks, but I find it much more readable.

Let me know what you guys think of each of those changes. If the padding/height of the child items still feels excessive, I can try reducing it, but my thinking is that it helps to distinguish the items, making the ToC easier to scan.

— Reply to this email directly or view it onGitHub.[211500__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcyMzE3MjU3MiwiZGF0YSI6eyJpZCI6MzkxOTc0MjF9fQ==--0095dd 3da688c8414a2613fbf5a960da65271329.gif]

[mxdubois]

Okay, I've implemented the alignment changes to the ToC numbers. To support the changes, you will have to use <span class="codenumber">1</span><span class="title">Some Title</span> in the ToC heading links.

The styles are available on feature/ui-spacing. Here's a good demo that demonstrates the effect of multiple digits in the codenumber: http://mathbook.staging.michaeldubois.me/test/ui-spacing/section-3.html

Let me know what you think of that solution.

I've also split the touch sizing out from the default sizing. As such, the navbar is shorter on desktops, and the buttons and ToC links on mobile are slightly larger than before. Yay!

On desktop, I chosen a the ToC item height that feels right to me, for starters. It's 1.5x the base line-height. Let me know what you think and I'll adjust as you see fit.

[mxdubois]

Looks like firefox is adding ellipsis when buttons switch to icon-only. Oops. Will fix tomorrow.

[davidfarmer]

The section titles look good but I think there is still a bit too much vertical space in the subsections. The subsection titles are (in my browser) shifted a bit to far to the right.

On Tue, 12 Aug 2014, Michael DuBois wrote:

Okay, I've implemented the alignment changes to the ToC numbers. To support the changes, you will have to use <span class="codenumber">1Some Title in the ToC heading links.

The styles are available on feature/ui-spacing. Here's a good demo that demonstrates the effect of multiple digits in the codenumber: http://mathbook.staging.michaeldubois.me/test/ui-spacing/section-3.html

Let me know what you think of that solution.

I've also split the touch sizing out from the default sizing. As such, the navbar is shorter on desktops, and the buttons and ToC links on mobile are slightly larger than before. Yay!

On desktop, I chosen a the ToC item height that feels right to me, for starters. It's 1.5x the base line-height. Let me know what you think and I'll adjust as you see fit.

— Reply to this email directly or view it onGitHub.[211500__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcyMzQ0NzgxNywiZGF0YSI6eyJpZCI6MzkxOTc0MjF9fQ==--37cac1 218b29c9dfe3c48a2c29041725f046f308.gif]

[mxdubois]

Too far to the right.. Do you mean the text is not aligned? Or just that the indent seems too big, subjectively.

Could you attach a screenshot if it's the former?

Michael

On Tue, Aug 12, 2014 at 5:23 AM, davidfarmer notifications@github.com wrote:

The section titles look good but I think there is still a bit too much vertical space in the subsections. The subsection titles are (in my browser) shifted a bit to far to the right.

On Tue, 12 Aug 2014, Michael DuBois wrote:

Okay, I've implemented the alignment changes to the ToC numbers. To support the changes, you will have to use <span class="codenumber">1Some Title in the ToC heading links.

The styles are available on feature/ui-spacing. Here's a good demo that demonstrates the effect of multiple digits in the codenumber: http://mathbook.staging.michaeldubois.me/test/ui-spacing/section-3.html

Let me know what you think of that solution.

I've also split the touch sizing out from the default sizing. As such, the navbar is shorter on desktops, and the buttons and ToC links on mobile are slightly larger than before. Yay!

On desktop, I chosen a the ToC item height that feels right to me, for starters. It's 1.5x the base line-height. Let me know what you think and I'll adjust as you see fit.

— Reply to this email directly or view it onGitHub.[211500__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcyMzQ0NzgxNywiZGF0YSI6eyJpZCI6MzkxOTc0MjF9fQ==--37cac1 218b29c9dfe3c48a2c29041725f046f308.gif]

— Reply to this email directly or view it on GitHub https://github.com/mxdubois/fcla-styles/issues/33#issuecomment-51906622.

[mxdubois]

Actually, never mind, I think I've spotted the issue. Thanks for noticing that. Fix coming soon.

[mxdubois]

Fixed.

[mxdubois]

Fixed the ellipsis issue and adjusted the child segment heights. What do you guys think now?

(Demo still here: http://mathbook.staging.michaeldubois.me/test/ui-spacing/section-3.html )

[rbeezer]

Fine by me.

Tested it on my phone, to make sure the items were tall enough to poke reliably, and they seem fine.

FWIW, super-wide equation scrolled well left/right in Chrome Beta on Android.

Rob

On 08/13/2014 05:53 PM, Michael DuBois wrote:

Fixed the ellipsis issue and adjusted the child segment heights. What do you guys think now?

(Demo still here: http://mathbook.staging.michaeldubois.me/test/ui-spacing/section-3.html )

— Reply to this email directly or view it on GitHub https://github.com/mxdubois/fcla-styles/issues/33#issuecomment-52131567.

[davidfarmer]

Looks good.

The Chapter TOC height is proportionally much larger than the Section TOC height. I'll look at it in the morning and see if I have the same reaction.

I am ready to change my html so that this can get into develop.

On Wed, 13 Aug 2014, Michael DuBois wrote:

Fixed the ellipsis issue and adjusted the child segment heights. What do you guys think now?

(Demo still here: http://mathbook.staging.michaeldubois.me/test/ui-spacing/section-3.html )

— Reply to this email directly or view it onGitHub.[211500__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcyMzU5NjgwMiwiZGF0YSI6eyJpZCI6MzkxOTc0MjF9fQ==--c9036c e5c6e0c3e1a7c39f6cbdb31efb24e94c3e.gif]

[mxdubois]

I reduced the margins in the masthead a little bit. They are now exactly derived from the base vertical rhythm units (the top and bottom margins are half the base line-height).

Safe to close this one?

[rbeezer]

Looks OK to me. But when I have no icon to the left of the title, the title's left edge is hard up against the browser window left edge. Did we lose something there?

I know it is somewhere else: can we word-wrap long titles at some imaginary right "margin" other than the right window edge? I've just been messing with subtitles.

Thanks, Rob

On 08/15/2014 09:02 PM, Michael DuBois wrote:

I reduced the margins in the masthead a little bit. They are now exactly derived from the base vertical rhythm units (the top and bottom margins are half the base line-height).

Safe to close this one?

— Reply to this email directly or view it on GitHub https://github.com/mxdubois/fcla-styles/issues/33#issuecomment-52382515.

[mxdubois]

Both fixed, in develop now. Thanks for catching the title problem. I hadn't thought of that case.

The new imaginary right edge is applied to the .container class in the following cases

• there is a left sidebar but not a right sidebar
• there are no sidebars

It is not applied if you add .layout-centered to the body or if there are two sidebars.

You may want to remove the .container class from the .page element, so that the white page and math equations extend to the edge of the screen.

On Fri, Aug 15, 2014 at 10:16 PM, Rob Beezer notifications@github.com wrote:

Looks OK to me. But when I have no icon to the left of the title, the title's left edge is hard up against the browser window left edge. Did we lose something there?

I know it is somewhere else: can we word-wrap long titles at some imaginary right "margin" other than the right window edge? I've just been messing with subtitles.

Thanks, Rob

On 08/15/2014 09:02 PM, Michael DuBois wrote:

I reduced the margins in the masthead a little bit. They are now exactly derived from the base vertical rhythm units (the top and bottom margins are half the base line-height).

Safe to close this one?

— Reply to this email directly or view it on GitHub <https://github.com/mxdubois/fcla-styles/issues/33#issuecomment-52382515 .

— Reply to this email directly or view it on GitHub https://github.com/mxdubois/fcla-styles/issues/33#issuecomment-52384413.

[rbeezer]

On 08/15/2014 11:09 PM, Michael DuBois wrote:

You may want to remove the .container class from the .page element, so that the white page and math equations extend to the edge of the screen.

Without .containr, I seem to get the following behavior.

Load a page, scroll partway down.

Reload page.

Table of Contents does not reload, but blank space is there, etc.

Scroll the page any amount and ToC is then visible.

[mxdubois]

Hmm. I'm not able to repeat this in Firefox or Chrome (on Linux).

Can you give me

• OS / Browser
• and a link to a page where it occurs

[rbeezer]

Updated #primary-navbar as in #24 and this problem seems to have gone away. Almost surely, I did not have something right.