Regression in the Runestone Menu

[Bradley Miller]

In recent builds I am again seeing a behavior that was fixed a while ago...

When you click on the 👤 menu on a freshly loaded page the menu appears behind the body text making it impossible to click on anything.  But if you scroll slightly so the nav bar collapses and hides the title then it works fine.

You can see this on the recent build of javajavajava on Runestone Academy.    The version of AATA on Runestone Academy works fine…. 

Brad

Bradley Miller, PhD
Professor Emeritus Computer Science
Luther College
Founder, Runestone Academy
Blog: A Reputable Journal

[Rob Beezer]

On 8/13/22 08:03, Bradley Miller wrote:
> You can see this on the recent build of javajavajava on Runestone Academy.

Working for me now on Firefox...

[David Farmer]

I see it in Safari (only: working fine in Chrome and Firefox, for me).

I am not clicking on the bust menu: just hovering. Clicking on it
seems to have no effect.

I know how to fix it, but the fix messes up other things and it
will be a couple days before I can take care of that.

The fix is to add

overflow: visible

to

#masthead .navbar

Unfortunately, that makes other things look bad (the up button has
white space under it, other things in the nav bar have incompatible
heights so things do not line up.

Presumably this can be fixed by taking more care in specifying
the sizes etc of the items in the navbar. That is what I do not have
time to do now.

And if it really is only Safari, I may never have time to do this
because we completely changed the structure of the navbar on the
overhaul branch.

Regards,

David

> --
> 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/dffc0579-2b14-ab4f-28e7-a5edc6e25ce0%40ups.edu.
>

[David Farmer]

I now understand what Brad meant by "regression":

this issue has already been fixed on the overhaul branch.

How close is that branch to being usable for javajavajava?

> https://groups.google.com/d/msgid/pretext-dev/alpine.LRH.2.21.2208131745360.26066%40li375-150.members.linode.com.
>

[Bradley Miller]

Here is a bit more that is confusing to me.

Here is the menu as it correctly appears in AATA:


Now here is the same from javajavajava



Notice all of the extra spacing?  Shouldn’t they look the same?  I’m happy to dig into this if you can give me a nudge in a direction to search.

Bradley Miller, PhD
Professor Emeritus Computer Science
Luther College
Founder, Runestone Academy
Blog: A Reputable Journal

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/alpine.LRH.2.21.2208131839430.29495%40li375-150.members.linode.com.

[Sean Fitzpatrick]

I noticed that the menu wasn't usable in Chrome awhile ago.

Reported here, but maybe it's not the same issue:

https://groups.google.com/g/pretext-dev/c/5XrSlDp0XvM

[David Farmer]

I could not figure out how to look at AATA on Runestone: when I tried
to enrol in a course, that one did not seem to be an option. Without
the HTML, I cannot debug the CSS.

FCLA on Runestone looked like javajavajava.

On Mon, 15 Aug 2022, Sean Fitzpatrick wrote:

> I noticed that the menu wasn't usable in Chrome awhile ago.Reported here, but maybe it's not the same issue:

>
> https://groups.google.com/g/pretext-dev/c/5XrSlDp0XvM
>
> On Monday, August 15, 2022 at 7:03:27 AM UTC-6 br...@runestone.academy wrote:
> Here is a bit more that is confusing to me.
>
> Here is the menu as it correctly appears in AATA:

> [Screen%20Shot%202022-08-15%20at%207.56.36%20AM.png?part=0.1.2&view=1]

>
> Now here is the same from javajavajava
>

> [Screen%20Shot%202022-08-15%20at%207.57.14%20AM.png?part=0.1.1&view=1]

> https://groups.google.com/d/msgid/pretext-dev/1b31c771-49fc-45ba-89b5-ca148f42f960n%40googlegroups.com.
>
>

[Bradley Miller]

To enroll in the open version of any pretext book you use the document-id as the name of the course.  In this case it is AATA

The sample book (PTXSB) looks the same as FCLA and javajavajava

Brad

Bradley Miller, PhD
Professor Emeritus Computer Science
Luther College
Founder, Runestone Academy
Blog: A Reputable Journal

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/alpine.LRH.2.21.2208151148290.1190%40li375-150.members.linode.com.

[David Farmer]

I was confused because AATA does not appear under
"Course IDs for open courses"

The bad layout in the bust menu is caused by CSS in
scaffolding.less

I am guessing that some change was made to include that,
between the time AATA was built and javajavajava was built.

I added some CSS to make it look okay. Will need to redo
it on the overhaul branch.

> https://groups.google.com/d/msgid/pretext-dev/987d7f5a-d271-4785-883e-66190f9e932f%40Spark.
>
>

[Bradley Miller]

I did some more experimenting after drop-in today and setting:

document.getElementById("primary-navbar-sticky-wrapper").style.overflow="visible"

Does no visible damage to any of the examples I have tried AATA, javajavajava, the sample book.  But reliably makes the menu work in all cases.

Yes it is a hack, but it is more specific that the David suggested I think.

Bradley Miller, PhD
Professor Emeritus Computer Science
Luther College
Founder, Runestone Academy
Blog: A Reputable Journal

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/alpine.LRH.2.21.2208151913190.26921%40li375-150.members.linode.com.

[Bradley Miller]

David,

I can add this to my file of Runestone/pretext initializations so it will only take effect when running on Runestone if you would prefer to keep it out of your javascript.

Brad

Bradley Miller, PhD
Professor Emeritus Computer Science
Luther College
Founder, Runestone Academy
Blog: A Reputable Journal

[Sean Fitzpatrick]

First a confession: I haven't gotten around to indexing my book.

But as a result, we discovered something: without an index, the menu icon (the little head) shifts to the left. But the menu it creates does not. It's enough of a shift that it is very difficult to get your mouse cursor from the icon to the menu without the menu collapsing.

I should also note that in my case, I am not seeing the problem where the menu is hidden behind other content. It's always on top; I just can't get to it.

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/ae5f7af8-17af-4a41-9ad5-e63d87ebd490%40Spark.

[David Farmer]

When I tried adding that to the CSS it did mess up the menu (it was
usable but it looked bad).

I can try again.

> https://groups.google.com/d/msgid/pretext-dev/ae5f7af8-17af-4a41-9ad5-e63d87ebd490%40Spark.
>
>

[Bradley Miller]

I didn’t add it to the CSS I added it directly to the DOM element.

Your selector said any child of #masthead that has the class navbar while my javascript only adds it ONLY to the element with the id of primary-navbar-sticky-wrapper.

I saw the ugliness from using the css selector you suggested, but my hack seems to avoid that… 

We may want to schedule some time to figure out where we are at with respect to the React overhaul.  I know I have a list (somewhere) of a few things that need to be done so that readers are not losing features they are used to having in books authored in RST.

• Where were you last reading?
• If you are reading in a reading assignment what is your next page?
• Displaying the progress bar at the bottom of the page
• Adding the mark complete button
• “Decorating" the table of contents
• A button somewhere to enable a scratch activecode window to popup.  There was some talk about this as being like a calculator but I didn’t understand.

Then there are two key markup problems that need to be resolved:

1. Timed exams — This is just a division that contains a bunch of exercises that are presented to the reader one at a time rather than sequentially.
2. Select questions.

I don’t mean to say that these are roadblocks for the overhaul, these are all tasks I want to do for the current main but I guess I’ve been delaying because doing them once for the future is better than doing them and then redoing them.  The two markup issues above are  roadblocks for converting several books.

We made great progress on integration at the June workshop!!  But...

• It looks like the overhaul branch has not been updated since June 24, so it has fallen behind on a few things.
• There are a couple of hacks we did to get things working at the workshop that I need to understand better so that I can support them going forward.
• Now that school is starting it does not feel like the right time to launch the overhaul on the world.  It is going to need a period of some heavy user testing.

Maybe having a target date for merging overhaul is the way to go to create a level of focus.

Brad

Bradley Miller, PhD
Professor Emeritus Computer Science
Luther College
Founder, Runestone Academy
Blog: A Reputable Journal

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/alpine.LRH.2.21.2208161935450.9684%40li375-150.members.linode.com.

[David Farmer]

I made that css change and the menu works in safari now.

I am ready to resume work on the overhaul and will take stock of where
we are.

David

On Wed, 17 Aug 2022, Bradley Miller wrote:

> I didn’t add it to the CSS I added it directly to the DOM element.
>
> Your selector said any child of #masthead that has the class navbar while my javascript only adds it ONLY to the
> element with the id of primary-navbar-sticky-wrapper.
>
> I saw the ugliness from using the css selector you suggested, but my hack seems to avoid that… 
>
> We may want to schedule some time to figure out where we are at with respect to the React overhaul.  I know I have a
> list (somewhere) of a few things that need to be done so that readers are not losing features they are used to
> having in books authored in RST.

> * Where were you last reading?
> * If you are reading in a reading assignment what is your next page?
> * Displaying the progress bar at the bottom of the page
> * Adding the mark complete button
> * “Decorating" the table of contents
> * A button somewhere to enable a scratch activecode window to popup.  There was some talk about this as being like

> a calculator but I didn’t understand.
> Then there are two key markup problems that need to be resolved:

> 1. Timed exams — This is just a division that contains a bunch of exercises that are presented to the reader one at

> a time rather than sequentially.

> 2. Select questions.

> I don’t mean to say that these are roadblocks for the overhaul, these are all tasks I want to do for the current
> main but I guess I’ve been delaying because doing them once for the future is better than doing them and then
> redoing them.  The two markup issues above are  roadblocks for converting several books.
>
> We made great progress on integration at the June workshop!!  But...

> * It looks like the overhaul branch has not been updated since June 24, so it has fallen behind on a few things.
> * There are a couple of hacks we did to get things working at the workshop that I need to understand better so

> that I can support them going forward.

> * Now that school is starting it does not feel like the right time to launch the overhaul on the world.  It is

> https://groups.google.com/d/msgid/pretext-dev/9e68a422-d66a-44a1-931b-f872a32d8a9b%40Spark.
>
>