[ABTEST-506] Status indicator misplaced on green bars in page editor Created: 04/May/21  Updated: 14/Oct/21  Resolved: 19/Jul/21

Status: Closed
Project: A/B Testing
Component/s: None
Affects Version/s: None
Fix Version/s: 1.0.1

Type: Bug Priority: Major
Reporter: Christopher Zimmermann Assignee: Oanh Thai Hoang
Resolution: Fixed Votes: 1
Labels: VN-Maintenance, ui-bug-selected
Remaining Estimate: 0d
Time Spent: 0.5d
Original Estimate: Not Specified

Attachments: PNG File product-teaser (1).png     PNG File status-indicator.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: ABn Later
Sprint: Content Mngmt 08
Story Points: 2

 Description   

See images. The status indicator is too high, and it pushes the text too low. Looks very unprofessional.

I have seen this on a bundle with commerce connector installed.

I have seen this on the ecommerce demo.

There was an idea that it could be related to Live Copy. But I think I've seen it in a commerce demo without livecopy installed. But not 100% certain.

Also notice that the editing icons are showing up on the left of the greenbar, instead of the right side which is normal.

DEV NOTES
-----------
Some modules not present in plain dx-core seem to meddle with page-editor styles. It is not evident by just looking in the browser console which module brings in the changes.
The main diffs I could spot in the nightly build are

div.mgnlEditorBar

  • flex: justify-content -> "normal" instead of "space-between"

div.mgnlEditorBar div.mgnlEditorBarLabelSection

  • display: block --> it should be flex: align-items "center"

 

 

 



 Comments   
Comment by Christopher Zimmermann [ 04/May/21 ]

I'm not recommending this as the fix, but if someone needs to resolve this temporarily - for example to take a screenshot or record a video - this CSS makes things look decent again. 

.mgnlEditor div {
  display: flex;
  align-items: center;
}
Comment by Christopher Zimmermann [ 05/May/21 ]

Maybe we could search our git repo for the styles that appear changed... 
div.mgnlEditorBar div.mgnlEditorBarLabelSection

Comment by Bartosz Staryga [ 05/Jul/21 ]

page-editor.css differs from what is in the latest 6.2.10
The one in commerce demo is missing following styles that causes the wrong status rendering:

  • div.mgnlEditorBar.component
  • div.mgnlEditorBar div.mgnlEditorBarLabelSection

E-commerce demo is on 6.2.7.

czimmermann has the page-editor.css been changed in one of the 3 latest releases?

Comment by Mikaël Geljić [ 07/Jul/21 ]

Sneaky suspicion w/ Live Copy as well, one of the few modules using the editor-bar extension facilities. Inspect the DOM, compare with regular magnolia demo. I don't think the problem is with page-editor.css itself (or version thereof), but rather that live-copy may insert an invisible element with non-inline display or something.

First thing: please provide a clear reproduction path, or a link to an instance showing the problem.

Comment by Bartosz Staryga [ 07/Jul/21 ]

I'm gonna go on the limb here and say it is no live copy
Demo we saw yesterday during OPEN MIC, the AB testing one had also that issue.
I compared DOM elements and nothing new has been added. As I wrote earlier the only difference is page-editor.css are different. Classes that make it work and were not defined in not working one were:

  • div.mgnlEditorBar.component
  • div.mgnlEditorBar div.mgnlEditorBarLabelSection

nguyen.phung in the demo you did yesterday during Open Mic, what extra modules you had in your Magnolia instance? Was it a live copy? Ecommerce (I believe czimmermann suspected that it could be the culprit)?
mgeljic we had it wrong in this demo: http://ecommerce-headless-author.magnolia-cms-demo.com/ but it's now fixed with adding missing styles directly to page css (https://bitbucket.org/bartoszstaryga/headless-ecommerce/commits/a2288e082d2c55a0a3ccdceff9eee06bddb21047).

Comment by Oanh Thai Hoang [ 19/Jul/21 ]

Hi hi all, thanks for mention this ticket czimmermann again. This style bug is not from LiveCopy or Ecommerce, it's from AB modules instead. 

There was a problem with the dependency collision in AB, so instead of resolving correct magnolia-pages-editor-widget, the web app will resolve magnolia-pages-editor-widget-6.2.1 instead. Feel free to go directly into PR descriptor in https://git.magnolia-cms.com/projects/ADDON/repos/ab-testing/pull-requests/277/overview for more detail

 

After the magic PR has been merged, in  https://nightly.magnolia-cms.com/, (nightly includes all livecopy, ecommerce, AB), you won't see the style problem anymore

 

I'll close ticket and feel free to reopen it if you still see this problem style after AB version 1.0.1 has been released. Thank you

Generated at Sun Feb 11 22:56:55 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.