Fix margin for right-aligned images (#398)

Update so imageAlign* has a class for all directions
facebook · Jan 18, 2018 · 4c2558e · 4c2558e
1 parent 373a3e6
commit 4c2558e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js
@@ -16,11 +16,13 @@ class GridBlock extends React.Component {
       alignCenter: this.props.align === 'center',
       alignRight: this.props.align === 'right',
       fourByGridBlock: this.props.layout === 'fourColumn',
-      imageAlignBottom: block.image && block.imageAlign === 'bottom',
       imageAlignSide:
         block.image &&
         (block.imageAlign === 'left' || block.imageAlign === 'right'),
       imageAlignTop: block.image && block.imageAlign === 'top',
+      imageAlignRight: block.image && block.imageAlign === 'right',
+      imageAlignBottom: block.image && block.imageAlign === 'bottom',
+      imageAlignLeft: block.image && block.imageAlign === 'left',
       threeByGridBlock: this.props.layout === 'threeColumn',
       twoByGridBlock: this.props.layout === 'twoColumn',
     });

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
@@ -795,7 +795,6 @@ pre code {
 .imageAlignSide .blockImage {
   max-width: 500px;
   flex: 0 1 500px;
-  margin-right: 40px;
 }
 @media only screen and (min-device-width: 360px) and (max-device-width: 735px) {
   .imageAlignSide .blockImage {
@@ -821,6 +820,12 @@ pre code {
   margin-left: auto;
   margin-right: auto;
 }
+.imageAlignRight .blockImage {
+  margin-left: 40px;
+}
+.imageAlignLeft .blockImage {
+  margin-right: 40px;
+}
 .container .gridBlock .blockContent p {
   padding: 0;
 }