Moodle in English: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Wednesday, 9 March 2016, 10:08 AM

Hi,

I am not sure if this is theme-related or a general Moodle question, but here goes.

We have had a few queries from teachers using the Topics format set to display all sections on one page layout for their courses.

Their initial query was because they thought that the section headings were gone when they navigated to that section using the Table of Contents block.

In fact, the heading was hidden behind the sticky menu at the top of the screen which we did not have in the previous theme.

My question is: Can the navigation be set so that the top of the section loads below the sticky menu so that the title is visible?

Any help in this matter would be appreciated

Regards,

Malcolm

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Wednesday, 9 March 2016, 10:25 AM

Hi,

I think you will find that this behaviour is the same in Clean and also the More themes, and not just restricted to Essential.

It's a problem that has been around for a long time, and made worse by the 'fixed' (sticky) navbar at the top of the page. The method used in the TOC is to link to the sections using what is termed as a 'bookmark'. The only problem here is that as each section title in the menu is clicked it is pushed to the top of the screen for easy reading, but then the navbar gets in the way.

You will have to wait for Gareth to pass a comment about this, as I am sure he has delt with something similar before.

Cheers

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Wednesday, 9 March 2016, 4:13 PM

Hi Malcolm,

Please could you post some annotated screen shots so I can fully visualise the exact nature of the problem.

Kind regards,

Gareth

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Thursday, 10 March 2016, 9:42 AM

Hi Gareth,

Thanks for the reply. I have two screenshots here - before and after selecting the section via the Table of Contents with some quick arrows etc. drawn in to highlight what I am talking about.

Before:

Section before clicking on Table of Contents

After:

After selection via Table of Contents

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Thursday, 10 March 2016, 4:26 PM

Thank you for the screen shots Malcolm. I need to do some thinking on how to solve this. It will not be a technically basic fix.

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Thursday, 10 March 2016, 7:20 PM

Hi Gareth,

I am almost sure this has been reported in Moodle Tracker some time ago, as it looks like the Book Module with the TOC fake block.

Cheers

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Thursday, 10 March 2016, 7:41 PM

Looks like could be related to MDL-53049

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Friday, 11 March 2016, 12:26 AM

Hi Mary,

Sorry, but I believe that you are wrong. The block in question is: Course_contents_block. As the static navbar is a theme setting, then the fix needs to be in the theme in relation to the use of named anchors.

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Friday, 11 March 2016, 11:03 AM

Hi Gareth and Mary,

Just to clarify, I have here a screenshot in editing mode with the visible components boxed in red and named. Hope it helps.

Thanks for taking so much time for consideration of this.

Regards,

Malcolm

Visible screen components

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Friday, 11 March 2016, 4:00 PM

Good morning Malcolm,

Have you ever tried using the alternative layout using One TOPIC per page? It's just that that works better if you miss the summary section (Section 0) just add a title and nothing more. Then start with Section 1 and you will see that works perfectly.

The problem as you have it now IS caused by the bug which I said it was originally, as the link URL contains an ID that shows up as a '#' sign. This could also be a fault with the Block itself.

I have alerted David Mudrak who is the Author of the 'Course contents block'.

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Friday, 11 March 2016, 6:50 PM

Ok. To settle this once and for all:

It is not the Book Table of Contents block. It is the Course Table of Contents block.
The hashes '#' in the URL when the course format is set to one page for all sections type thing is fine as they are named anchors to the course sections. No need to a) change to 'one section per page', b) change the way that the course table of contents block works - David does not need to get involved.

The problem is this:

The sticky navbar is on top of the position in the page where the id for the named anchor is located. Normally when clicking on a named anchor href, then the browser at the client end scrolls down to that anchor.
Essential has a setting that allows the navbar to be sticky. Because the navbar is always at the top it now is on top of the position where the named anchor is. This causes overlay when clicking on the named anchor URL and the jump happens.

Thus, 'I' need to:

Implement some JavaScript that intercepts the named anchor URL click (can be done) and control the nature of the scroll taking into account the height of the navbar.

This I know how to do. It is a matter of time. Please be patient. It IS NOT:

A core issue.
A problem with the Course Table of Contents Block.
A problem with the course layout or course format.
A problem with the URL containing a hash '#'.

It IS an Essential theme issue - https://github.com/gjb2048/moodle-theme_essential/issues/635.

Gareth

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Friday, 11 March 2016, 8:45 PM

I know it is not the Book Module, Gareth, because Malcolm told me so when I asked if it was. So no need to tell the world I got it wrong, we all know I did and I bet all those reading this will find all this hilarious...I know I am.

I also know what is causing this problem too, I figured it out last night, or should I say in the early hours of this morning, as I spent a good few hours learning how the Course content block works, and marvelling as the complexity of Moodle code.

