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

Web:Common:Components: remove fixed section header width and fix it for all device types

Browse Source
This commit is contained in:
Timofey Boyko 2022-04-07 17:27:48 +03:00
parent e2e335ae90
commit 2f218e6de2
2 changed files with 19 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/asc-web-common/components/Section/sub-components/section-container.js
View File

@ -22,7 +22,7 @@ const tabletProps = css`
${isMobileOnly &&
css`
padding: 0 16px;
margin: 0 -16px;
margin: 0 0 0 -16px;
`}
}
.section-body_filter {

53
packages/asc-web-common/components/Section/sub-components/section-header.js
View File

@ -11,59 +11,42 @@ import Base from "@appserver/components/themes/base";
const StyledSectionHeader = styled.div`
position: relative;
height: 53px;
min-height: 53px;
margin-right: 20px;
padding-right: 20px;
box-sizing: border-box;
${NoUserSelect}
display: grid;
align-items: center;
/* width: calc(100vw - 296px);
max-width: calc(100vw - 296px); */
width: ${(props) =>
props.infoPanelIsVisible ? "calc(100vw - 696px)" : "calc(100vw - 296px)"};
max-width: ${(props) =>
props.infoPanelIsVisible ? "calc(100vw - 696px)" : "calc(100vw - 296px)"};
width: 100%;
max-width: 100%;
@media ${tablet} {
width: ${(props) =>
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"};
max-width: ${(props) =>
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"};
height: 61px;
min-height: 61px;
margin-right: 0px !important;
padding-right: 16px;
margin-right: 0px;
}
${isMobile &&
css`
width: ${(props) =>
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"} !important;
max-width: ${(props) =>
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"} !important;
height: 61px !important;
min-height: 61px !important;
margin-right: 0px !important;
padding-right: 0 !important;
margin-right: -16px !important;
`}
@media ${mobile} {
width: calc(100vw - 32px) !important;
max-width: calc(100vw - 32px) !important;
height: 53px;
min-height: 53px;
margin-right: 0px !important;
margin-right: 0px;
}
${isMobileOnly &&
css`
width: calc(100vw - 32px) !important;
max-width: calc(100vw - 32px) !important;
height: 53px;
min-height: 53px;
margin-top: -2px;
margin-right: 0px !important;
width: 100vw !important;
max-width: 100vw !important;
padding-right: 16px !important;
margin-top: -2px !important;
`}
`;