Minor dashboard tweaks, fix flex-list margins

[silverwind]

Some small dashboard tweaks:

• Remove margin-bottom from divider so first item does not appear to have un-equal margins
• Restore previous icon color
• Add slight margin-right to icon

Before:

After:

[silverwind]

This problem with divider followed by flex-list is seen on a number of pages:

It could be fixed by using margin instead of padding for the item because browers will "merge" adjacent margins. Edit: nope, margin causes other issues.

[silverwind]

@wxiaoguang I changed your fix in #26779 to be more generally useful and work seamlessly with .ui.divider before and after the list, which is a very common layout in many places (dashboard, org page, repo lists). Additionally this fixes double space before/after issue list.

[wxiaoguang]

I guess it breaks other UI.

[silverwind]

Any ideas where it could break?

[wxiaoguang]

I think I have explained in #26779 : "It's better to keep children elements simple, and let parent containers layout the necessary padding/margin."

If we remove all the padding-top/padding-bottom of a flex-list by default, it's difficult to control its behavior.

For example, the page "org/member" doesn't have padding-top now

And you can see there are many (not only a few ...) gt-m?-4 and gt-p?-4 in code to "fine tune (add the padding back)", they are all quite fragile.

To make the things clear, my option:

• Make the flex item all have the same padding by default
• Remove all gt-m?-4 and gt-p?-4 for the flex lists
• Make the flex list work for what it really knows:
  • Use .ui.segment > .flex-list:first-child > .flex-item:first-child (the approach in #26779)
  • Try to use + to make it work with divider
  • Introduce a special CSS class for flex-list to remove the padding explicitly, eg: flex-list no-padding-y (there could be a better name)

If you don't mind, I can help to work with this PR and clean the legacy gt-m?-4 and gt-p?-4 usages.

[wxiaoguang]

Did a quick test, this change seems working, and the gt-mb-4 / gt-pt-4 could be removed from templates:

/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly */
.ui.segment > .flex-list:first-child > .flex-item:first-child {
  padding-top: 0;
}

.ui.segment > .flex-list:last-child > .flex-item:last-child {
  padding-bottom: 0;
}

/* If there is a divider besides the flex-list, some padding/margin are not needed */
.divider + .flex-list > .flex-item:first-child {
  padding-top: 0;
}
.flex-list + .divider {
  margin-top: 0;
}

[silverwind]

I guess that may work, but if we let flex-list provide padding in other cases, the changeset will be bigger an as you said, we need to remove a lot of pt-4 like on issuelist which currently also suffers from this double padding. Likely better in the long run.

[wxiaoguang]

the changeset will be bigger an as you said,

I have confidence that it won't be long in the future (we only need to handle divider and segment). For other rare cases, it could use class="flex-list no-padding-y" (or name it something like flex-parent-padding)

[wxiaoguang]

I managed to make some changes by silverwind#4 , it doesn't change too much (including a new demo), while I think the new code is more readable than before:

• No need to do class="{{if .PackageDescriptors}}flex-list{{end}} gt-pt-4", just use flex-list
• No need to do class="{{if not .HasError}}gt-hidden{{end}} gt-mb-4"
• Introduce flex-space-fitted to remove the padding-top/padding-bottom (ps: Fomantic UI also has fitted classes)
  • It's not used yet, haven't seen a real use case for it at the moment.

[wxiaoguang]

One more thought, IMO "padding" is not the right approach for the space layout between elements. The right approach should be "margin".

By using "margin" correctly, we do not need to fine-tune every space. I would like to refactor some "padding" styles to "margin" style.

In short, if I understand correctly:

• "margin" is good for the space between sibling elements.
• "padding" is good for the space between parent and children.

[silverwind]

wait on silverwind#4

[silverwind]

Appears to work well enough. I fixed it on user profile page as well.

Also, 65d6fa7 removes some dead css I forgot in #26830.