Anyway, glad to know you have found a solution at last!

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Friday, 11 March 2016, 9:40 PM

Hi Mary,

I'm not saying specifically that you got it wrong, just that the thread keeps going in tangents leading to chasing wild geese. So I felt I had to clarify things.

Average of ratings: Useful (1)

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Saturday, 12 March 2016, 6:47 AM

Hi Gareth,

Believe it or not I have just managed to fix it using a renderer and some CSS!

After first removing the 'id' => 'section-'.$section->section from the 'li' in the course/format/renderer.php,

$o.= html_writer::start_tag('li', array('id' => 'section-'.$section->section . 'class' => 'section main clearfix'.$sectionstyle, 'role'=>'region',
     'aria-label'=> get_section_name($course, $section)));

I wrapped a section container around the section name in course/format/renderer.php

        $sectionname = html_writer::tag('span', $this->section_title($section, $course));
        $o.= html_writer::start_tag('section', array('id' => 'section-'.$section->section));
        $o.= $this->output->heading($sectionname, 3, 'sectionname' . $classes);
        $o.= html_writer::end_tag('section');

Added CSS to style it:

    section {
        padding-top: 60px;
        margin-top: -60px;
    }

I found the idea from this site:

https://www.servermule.com.au/help/bootstrap-anchors-fixed-nav/

It was worth all the head bashing!

Mary

Average of ratings: Useful (2)

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Richard Oelmann - Saturday, 12 March 2016, 8:24 AM

Thats great Mary and really useful

Can I just ask, for my own benefit, is the renderer change needed? wont the padding/margin work anyway with the original classes/structure?

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Saturday, 12 March 2016, 6:34 PM

Hi Richard,

Unfortunately not, as this was one of the first things I tried. Besides the 'section' is a tag and not a class in the changes I made.

My only worry now is that the JS in the course module messes about with the 'ul' and 'li' links where they are defined as 'nodes', this is, I believe, for when swapping topics etc. So needs testing to see that my renderer does not break.

Cheers

Mary

Average of ratings: Useful (1)

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Sunday, 13 March 2016, 3:43 AM

Interesting. Perhaps not dynamic with a changing navbar height and in theory changing the CSS to be '.section' instead of 'section' should eliminate the changes to the course format code.

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Sunday, 13 March 2016, 8:11 AM

Hi Gareth,

I don't quite follow what you are saying. Can you elaborate please?

Unless you mean the JS when swapping topics. I tested that and it appears to work OK with the renderer.

Thanks

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Sunday, 13 March 2016, 9:47 PM

No course format changes, just:

body.pagelayout-course .course-content ul li.section {
    padding-top: 40px;
    margin-top: -40px;
}

or in LESS:

body.pagelayout-course .course-content ul li.section {
    padding-top: @navbarHeight;
    margin-top: -@navbarHeight;
}

or have JS dynamically calculate '@navbarHeight' and inject the value.

Average of ratings: Useful (1)

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Sunday, 13 March 2016, 10:52 PM

Better still...thanks for clarity. I never gave it a thought to add body classes, although technically you should not add body as a prefix, that is a CSS bad styling.

Cheers

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Monday, 14 March 2016, 12:16 AM

Interesting. Where does it say that use of the 'body' tag is bad CSS styling?

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Monday, 14 March 2016, 4:24 AM

I seem to recall seeing it in the CSS Guidelines Moodle docs.

Or perhaps it was when using $ lessc command in Node,js trying to resolve errors when compiling css in moodle.css.

I honestly can not remember as I used to use it myself, but have stopped now,

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Monday, 14 March 2016, 5:52 AM

That works really well so all you need now is the @media..

@media (min-width: (@navbarCollapseDesktopWidth)) {
    body.pagelayout-course .course-content ul li.section {
        padding-top: @navbarHeight;
        margin-top: -@navbarHeight;
    }
}

I made the padding-top and -margin-top 60px to compensate for the body padding-top which is currently 60px in Bootstrapbase.

@media (min-width: (@navbarCollapseDesktopWidth)) {
    .pagelayout-course .course-content ul li.section {
        padding-top: (@navbarHeight + 20px);
        margin-top: -(@navbarHeight; + 20px);
    }
}

and this works just as well.

Thanks for the heads up with this.

Cheers

Mary

Average of ratings: Useful (1)

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Monday, 14 March 2016, 8:38 AM

Hi Mary,

Thanks for the amount of work both you and Gareth have put into this.

I have tried Gareth's CSS and that seems to work fine.

Am I correct in assuming that the two examples above are written in LESS?

Regards,

Malcolm

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Monday, 14 March 2016, 10:02 AM

Hi,

You are welcome Malcolm, I'ts been fun learning all this..and yes it is LESS, but I have included the CSS equivalent.

