MC-5025: Right/Left Margin Not Working For Content Types

anthoula · anthoula · commit c2e93bcb18f4 · 2018-12-21T10:37:10.000-06:00
- add inner div to video to set max width that can inherit text align property with margins
- remove unused max-width converter
- update docs
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/video.xml b/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/video.xml
@@ -30,8 +30,10 @@
                         <attribute name="appearance" source="data-appearance"/>
                         <css name="css_classes"/>
                     </element>
+                    <element name="inner">
+                        <style name="max_width" source="max_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                    </element>
                     <element name="wrapper">
-                        <style name="max_width" source="max_width" converter="Magento_PageBuilder/js/content-type/video/converter/style/max-width"/>
                         <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/video/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/video/_default.less
@@ -14,24 +14,27 @@
         display: flex;
         justify-content: center;
     }
+
     .icon-pagebuilder-video:before {
         color: @color-gray65-lighten;
         font-size: 80px;
     }
+
     div[data-role='video'],
     .pagebuilder-video {
-        > div:first-child,
-        .pagebuilder-video-wrapper,
-        .pagebuilder-video-container {
+        .pagebuilder-video-inner {
+            box-sizing: border-box;
             display: inline-block;
             width: 100%;
         }
+
         .pagebuilder-video-container {
             border-radius: inherit;
             overflow: hidden;
             padding-top: 56.25%;
             position: relative;
         }
+
         iframe,
         .pagebuilder-video-placeholder {
             height: 100%;
@@ -43,4 +46,3 @@
         }
     }
 }
-
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/video/converter/style/max-width.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/video/converter/style/max-width.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/video/default/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/video/default/master.html
@@ -6,9 +6,11 @@
 -->
 
 <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-    <div class="pagebuilder-video-wrapper" attr="data.wrapper.attributes" ko-style="Object.assign(data.wrapper.style(), {backgroundColor: data.wrapper.style().borderColor})" css="data.wrapper.css">
-        <div class="pagebuilder-video-container" if="data.video.attributes().src">
-            <iframe frameborder="0" allowfullscreen attr="data.video.attributes"/>
+    <div class="pagebuilder-video-inner" attr="data.inner.attributes" ko-style="data.inner.style" css="data.inner.css">
+        <div class="pagebuilder-video-wrapper" attr="data.wrapper.attributes" ko-style="Object.assign(data.wrapper.style(), {backgroundColor: data.wrapper.style().borderColor})" css="data.wrapper.css">
+            <div class="pagebuilder-video-container" if="data.video.attributes().src">
+                <iframe frameborder="0" allowfullscreen attr="data.video.attributes"/>
+            </div>
         </div>
     </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/video/default/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/video/default/preview.html
@@ -7,10 +7,12 @@
 
 <div class="pagebuilder-content-type pagebuilder-video" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-        <div class="pagebuilder-video-wrapper" attr="data.wrapper.attributes" ko-style="Object.assign(data.wrapper.style(), {backgroundColor: data.wrapper.style().borderColor})" css="data.wrapper.css">
-            <div class="pagebuilder-video-container">
-                <iframe frameborder="0" allowfullscreen attr="data.video.attributes"/>
-                <i class="icon-pagebuilder-video pagebuilder-video-placeholder" ifnot="data.video.attributes().src"/>
+        <div class="pagebuilder-video-inner" attr="data.inner.attributes" ko-style="data.inner.style" css="data.inner.css">
+            <div class="pagebuilder-video-wrapper" attr="data.wrapper.attributes" ko-style="Object.assign(data.wrapper.style(), {backgroundColor: data.wrapper.style().borderColor})" css="data.wrapper.css">
+                <div class="pagebuilder-video-container">
+                    <iframe frameborder="0" allowfullscreen attr="data.video.attributes"/>
+                    <i class="icon-pagebuilder-video pagebuilder-video-placeholder" ifnot="data.video.attributes().src"/>
+                </div>
             </div>
         </div>
     </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/video/converter/style/max-width.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/video/converter/style/max-width.ts
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/video/_default.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/video/_default.less
@@ -8,17 +8,19 @@
 //  _____________________________________________
 
 div[data-role='video'] {
-    .pagebuilder-video-wrapper,
-    .pagebuilder-video-container {
+    .pagebuilder-video-inner {
+        box-sizing: border-box;
         display: inline-block;
         width: 100%;
     }
+
     .pagebuilder-video-container {
         border-radius: inherit;
         overflow: hidden;
         padding-top: 56.25%;
         position: relative;
     }
+
     iframe {
         height: 100%;
         left: 0;
diff --git a/docs/reference/master-format.md b/docs/reference/master-format.md
@@ -445,9 +445,11 @@ HTML content.
 
 ```
 <div data-element="main" data-role="video" data-appearance="default" style="...">
-    <div data-element="wrapper" class="pagebuilder-video-wrapper">
-        <div class="pagebuilder-video-container">    
-            <iframe data-element="video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen data-bind="attr: getVideoAttributes(), style: getStyle(), css: getCss()"></iframe>
+    <div data-element="inner" class="pagebuilder-video-inner">
+        <div data-element="wrapper" class="pagebuilder-video-wrapper">
+            <div class="pagebuilder-video-container">    
+                <iframe data-element="video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen data-bind="attr: getVideoAttributes(), style: getStyle(), css: getCss()"></iframe>
+            </div>
         </div>
     </div>
 </div>
@@ -464,6 +466,14 @@ Attributes
 Inline styles
 1. justify-content
 
+### inner element
+
+Attributes
+1. data-element [inner]
+
+Inline styles
+1. max-width
+
 ### wrapper element
 
 Attributes
@@ -477,7 +487,6 @@ Inline styles
 4. border-radius
 5. margin
 6. padding
-7. max-width
 
 ### video element
 

Original file line number	Diff line number	Diff line change
`@@ -14,24 +14,27 @@`
`14`	`14`	`display: flex;`
`15`	`15`	`justify-content: center;`
`16`	`16`	`}`
	`17`	`+`
`17`	`18`	`.icon-pagebuilder-video:before {`
`18`	`19`	`color: @color-gray65-lighten;`
`19`	`20`	`font-size: 80px;`
`20`	`21`	`}`
	`22`	`+`
`21`	`23`	`div[data-role='video'],`
`22`	`24`	`.pagebuilder-video {`
`23`		`- > div:first-child,`
`24`		`- .pagebuilder-video-wrapper,`
`25`		`- .pagebuilder-video-container {`
	`25`	`+ .pagebuilder-video-inner {`
	`26`	`+ box-sizing: border-box;`
`26`	`27`	`display: inline-block;`
`27`	`28`	`width: 100%;`
`28`	`29`	`}`
	`30`	`+`
`29`	`31`	`.pagebuilder-video-container {`
`30`	`32`	`border-radius: inherit;`
`31`	`33`	`overflow: hidden;`
`32`	`34`	`padding-top: 56.25%;`
`33`	`35`	`position: relative;`
`34`	`36`	`}`
	`37`	`+`
`35`	`38`	`iframe,`
`36`	`39`	`.pagebuilder-video-placeholder {`
`37`	`40`	`height: 100%;`
`@@ -43,4 +46,3 @@`
`43`	`46`	`}`
`44`	`47`	`}`
`45`	`48`	`}`
`46`		`-`