IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed EmptyContentDescriptionContainer to using only Text.Body component

Browse Source
This commit is contained in:
Ivan Habarov 2019-11-07 11:21:57 +03:00
parent ca1f100a02
commit 6a0634c97b
1 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/ASC.Web.Components/src/components/empty-screen-container/index.js
View File

@ -16,37 +16,46 @@ const EmptyContentBody = styled.div`
display: grid;
grid-template-areas:
"img header"
"img main"
"img desc"
"img button";
grid-template-rows: auto auto auto;
grid-template-columns: 150px 1fr;
min-width: 320px;
max-width: 742px;
.ec-body {
.ec-header {
grid-area: header;
}
.ec-desc {
grid-area: desc;
padding-top: 5px;
}
@media (max-height: 400px) and (orientation: landscape){
padding: 20px;
.ec-header {
font-size: 18px;
}
.ec-desc {
font-size: 2.25vw;
}
}
@media ${mobile} {
grid-template-areas:
"header"
"main"
"desc"
"button";
grid-template-columns: 1fr;
padding: 20px;
.ec-body {
.ec-header {
font-size: 18px;
}
}
@media (max-height: 400px) and (orientation: landscape){
padding: 20px;
.ec-body {
font-size: 18px;
}
}
`;
const EmptyContentImage = styled.img.attrs(props => ({
@ -66,17 +75,6 @@ const EmptyContentImage = styled.img.attrs(props => ({
}
`;
const EmptyContentDescriptionContainer = styled.div`
grid-area: main;
padding-top: 5px;
@media (max-height: 400px) and (orientation: landscape){
span {
font-size: 2.25vw;
}
}
`;
const EmptyContentButtonsContainer = styled.div`
grid-area: button;
padding-top: 10px;
@ -91,13 +89,11 @@ const EmptyScreenContainer = props => {
<EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} />
{headerText && (
<Text.Body as="span" color="#333333" fontSize={24} className="ec-body">{headerText}</Text.Body>
<Text.Body as="span" color="#333333" fontSize={24} className="ec-header">{headerText}</Text.Body>
)}
{descriptionText && (
<EmptyContentDescriptionContainer>
<Text.Body as="span" color="#737373" fontSize={14}>{descriptionText}</Text.Body>
</EmptyContentDescriptionContainer>
{descriptionText && (
<Text.Body as="span" color="#737373" fontSize={14} className="ec-desc">{descriptionText}</Text.Body>
)}
{buttons && (