On the new documentation guide pages, like this one https://www.drupal.org/docs/develop/local-server-setup, there is a description field, and then a grid listing of sub-pages. It would be nice to visually differentiate between them a bit more.

Example:

Comments

eojthebrave created an issue. See original summary.

DyanneNova’s picture

<p> tags have a margin-bottom of 1.385em, <ul> should probably have the same

drumm’s picture

Agreed.

When implementing this, we should should see about not putting margins on lists that are the last child. So there isn’t uneven whitespace in places like drupal_set_message()’s boxes. … which would put us back to needing a general bit of whitespace at the bottom if we were to get that consistently on <p> tags.

mglaman’s picture

I would prefer something more than just padding. Even a horizontal line of some sort to help identify a break of content to table of content like structure. Especially with the amount of whitespace on the sub-page headings to their description. This made it more confusing when the sidebar has many links, to myself at least. See attached image from a contrib page.

mherchel’s picture

I'm going to go a step further. We need to also separate each subsection. I played around in devTools and this screenshot looks great to me, and also accomplishes the original goal. I'm also attaching a patch against the current dev branch of bluecheese.

mherchel’s picture

FileSize
804 bytes

Last patch was on the incorrect selector (I don't have a local set up). The attached one is correct.

mglaman’s picture

\o/ I like the suggestion by mherchel! Could we use flexbox to fix equal heights? Or is there no flexbox usage in Bluecheese

mherchel’s picture

Yeah, I was wondering the same. I googled and searched documentation, but couldn't find anything.

Flexbox supports IE10 and up, and compass has support for the legacy syntax that IE10 uses.

If we go the flexbox route, the fallback would also be nice (no grid, which I prefer see #2822428: Remove grid treatment of teasers from documentation guide pages)

mherchel’s picture

@drumm You mentioned that you wanted to run this by the original designer. If you pass me his/her name, I don't mind doing the legwork for this to get sign-off.

Thanks,

hestenet’s picture

@DyanneNova originally worked on the design for this (with @tvn working on the design from an architectural/wireframe level, actually).

  • drumm committed e592da2 on 7.x-2.x, dev authored by mherchel
    Issue #2809243 by mherchel, eojthebrave, mglaman: Visually separate...

drumm credited B_man.

drumm credited B_man.

drumm’s picture

Status: Active » Fixed

B_man took a look at #6, and it is good. He also committed removing the extra margin from the last paragraph within these boxes. This will be deployed later today.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.