Improve readability of the Episode overview

[drmowinckels]

The overview at the start of an episode is really hard to read in desktop mode when the episode menu is expanded. If Expand All Solutions was moved to another location, so that the Overview can utilise the entire parent div, I think this would improve it by a lot.

Alternatively, you could set the child divs in the Overview to be rows rather than columns, so that they are always stacked vertically rather than horizontally. But that will not look great when the episode menu is collapsed.

In terms of suggestions to where the expand all solutions could be, I think it could fit in the Episode menu or right below the Overview. I also think it could benefit from getting some styling, like being a button or something.

[zkamvar]

Thank you for opening this and providing suggestions, @drmowinckels.

This is part of a broader sticky issue that currently exists in https://github.com/carpentries/varnish/issues/83, https://github.com/carpentries/sandpaper/issues/299, and https://github.com/carpentries/workbench/discussions/10#discussioncomment-2938302

We are still running a bit of a backlog at the moment, so it may take some time for this to get resolved.

[drmowinckels]

Sorry for missing other places where this is mentioned.

I'm pretty naive to lua filters, so I cant really grasp it completely, but from the code here I think I get the gist of what is going on.

If I understood lua better, I'd say I'd give it a go. But can't reallt claim that I do :P

[zkamvar]

Sorry for missing other places where this is mentioned.

Absolutely no apologies are necessary in this (and most other) cases. Distributed issues is one of the challenges of having a modular toolchain.

Would you be able to provide the link to the page along with the browser you are using and the width of your window? I'm finding that I cannot reproduce this behavior in Chrome with this episode as I narrow the window

You are correct that that is the right place to modify is the lua filter along with the overview.scss file in {varnish}.

One of the challenges we faced is that the implementation of the overview card was not designed in a flexible manner and this has caused all these issues that we are seeing (the questions column is specified to be half the width of the objectives and that seems... wrong).

[drmowinckels]

This is strange, @zkamvar . I'm on Chrome (Version 114.0.5735.133 (Official Build) (x86_64)) on MacBook running macOS Ventura (13.0 (22A380)) and seeing this behaviour:

https://github.com/carpentries/workbench/assets/14014329/0baa4c97-8b60-44a6-9fe6-3921e20d9da6

Somehow, the Expand All Solutions for me is next to the overview, rather than on top... I'm really rather curious to how we can be seeing such different behaviour.

[zkamvar]

Oh that's weird. I'm using Chrome Version 114.0.5735.106 (Official Build) (64-bit) on Ubuntu Linux 20.04. I'm going to updgrade now and see if they introduced a bug.

[zkamvar]

I now have the same version of Chrome and I do not see this -_-

@tobyhodges, I know you have a more recent Mac, can you check this behaviour on your machine?

[tobyhodges]

Mac OS Ventura 13.3.1 Chrome 114.0.5735.133

I don't have the tools/skills to create a fancy GIF of it, but I can confirm that I see the same as @zkamvar. Mystery abounds!

[drmowinckels]

ok, safari on my same computer is behaving like you are saying.... wtf?

[zkamvar]

I wonder if it may be the interference of a chrome extension. If you create a new profile in chrome and view the page, do you get the same bug?

[drmowinckels]

right-o! I tried in incognito and the overview is looking so much better! Much more like yours. I still think the questions section should have a little more space, but its not like it was at all. I try to figure out which specific extension might be doing it and get back to you.

[froggleston]

I've been looking at this again, and there's some interesting behaviour related to the .card-title font sizing. At font-size 24px, the default, I see the reported behaviour.

However, upon reducing the .card-title font-size to 22px, the problem goes away:

This makes me wonder that it's a screen resolution vs browser window size font scaling issue rather than a particular class or CSS property messing with anything. Looking at varnish's overview.scss it seems that the .card-title font-size is fixed. Could a solution be to use the $font-sizes sass map to automatically scale heading text (https://getbootstrap.com/docs/5.0/utilities/text/#maps)?

[edit: chrome Version 119.0.6045.200 (Official Build) (64-bit)]

[ErinBecker]

Fixed with https://github.com/carpentries/varnish/pull/109