Curious why this style design was chosen

[jpgarza93]

It looks like brief summaries show outside the function:

as suppose to before, when the summary was part of the same group box:

now my docs look like this:

IMO, seems like grouping them would be a better user experience. Now they seem to be different items. I think it would be better to group them and keep the brief summary in a lighter font/opacity as the older version.

Best!

[jothepro]

Sure, that's a reasonable question!

My intention wasn't to separate the function interface from the summary, but to make a distinction between "code" and "text" content. The new background and font of the function interface is the same as for code listings in the rest of the documentation.
Apart from that I tried to reduce the density of the previous table layout with larger paddings to make the page layout look "cleaner".

The cost for the changes is a looser visual coupling and the fact that paddings make the overview list a lot longer.

If I could move the summary back into the new "code block" background, I would face 2 problems:

1. The increased paddings between the blocks will look silly, bc. there is nothing between the "code blocks" but some small empty space.
2. The only distinction between code and text will be the font (monospace vs. sans serif) and maybe the color, like in the default Doxygen theme.

This may be self-fabricated issues to begin with, the original Doxygen layout wasn't bad after all, it just didn't quite match the rest of the doxygen-awesome-css visual appearance.
Feel free to provide other ideas on how to improve the visual grouping between the function interface and its summary, maybe brainstorming a bit brings up some other interesting solutions! Your proposal to go back to sth similar to the old layout would one viable solution, I guess.
Personally atm I still prefer the appearance of the new layout, although it admittedly comes with some amount of "form over function"-syndrome. 😉

[jpgarza93]

What do you think about this? I changed the CSS on the old version:

// Row Cell Padding
td.memItemLeft,
td.memItemRight,
td.mdescLeft,
td.mdescRight {
    padding: 5px;
}

// Row Top-Left Cell
td.memItemLeft {
    border-radius: 5px 0 0 5px;
    border-top: 1px solid var(--separator-color);
    border-left: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}

// Row Top-Right Cell
td.memItemRight {
    border-radius: 0 5px 5px 0;
    border-top: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
    border-right: 1px solid var(--separator-color);
}

// Row Bottom-Left Cell
td.mdescLeft {
    border-radius: 0 0 0 5px;
    border-left: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}

// Row Bottom-Right Cell
td.mdescRight {
    border-radius: 0 0 5px 0;
    border-right: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}

// Separator Row Cell
td.memSeparator {
    border-bottom: 5px solid transparent;
}

// Class Summary/Brief Row 
tr[class*="memdesc"] {
    transform: translateY(-4px) !important;
}

// Selects Separator Row Cell if there is no class summary/brief
tr[class*="memitem"]+tr[class*="separator"]>td.memSeparator {
    border-bottom: 9px solid transparent !important;
}

You can select whatever colors and spacing you like, but I think the grouping makes for a better visual experience. Can't wait to hear what you think :)

Thanks!

[kuenzign]

I like that in the current version the code is in a monospace font, but I think that the border around only the code lines is a bit jarring in that specific context (it's fine elsewhere). Perhaps a combination of what you just suggested with monospace font (only for the code parts) would be a good compromise?

[jpgarza93]

I think you are suggesting something like this?

// Row Cell Padding
td.memItemLeft,
td.memItemRight,
td.mdescLeft,
td.mdescRight {
    padding: 5px;
}

// Row Top-Left Cell
td.memItemLeft {
    border-radius: 5px 0 0 5px;
    border-top: 1px solid var(--separator-color);
    border-left: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}

// Row Top-Right Cell
td.memItemRight {
    border-radius: 0 5px 5px 0;
    border-top: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
    border-right: 1px solid var(--separator-color);
}

// Row Bottom-Left Cell
td.mdescLeft {
    border-radius: 0 0 0 5px;
    border-left: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}

// Row Bottom-Right Cell
td.mdescRight {
    border-radius: 0 0 5px 0;
    border-right: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}

// Separator Row Cell
td.memSeparator {
    border-bottom: 0px solid transparent;
}

// Code Row 
tr[class*="memitem"] {
    font-family: var(--font-family-monospace);
}

// Class Summary/Brief Row 
tr[class*="memdesc"] {
    transform: translateY(-4px) !important;
}

// Selects Separator Row Cell if there is no class summary/brief
tr[class*="memitem"]+tr[class*="separator"]>td.memSeparator {
    border-bottom: 4px solid transparent !important;
}

[kuenzign]

Yes, that seems appropriate.

[jothepro]

Cool, thx @jpgarza93 for the patch! I'm not convinced yet but I'll give it some time to sink in! 👍
For anybody stumbling across this and preferring it over the existing layout: Pls give @jpgarza93 a thumb up! 😊