From fc47d710896f910571c1d9ba05f5b3d767906ed6 Mon Sep 17 00:00:00 2001 From: rickhanlonii Date: Sat, 13 Jan 2018 15:09:43 -0500 Subject: [PATCH 1/2] Fix margin for right-aligned images --- lib/core/GridBlock.js | 1 + lib/static/css/main.css | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js index 797f2bec1163..6be5452fcf67 100755 --- a/lib/core/GridBlock.js +++ b/lib/core/GridBlock.js @@ -20,6 +20,7 @@ class GridBlock extends React.Component { imageAlignSide: block.image && (block.imageAlign === 'left' || block.imageAlign === 'right'), + imageAlignRight: block.image && block.imageAlign === 'right', imageAlignTop: block.image && block.imageAlign === 'top', threeByGridBlock: this.props.layout === 'threeColumn', twoByGridBlock: this.props.layout === 'twoColumn', diff --git a/lib/static/css/main.css b/lib/static/css/main.css index 1c25be0bf649..48c8de93c228 100644 --- a/lib/static/css/main.css +++ b/lib/static/css/main.css @@ -821,6 +821,10 @@ pre code { margin-left: auto; margin-right: auto; } +.imageAlignRight .blockImage { + margin-right: 0; + margin-left: 40px; +} .container .gridBlock .blockContent p { padding: 0; } From c651a8373f5f1253c27f2d397fb8471e1b3c9508 Mon Sep 17 00:00:00 2001 From: rickhanlonii Date: Sun, 14 Jan 2018 11:52:10 -0500 Subject: [PATCH 2/2] Update so imageAlign* has a class for all directions --- lib/core/GridBlock.js | 5 +++-- lib/static/css/main.css | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js index 6be5452fcf67..5e3ee3c84e90 100755 --- a/lib/core/GridBlock.js +++ b/lib/core/GridBlock.js @@ -16,12 +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'), - imageAlignRight: block.image && 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 index 48c8de93c228..a4ddc1946b6a 100644 --- 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 { @@ -822,9 +821,11 @@ pre code { margin-right: auto; } .imageAlignRight .blockImage { - margin-right: 0; margin-left: 40px; } +.imageAlignLeft .blockImage { + margin-right: 40px; +} .container .gridBlock .blockContent p { padding: 0; }