Plus sign appearing when numbered list followed by bulleted list

[Anne Gentle]

In the HTML output from openstackdocstheme I'm seeing a plus sign next to a numbered list item that contains a bulleted list. Screenshot attached. I asked Wes the designer about it but he's not sure what's going on.

[Bernd Bausch (berndbausch)]

This problem can be traced to the following rule in combined.css:

li.docs-has-sub:before {
      content: "+";
      padding: 0 5px;
      margin-right: 5px;
      background: #C2CAD8;
      border-radius: 4px; }

It would seem that the plus sign is inserted deliberately. Is it dangerous to remove this rule?

[Bernd Bausch (berndbausch)]

docs-has-sub is used in the following function in docs.js:

// Toggle 2nd sub-sections
$(".docs-sidebar-section ol > li > a").click(function () {
    $('.docs-sidebar-section ol li').not(this).removeClass('active').removeClass('open');
    $(this).closest('.docs-sidebar-section ol li').toggleClass('active');
    if ($('.docs-has-sub').hasClass('active')) {
      $(this).closest('.docs-sidebar-section ol li').addClass('open');
    }
    event.preventDefault();
});

It seems to implement a multilevel menu in the sidebar that features plus signs to indicate expandability of a collapsed menu point (and minus to indicate that an expanded menu point can be collapsed).

It's therefore not sufficient to just remove the docs-has-sub rule; instead, the implementation of multilevel menus needs to be redone so that it doesn't interfere with innocent normal lists.

[Bernd Bausch (berndbausch)]

It looks like this problem only occurs when a bullet list is nested inside a numbered list. Not in all other cases (bullet nested in number, number in number, bullet in bullet).
On the other hand, the case "number list nested inside number list" doesn't look right either; the font is too large. Another bug? See screenshot.

[Bernd Bausch (berndbausch)]

Re: Possible bug in nested numbered lists: Not so. It turns out that the RST file had a tiny error - the sub-numbered list items lacked one indent. When the RST is correct, the output looks OK.

[Anne Gentle (annegentle)]

Yep, it's definitely the same plus sign as what's in the TOC -- I'd love more eyes on https://review.openstack.org/#/c/160354/ if you want to take a look.

Nice find on the RST and how to get it working for nested numbered lists. We definitely need unordered (bullet) lists after numbered lists so hopefully we can create a class or some such for the TOC.

[Bernd Bausch (berndbausch)]

The plus sign is caused by the docs-has-sub class, which is added to the sublist by this line in docs.js:

$('ol > li:has(ul)').addClass('docs-has-sub');

I speculate that someone is trying to implement expanding/collapsing sublists, but unfortunately the Javascript line adds the class to static sublists as well. My fix is to uncomment the line. Should this cause problems for expanding/collapsing sublists, they have to be implemented differently.

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: master
Review: https://review.openstack.org/162502

[Bernd Bausch (berndbausch)]

Looking at the mockup at http://openstack-homepage.bitballoon.com/docs/book, it seems that TOC lists are in a div with class "docs-sidebar-toc". If this is true, rather than deleting the above Javascript line, a better solution might be amending it as follows:

    $('div.docs-sidebar-toc ol > li:has(ul)').addClass('docs-has-sub');

[Bernd Bausch (berndbausch)]

> I'd love more eyes on https://review.openstack.org/#/c/160354/ if you want to take a look.

I am happy to lend my eyes, but it's only two or three days that I found out what JSQuery actually is, so don't hold your breath. The code is still largely gobbledygook to me. Thanks for the opportunity to learn :)

How does this relate to https://bugs.launchpad.net/openstack-manuals/+bug/1422454, "Need dynamic TOC built with Sphinx when using openstackdocstheme"?

Bernd

Bernd Bausch
<email address hidden>
[phone]

-----Original Message-----
From: <email address hidden> [mailto:<email address hidden>] On Behalf Of Anne Gentle
Sent: 2015年3月9日 9:43
To: <email address hidden>
Subject: [Bug 1417291] Re: Plus sign appearing when numbered list followed by bulleted list

Yep, it's definitely the same plus sign as what's in the TOC -- I'd love more eyes on https://review.openstack.org/#/c/160354/ if you want to take a look.

Nice find on the RST and how to get it working for nested numbered lists. We definitely need unordered (bullet) lists after numbered lists so hopefully we can create a class or some such for the TOC.

--
You received this bug notification because you are subscribed to the bug report.
https://bugs.launchpad.net/bugs/1417291

Title:
  Plus sign appearing when numbered list followed by bulleted list

Status in OpenStack Manuals:
  Confirmed

Bug description:
  In the HTML output from openstackdocstheme I'm seeing a plus sign next
  to a numbered list item that contains a bulleted list. Screenshot
  attached. I asked Wes the designer about it but he's not sure what's
  going on.

To manage notifications about this bug go to:
https://bugs.launchpad.net/openstack-manuals/+bug/1417291/+subscriptions

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/162502
Committed: https://git.openstack.org/cgit/openstack/openstackdocstheme/commit/?id=0b19390f6691580f44147cbdafe2322fc8261716
Submitter: Jenkins
Branch: master

commit 0b19390f6691580f44147cbdafe2322fc8261716
Author: Bernd Bausch <email address hidden>
Date: Mon Mar 9 09:51:20 2015 +0900

    Fix for unwanted plus sign in sublists

    A plus sign with gray background appears next to a bulleted list inside
    a numbered list. It does NOT appear in all other sublist cases such as
    bullet list nested inside numbered list.

    The plus sign is caused by CSS class "docs-has-sub", defined in
    combined.css.

    Example - given this RST

        #. Number 1
        #. Number 2

           * Bullet 1

    the following HTML (or similar) is rendered:

        <ol>
        <li> Number 1
        <li class="docs-has-sub">Number 2
           <ul>
           <li>Bullet 1
        ....

    Where does the "docs-has-sub" come from? It has been added to the <li>
    element by the following line in docs.js:

        $('ol > li:has(ul)').addClass('docs-has-sub');

    The purpose of this line seems to be implementation of an expandable and
    collapsable sublist. The plus sign indicates to the user that the list
    can be expanded. Perhaps this implementation is incomplete?

    Since the Javascript line affects all bulleted sublists of numbered
    lists, not only expandable ones, I am removing it. The expansion feature
    has to be implemented differently.

    Closes-Bug: #1417291
    Change-Id: Ib6ecd176ca0e1c788a9277ebbf38ea91b6b891ce