Web: Files/People: Home: Fixed the displaying load of section header
This commit is contained in:
parent
2bb8502526
commit
aa6eebb51b
@ -62,25 +62,30 @@ const { Consumer } = utils.context;
|
||||
const StyledContainer = styled.div`
|
||||
.header-container {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder
|
||||
? "auto auto 1fr"
|
||||
: props.canCreate
|
||||
? "auto auto auto auto 1fr"
|
||||
: "auto auto auto 1fr"};
|
||||
${(props) =>
|
||||
props.title &&
|
||||
css`
|
||||
display: grid;
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder
|
||||
? "auto auto 1fr"
|
||||
: props.canCreate
|
||||
? "auto auto auto auto 1fr"
|
||||
: "auto auto auto 1fr"};
|
||||
|
||||
@media ${tablet} {
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder
|
||||
? "1fr auto"
|
||||
: props.canCreate
|
||||
? "auto 1fr auto auto"
|
||||
: "auto 1fr auto"};
|
||||
}
|
||||
`}
|
||||
align-items: center;
|
||||
max-width: calc(100vw - 32px);
|
||||
|
||||
@media ${tablet} {
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder
|
||||
? "1fr auto"
|
||||
: props.canCreate
|
||||
? "auto 1fr auto auto"
|
||||
: "auto 1fr auto"};
|
||||
|
||||
.headline-header {
|
||||
margin-left: -1px;
|
||||
}
|
||||
@ -528,6 +533,7 @@ class SectionHeaderContent extends React.Component {
|
||||
width={context.sectionWidth}
|
||||
isRootFolder={isRootFolder}
|
||||
canCreate={canCreate}
|
||||
title={title}
|
||||
>
|
||||
{isHeaderVisible ? (
|
||||
<div className="group-button-menu-container">
|
||||
|
@ -75,15 +75,20 @@ const StyledContainer = styled.div`
|
||||
|
||||
.header-container {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
${(props) =>
|
||||
props.isLoaded &&
|
||||
css`
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
|
||||
@media ${tablet} {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
`}
|
||||
|
||||
align-items: center;
|
||||
max-width: calc(100vw - 32px);
|
||||
|
||||
@media ${tablet} {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin-left: 16px;
|
||||
|
||||
@ -356,6 +361,7 @@ const SectionHeaderContent = (props) => {
|
||||
{(context) => (
|
||||
<StyledContainer
|
||||
isHeaderVisible={isHeaderVisible}
|
||||
isLoaded={isLoaded}
|
||||
width={context.sectionWidth}
|
||||
>
|
||||
{employeeDialogVisible && (
|
||||
|
Loading…
Reference in New Issue
Block a user