Clean theme BULLETS issue (bootstrapbase issue?)

Clean theme BULLETS issue (bootstrapbase issue?)

- Michael Lewis の投稿
返信数: 11

One of our course designers pointed out an issue with bullet point markup in the Clean theme (possibly in other themes from bootstrapbase but we don't - I think - have others to test).

In the attached zip of PNG files, bullet1 shows round, unfilled circles. In the edit window editor1, they are 'normal' bullets - round, filled circles.

bullet2 shows square filled bullets but the corresponding editor2 again has round filled bullets.

There does not seem to be consistency as to how the bullets are displayed. These are all standard bullets applied with the editor tools and not indented (sometimes bullets will change display style depending on indent level).

When viewed in an alternate theme (e.g. afterburner) these bullets all display as round filled bullets.

評点平均: -
Michael Lewis への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- David Scotson の投稿
I had a couple of theories as to what was causing this, but after looking at it (on qa.moodle.net), I can see it happening and it's not obvious where this style is coming from at all.

I'll continue to investigate.

edit: found it.

If you look at the bullet points in Chrome, then the chrome tools tell you that the circle bullet (i.e. the empty circle) is being provided by the browsers own style sheet from a rule that says:

ul ul, ol ul {
list-style-type: circle;
}

and it also provides:

ul, menu, dir {
list-style-type: disc;
}

On a Moodle course page the sections of the course are also build using ul tags so any lists within those are styled as if they were sub-lists, but when editing them seperately, they're top level lists.

That could be a bug in the browser I think. It should really be ul > ul, ol > ul (i.e. only immediate descendants act like sub-lists).

Now to look to see how other themes are dealing with this.

edit again:

looks like Bootstrapbase is missing these lines:

https://github.com/moodle/moodle/blob/master/theme/base/style/core.css#L917-L923

edit thrice:

though of course that has the opposite problem where if you indent a bullet point in the list it appears as a white circle in the editor and a black circle on the page.

The final answer might be to use the HTML5 "section" tag for the course sections.
評点平均: -
David Scotson への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- Michael Lewis の投稿

David - Wow, thanks for the detailed investigation! I got pulled out of my Moodle world today but will be back looking at this issue soon - though we're also evaluating Julian's Essential theme, I do like to offer course designers a choice of themes to suit their needs. I'll poke around on the browser front to see how the themes are handled by alternate browsers.

評点平均: -
Michael Lewis への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- Gareth J Barnard の投稿
画像 Core developers 画像 Particularly helpful Moodlers 画像 Plugin developers

Looking at https://github.com/moodle/moodle/blob/master/theme/base/style/core.css#L917-L923 - that's a bit iffy as the course format is hard coded into the selector, so really should be 'ul' and not 'ul.topics'.  However on a hunch could it be the difference between the moodle.css and editor.css files when it comes to TinyMCE - or at least the list of LESS files that goes into creating them?

評点平均: -
Gareth J Barnard への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- David Scotson の投稿
That was my first guess too, but it wasn't that.

Changing the use of UL for sections is the answer but it'll probably break JavaScript and css. that expects it.
評点平均: -
David Scotson への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- Gareth J Barnard の投稿
画像 Core developers 画像 Particularly helpful Moodlers 画像 Plugin developers

Maybe, maybe not as Collapsed Topics uses 'ul.ctopics' and Grid uses 'ul.gtopics'.  Just a matter of checking all the relevant code.

評点平均: -
Gareth J Barnard への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- Gareth J Barnard の投稿
画像 Core developers 画像 Particularly helpful Moodlers 画像 Plugin developers

Hi all,

Looking at this further '/course/format/renderer.php' has two classes for the same thing 'summary' and 'summarytext' the former in 'section_header()' method and the latter in 'section_summary()' method.  Any ideas all?

Could this be refactoring into the base / bootstrapbase CSS?

Gareth

評点平均: -
Gareth J Barnard への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- Gareth J Barnard の投稿
画像 Core developers 画像 Particularly helpful Moodlers 画像 Plugin developers

Looking at this in the Clean theme for M2.6.1 - just released - there appears to be no set style for the bullets within the editor:

評点平均: -
Gareth J Barnard への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- Mary Evans の投稿
画像 Core developers 画像 Documentation writers 画像 Peer reviewers 画像 Plugin developers 画像 Testers

That's because Moodle relies on YUI CSS to style ul li bullets, and Bootstrapbase is disassociated from YUI as far as I can recall.

I think that the Editor in Clean carries far too much CSS ... sure it allows people to use Bootstrap CSS but for the general day to day stuff - is it really necessary to have all that minifed css, especially considering that Base theme is minimal with a one line of a few CSS rules.

評点平均: -
Mary Evans への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- Gareth J Barnard の投稿
画像 Core developers 画像 Particularly helpful Moodlers 画像 Plugin developers

Bootstrapbase uses the J Shirley YUI port of the Bootstrap jQuery libraries.  And I thought that YUI CSS style sheets imported too!

I did not test on 'base' based themes but I suspect could be the same issue of no CSS for bullets in the editor matching what is there when not in the editor.

The minified CSS just reduces file size and hence bandwidth issues etc.  Need all that CSS to combine the Bootstrap frame work with the 'base' css.  Reductions need to be made in both areas.  Also there is a lot more functionality and styling to Bootstrap than there is to 'Base' ;)

笑顔

評点平均: -
Gareth J Barnard への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- David Scotson の投稿
I seem to recall there being 3 different class names used for this summary text section, maybe it changed in edit mode or one topic at a time mode.
評点平均: -
David Scotson への返信

Re: Clean theme BULLETS issue (bootstrapbase issue?)

- Gareth J Barnard の投稿
画像 Core developers 画像 Particularly helpful Moodlers 画像 Plugin developers

Perhaps, but as far as I can tell there is no targeted selector for when bullets are used within the editor, only when the content is rendered.  A case of 'What You See Is Not What You Get' - WYSINWYG.

評点平均: -