yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-29 08:04:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix DZ alignement

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-12-09 16:25:59 +01:00
parent 954852fac6
commit 7cdb688cd7
5 changed files with 47 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/strapi-helper-plugin/lib/src/components/BaselineAlignement/index.js Normal file
View File

@ -0,0 +1,33 @@
import PropTypes from 'prop-types';
import styled from 'styled-components';
// You can see in the index.js file that I used the design system to do the UI integration but
// sometimes, we need to create some "temporary" custom style to fix the baseline alignment.
// -----
// TODO : remove this component. I think that this kind components should not exist in Strapi.
// I create it to temporary fix the baseline alignment until we have the design system.
const BaselineAlignment = styled.div`
padding-top: ${({ size, top }) => top && size};
padding-right: ${({ size, right }) => right && size};
padding-bottom: ${({ size, bottom }) => bottom && size};
padding-left: ${({ size, left }) => left && size};
`;
BaselineAlignment.defaultProps = {
bottom: false,
left: false,
right: false,
size: '0',
top: false,
};
BaselineAlignment.propTypes = {
bottom: PropTypes.bool,
left: PropTypes.bool,
right: PropTypes.bool,
size: PropTypes.string,
top: PropTypes.bool,
};
export default BaselineAlignment;

1
packages/strapi-helper-plugin/lib/src/index.js
View File

@ -7,6 +7,7 @@ export { default as routerPropTypes } from './commonPropTypes/router';
export { default as themePropTypes } from './commonPropTypes/themeShape';
// Components
export { default as BackHeader } from './components/BackHeader';
export { default as BaselineAlignement } from './components/BaselineAlignement';
export { default as BlockerComponent } from './components/BlockerComponent';
export { default as Button } from './components/Button';
export { default as ButtonModal } from './components/ButtonModal';

1
packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Wrapper.js
View File

@ -3,6 +3,7 @@ import styled from 'styled-components';
const Wrapper = styled.div`
position: relative;
padding-top: 5px;
padding-bottom: 3px;
text-align: center;
.info {
position: absolute;

2
packages/strapi-plugin-content-manager/admin/src/components/InputUID/Wrapper.js
View File

@ -2,7 +2,7 @@ import styled from 'styled-components';
const Wrapper = styled.div`
position: relative;
padding-bottom: 23px;
padding-bottom: 27px;
`;
export default Wrapper;

17
packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { get } from 'lodash';
import {
BackHeader,
BaselineAlignement,
LiLink,
LoadingIndicatorPage,
CheckPermissions,
@ -139,14 +140,18 @@ const EditView = ({ isSingleType, goBack, layout, slug, state, id, origin }) =>
0: { name, fieldSchema, metadatas },
},
} = block;
const baselineAlignementSize = blockIndex === 0 ? '3px' : '0';
return (
<DynamicZone
key={blockIndex}
name={name}
fieldSchema={fieldSchema}
metadatas={metadatas}
/>
<>
<BaselineAlignement top size={baselineAlignementSize} />
<DynamicZone
key={blockIndex}
name={name}
fieldSchema={fieldSchema}
metadatas={metadatas}
/>
</>
);
}