[FIX] odoo_theme: add bottom margin to inner lists

[samueljlieber]

This PR fixes "simple" bullet list spacing within a non-simple list.
This issue was discovered in #7301 (comment)

This PR is addressing is the lack of bottom margin on the last <p> tag in a .simple list.

[robodoo]

Pull request status dashboard.

[Brieuc-brd]

Hey 👋

So the issue this PR is addressing is the lack of bottom margin on the last

tag in a .simple list.

There is indeed a lack of bottom margin for .simple lists, but to solve this, you don't have to apply the margins on the last p. You can target a simpler selector that will be much easier to maintain 😉 (comments below).

[samueljlieber]

Hi @Brieuc-brd, thanks again for your insightful review! I agree I do not need to use such a complex selector, my reasoning for doing so was to replace this ⬇️ existing rule to have a single (although more complex) rule:

ol.simple p,
ul.simple p {
    margin-bottom: 0;
}

However, if I leave this ⬆️ existing rule, and add the simple selector you suggested, the styles works as intended!

Please take a look at the Files Changed tab on this PR to see the placement of the rule. I also removed two rules that were removing the margin-top on paragraphs, as you pointed out this is already taken care of by _reboot.scss.

Thank you for your insight here! 🙂

[Brieuc-brd]

We could go further, I'd use .simple as the main selector and use the power of SCSS 🙂

.simple {
    p {
        margin-bottom: 0;
    }
    
    li > & {
        margin-bottom: 1em;
    }
}

But, again, is the simple class used on other elements than ul & ol ? @AntoineVDV maybe you know it? 🙂

[AntoineVDV]

No idea^^

[samueljlieber]

@Brieuc-brd .simple is also used on dl elements. This SCSS works well for the dl element too.

I searched through the documentation and did not find any other instances of where the class .simple is used on other elements. This docutils Examples of Syntax Constructs document also only shows the class being used on only the ul, ol, and dl elements.

The dl, dt, and dd elements are heavily used on the applications/finance/accounting/get_started/cheat_sheet.rst doc for example.

I will push up a commit to update the CSS to SCSS since it is a more elegant solution 👍

[Brieuc-brd]

LGTM 👍

[AntoineVDV]

Thanks @Brieuc-brd for reviewing :)

This also adds a margin to nested lists that are the last list item of the parent list, but I think that it's okay.

Could you just change the commit message to something more Odooesque? For example [FIX] odoo_theme: add bottom margin to inner lists

@robodoo delegate+

[samueljlieber]

Updated commit message in 38dcb52.

Thank you both for the insight and reviews 🙏

@robodoo r+