Target xf css issue - Githubissues

knennigtri commented 1 year ago

When using the WKND XFs in Target on a WKND page, the HTML imported into Target contains:

<body class="xf-web-container">
 <div class="container">
    <div class="root container responsivegrid">
      <div id="container-d5e81cbcff" class="cmp-container">
         ...

WKND's css library uses body .root { to set spacing at the top of the WKND site with elements.scss:

body {
 ...
  .root {
     max-width: $max-body-width;
     margin: 0 auto;
     padding-top:$header-height;
     ...

When a WKND XF is added to a WKND page using the VEC with an imported XF from AEM, the css above is applied to the XF and therefore the component padding-top is set to $header-height.

This can be fixed by fixing the template-type and template for the WKND experience fragment template.

Description

Under ui.content.sample and ui.content the root nodes are updated to xf-root:

conf/wknd/settings/wcm/template-types/empty-experience-fragment
conf/wknd/settings/wcm/templates/experience-fragment-web-variation-template
content/experience-fragments/wknd (all fragments)

This allows the WKND XFs to be imported into Target without the root class and therefor, the padding is not applied:

<body class="xf-web-container">
 <div class="container">
    <div class="xf-root container responsivegrid">
      <div id="container-d5e81cbcff" class="cmp-container">
         ...

Motivation and Context

This allows anyone to use WKND as a reference website for the AEM XF and Adobe Target integration flawlessly.

Someone can now use the pre-created XF content in WKND and apply it successfully and beautifully to the WKND site using Adobe Target without the components 'jumping around' on the page.

How Has This Been Tested?

All tested locally on 2023.06 SDK

[x] Extra padding disappears when adding an imported WKND experience fragment to the WKND website
[x] successfully create a new XF template from the XF template type
[x] successfully use a new XF template
[x] successfully use the current XF template
[x] All experience fragments visually look correct in the experience fragment editor
[x] All pages with XFs visually look correct

Checklist:

[x] I have signed the Adobe Open Source CLA.
[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[x] I have updated the documentation accordingly.
[x] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[x] All new and existing tests passed.

davidjgonzalez commented 1 year ago

@knennigtri Couldnt we just add CSS?:

body.xf-web-container .root { 
    all: unset;
}

(...or whatever needs to be unset/zero'd out)

my concern is that AEM OOTB the node name is called root, so i think you'd have to go in there and change the node names everything manually (in template and any existing nodes).

knennigtri commented 1 year ago

This is probably a simpler/more elegant solution. Let me investigate.

knennigtri commented 1 year ago

It looks like when an XF is imported into Target the HTML is different:

<div class="teaser cmp-teaser--featured aem-GridColumn aem-GridColumn--default--12">
  <div id="featured-article-magazine" class="cmp-teaser at-element-marker">
    <div>
      js/css for XF loaded
      <div class="container">
         <div class="root container responsivegrid">
            .....

Based on this snippet and @davidjgonzalez suggestion, I've updated this PR to update only elements.scss

adobe / aem-guides-wknd

Target xf css issue #418

Description

Motivation and Context

How Has This Been Tested?

Checklist: