3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-01 19:27:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fix margin for right-aligned images (#398)

Browse source 
Update so imageAlign* has a class for all directions
This commit is contained in:
Rick Hanlon II 2018-01-17 22:04:03 -05:00 • committed by Joel Marcey
parent 373a3e62de
commit 4c2558e8bd
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lib/core/GridBlock.js
View file

@ -16,11 +16,13 @@ class GridBlock extends React.Component {
alignCenter: this.props.align === 'center', alignCenter: this.props.align === 'center',
alignRight: this.props.align === 'right', alignRight: this.props.align === 'right',
fourByGridBlock: this.props.layout === 'fourColumn', fourByGridBlock: this.props.layout === 'fourColumn',
imageAlignBottom: block.image && block.imageAlign === 'bottom',
imageAlignSide: imageAlignSide:
block.image && block.image &&
(block.imageAlign === 'left' || block.imageAlign === 'right'), (block.imageAlign === 'left' || block.imageAlign === 'right'),
imageAlignTop: block.image && block.imageAlign === 'top', 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', threeByGridBlock: this.props.layout === 'threeColumn',
twoByGridBlock: this.props.layout === 'twoColumn', twoByGridBlock: this.props.layout === 'twoColumn',
}); });

7
lib/static/css/main.css
View file

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