The @media is so that the CSS does not go beyond the boundary of it usage. Anything less than the screen width from 979px downwards, the course contents problem does not exist, as there is no fixed navbar at that point to hide beneath so to speak.

Here is the CSS and just so you know, the reason I use the 60px padding/margin is so that there is a bit of a gap between the bottom of the navbar and the top of the topic title.

@media (min-width: 980px) {
    .pagelayout-course .course-content ul li.section {
        padding-top: 60px;
        margin-top: -60px;
    }
}

Glad you found it works - that's great!

Cheers

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Monday, 14 March 2016, 9:18 PM

Hi Mary,

In tests, even though the navbar collapses at 979px, the columns don't actually collapse until 767px, thus the block is still at the top and can have the problem. Only when it goes below that does the block appear underneath the content. However, the links still work and thus the fix is not in place. Thus the fix is needed all the time and not guarded by a media query.

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Tuesday, 15 March 2016, 4:23 AM

Hi Gareth,

I disagree with you strongly on that score, as the CSS is NOT required on screens less than 980px because, there is no "fixed" navbar, meaning the navbar at this stage moves with the page, and as such the links scrolls with the page regardless of if the columns are collapsed or not. So in this case the links work like bookmarked anchor tags.

Cheers

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Tuesday, 15 March 2016, 5:16 AM

But in Essential it is fixed to the top below 980px.

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Tuesday, 15 March 2016, 5:35 AM

Oh...I forgot the subject of this discussion is the Essential theme...in that case then yes you are probably correct as I did not test the Essential theme.

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Wednesday, 16 March 2016, 6:03 AM

Hi,

Thanks to you both for the hard work. Mary, your CSS works a treat and Gareth, your tip to remove the media query made it work in all situations.

I was worried that I had unleashed a perfect storm for a while.

Thankfully, we all seem to like tracking down solutions to problems.

Once again, many thanks to you both.

Malcolm.

(p.s. I have some new queries which I will post on a new thread)

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Wednesday, 16 March 2016, 7:04 AM

Wot...not more queries...???

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Wednesday, 16 March 2016, 1:32 PM

Sorry, my mistake....... I received a query just minutes after I sent this off. The fix works great for courses where all of the topics are displayed on one page but....... (the real sentrnce sleays brgins after but....) there are probsbly more courses using one section per page and they do not display properly ehen the CSS is applied. Is there a way to detect which version of the Topics format is selected for a given course and only apply the CSS when the criteria are met?

Cherrs,

Malcolm

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Wednesday, 16 March 2016, 6:03 PM

That's interesting! I'll take a look and see. I don't think this is an Essential problem, although a fix will need to go into that theme, but I suspect it will happen in any Moodle theme that using the fixed navbar.

Thanks for highlighting this problem, although your sentence got a bit scrambled I think I got the gist of it.

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Thursday, 17 March 2016, 8:34 AM

Ahh... the dreaded cellphone auto-correct. I will also post the other issues once i have formulated them in a way that even I understand.

Cheers,

Malcolm

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Wednesday, 16 March 2016, 7:00 PM

I'll investigate too. And there is a way for a theme knowing that course layout option value, but it is more complex than just CSS.

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Wednesday, 16 March 2016, 7:10 PM

Ok, yes I can replicate, but....

It also messes up editing mode in either course layout.
Would not work with Essential's 'narrow' width mode where the navbar is 80px instead of 40px.
Seems to be now broken after I've tidied up and simplified the navbar position and use of the Affix JS.

Thus, I'll remove the CSS fix and write the JS one I originally thought of instead of having a complex set of CSS rules and another body class.

Attachment 2016-03-16 11_06_29-Course_ Topics copy 1.png

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Gareth J Barnard - Thursday, 17 March 2016, 2:33 AM

Alternative solution used: https://github.com/gjb2048/moodle-theme_essential/commit/cb47f9f2b13a378971397889fe66047b6cecb656.

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Thursday, 17 March 2016, 9:17 AM

Thanks Gareth,

I will try this out as soon as I get back to work tomorrow. Unfortunately, our test server is not accessible off the wired LAN.

I will let you know how I get on.

Regards,

Malcolm

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Mary Evans - Thursday, 10 March 2016, 7:16 PM

Hi Malcolm,

Forgive me if I am mistaken but that looks like the Book module rather than the Topic section.

Mary

Average of ratings: -

Re: Table of Contents Block navigation in Essential Theme 3.0.0.4 (Build: 2016010203) Moodle 3.02

by Malcolm Hay - Friday, 11 March 2016, 2:11 AM

Hi Mary,

No, that is Section 0 with a label and a bit of content in my sandpit course used for experimentation and developing resources. The course is set to Topics format and to show all the topics on one page.

Cheers,

Malcolm

Average of ratings: -