Fix mj-column

mjmlio · Aug 23, 2017 · 52e207f · 52e207f
1 parent 26c7655
commit 52e207f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 38 deletions.
diff --git a/packages/mjml-image/src/index.js b/packages/mjml-image/src/index.js
@@ -19,10 +19,7 @@ export default class MjImage extends BodyComponent {
     const width = this.getContentWidth()
     const fullWidth = this.getAttribute('full-width') === 'full-width'
 
-    const {
-      parsedWidth,
-      unit,
-    } = widthParser(width)
+    const { parsedWidth, unit } = widthParser(width)
 
     return {
       img: {
@@ -48,47 +45,40 @@ export default class MjImage extends BodyComponent {
   }
 
   getContentWidth() {
-    const {
-      containerWidth,
-    } = this.context
+    const { containerWidth } = this.context
 
     const width = this.getAttribute('width')
-      ? min([
-        parseInt(this.getAttribute('width')),
-        containerWidth,
-      ])
+      ? min([parseInt(this.getAttribute('width')), containerWidth])
       : containerWidth
 
     const paddingRight = this.getShorthandAttrValue('padding', 'right')
     const paddingLeft = this.getShorthandAttrValue('padding', 'left')
-    const widthOverflow = paddingLeft + paddingRight + parseFloat(width) - parentWidth
+    const widthOverflow = paddingLeft + paddingRight + parseFloat(width) - containerWidth
 
-    return widthOverflow > 0
-      ? parseFloat(width - widthOverflow)
-      : parseFloat(width)
+    return widthOverflow > 0 ? parseFloat(width - widthOverflow) : parseFloat(width)
   }
 
   renderImage() {
     const img = `
       <img
         ${this.htmlAttributes({
-    alt: this.getAttribute('href'),
-    height: this.getAttribute('height'),
-    src: this.getAttribute('src'),
-    style: 'img',
-    title: this.getAttribute('title'),
-    width: this.getContentWidth(),
-  })}
+          alt: this.getAttribute('href'),
+          height: this.getAttribute('height'),
+          src: this.getAttribute('src'),
+          style: 'img',
+          title: this.getAttribute('title'),
+          width: this.getContentWidth(),
+        })}
       />
     `
 
     if (this.getAttribute('href')) {
       return `
         <a
           ${this.htmlAttributes({
-    href: this.getAttribute('href'),
-    target: this.getAttribute('target'),
-  })}
+            href: this.getAttribute('href'),
+            target: this.getAttribute('target'),
+          })}
         >
           ${img}
         </a>
@@ -102,13 +92,13 @@ export default class MjImage extends BodyComponent {
     return `
       <table
         ${this.htmlAttributes({
-    align: this.getAttribute('align'),
-    border: '0',
-    cellpadding: '0',
-    cellspacing: '0',
-    role: 'presentation',
-    style: 'table',
-  })}
+          align: this.getAttribute('align'),
+          border: '0',
+          cellpadding: '0',
+          cellspacing: '0',
+          role: 'presentation',
+          style: 'table',
+        })}
       >
         <tbody>
           <tr>

diff --git a/test.js b/test.js
@@ -7,13 +7,9 @@ const xml = `
   <mj-body>
     <mj-section>
       <mj-column>
-
-        <mj-image width="100" src="/assets/img/logo-small.png"></mj-image>
-
-        <mj-divider border-color="#F45E43"></mj-divider>
-
+        <mj-image width="100" src="https://mjml.io/assets/img/logo-small.png" />
+        <mj-divider border-color="#F45E43" />
         <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
-
       </mj-column>
     </mj-section>
   </mj-body>