Elasticsuite: Drag & Drop > Alignment problem

[PierrickOlivier]

When I play with the drag & drop, the width of the product decreases and the layout is broken : a product from the 2nd line is moving to the 1st line. See screenshot enclosed.

Preconditions

I'm using Chrome 63 for Mac OS X

Magento Version : 2.2.0 Open source

ElasticSuite Version : Latest (2.5)

Steps to reproduce

Open the search terms, click the "merchandiser" button
Drag & drop several product.
After a few drag & drop the width of the products decreases.
Depending on the width of the browser, a product of the 2nd line may move to the 1st line.

[PierrickOlivier]

Another problem with the drag & drop: it's very easy to move a product towards the left, but it's much more difficult to move a product towards the right.

[afoucret]

Main problem confirmed.
After one hour spent debugging still no idea of how this can happen.

At the same time I had a try to improve a little bit the sorter with :

• More compact design (make easier to move the items)
• Better placeholder during while moving the product

Here is a screenshot :

What do you think about this ?

I will try to dig to find out why this small offset appears after we move items.

[romainruaud]

Haha @afoucret while working on the blacklist feature UX, I ended up to exactly the same design : moving the product name inside the "black box" to gain some space on top (I plan to have the "eye" button on top right).

Please let me know if you merge this on master so we are not conflicting

[djenvert]

Happy Valentine's Day, @afoucret and @romainruaud!

[afoucret]

I will merge on 2.5.x and master today.
Wait for it.

[PierrickOlivier]

It looks good ^^
About the small offset, when I look at the li object I see that the width doesn't change but the offsetLeft property is set to a wrong value: 587 instead of 591.

[afoucret]

Fixed by PR #753
Will be part of the next maintenance release (2.5.2)

[afoucret]

Merged in 2.5.x and master.