See the attached screenshot.

The drag&drop icon shifts the Name field to the right, but the fields below (such as the Image) don't follow it, they stay on the left.
We should fix this so that any extra field is right below the Name field (and with a bigger padding between the two).

CommentFileSizeAuthor
#8 new-styling.png249.41 KBbojanz
#6 improve_the_styling_of-2689281-6.patch1.42 KBmglaman
#4 improve_the_styling_of-2689281-4.patch1.09 KBmglaman
#4 Colors___Site-Install.png20.9 KBmglaman
styling-bug.png247.7 KBbojanz

Comments

bojanz created an issue. See original summary.

bojanz’s picture

bojanz commented
Related issues: +#2675464: Margin on form-items in table rows (Classy)

Related core issue: #2675464: Margin on form-items in table rows (Classy)

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Assigned: Unassigned » mglaman
mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Status: Active » Needs review
StatusFileSize
new Colors___Site-Install.png20.9 KB
new improve_the_styling_of-2689281-4.patch1.09 KB

PR https://github.com/drupalcommerce/commerce/pull/3

bojanz’s picture

bojanz commented
Status: Needs review » Needs work

Needs its own library, we have no need to reuse/abuse the product add/edit form CSS here, it's unrelated.

We also need an IEF patch to improve the margins between elements, as detailed in the #2 core issue.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Status: Needs work » Needs review
StatusFileSize
new improve_the_styling_of-2689281-6.patch1.42 KB

Updated patch

  • bojanz committed e52fbfe on 8.x-2.x authored by mglaman 
    Issue #2689281 by mglaman: Improve the styling of attribute value entity...
bojanz’s picture

bojanz commented
Status: Needs review » Fixed
StatusFileSize
new new-styling.png249.41 KB

Your comment in #2675464: Margin on form-items in table rows (Classy) led me to the right path. You said:

The drag handle is positioned and all other elements just kind of float around it. Almost like it's expected to be in its own td, however inline forms are not rendering it that way.

And you're right. I expected the drag handle to be in its own td, but it's not.
Looking into the core code I realized that the handle is always added to the first existing cell, a new cell is not created.
Sharing a cell works only if the existing content fits in one line. Ours doesn't.
WidgetBase accounts for this by adding an empty cell to each row, which then receives only the tabledrag, keeping the widget form in its own cell.

I've replicated the same approach here:
https://github.com/drupalcommerce/commerce/commit/e52fbfe03e305421905243...

Attaching a screenshot.

Status: Fixed » Closed (fixed)

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