Web:Files:Components: disable page scrolling on mobile device when sharing panel is open
This commit is contained in:
parent
ca353ee974
commit
477a8cfdc8
@ -3,6 +3,34 @@ import styled, { css } from "styled-components";
|
|||||||
|
|
||||||
import { isMobile, isMobileOnly } from "react-device-detect";
|
import { isMobile, isMobileOnly } from "react-device-detect";
|
||||||
|
|
||||||
|
const StyledContainer = styled.div`
|
||||||
|
transition: unset;
|
||||||
|
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
|
||||||
|
width: 480px;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
max-width: 480px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
background: #333333;
|
||||||
|
|
||||||
|
z-index: 311;
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
position: fixed;
|
||||||
|
top: unset;
|
||||||
|
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 64px);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
const StyledContent = styled.div`
|
const StyledContent = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -32,17 +60,6 @@ const StyledHeaderContent = styled.div`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
width: 100vw;
|
|
||||||
max-width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
${isMobileOnly &&
|
|
||||||
css`
|
|
||||||
width: 100vw;
|
|
||||||
max-width: 100vw;
|
|
||||||
`}
|
|
||||||
|
|
||||||
.sharing_panel-header-info {
|
.sharing_panel-header-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -364,6 +381,7 @@ const StyledModalFooter = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
StyledContainer,
|
||||||
StyledContent,
|
StyledContent,
|
||||||
StyledHeaderContent,
|
StyledHeaderContent,
|
||||||
StyledBodyContent,
|
StyledBodyContent,
|
||||||
|
@ -19,7 +19,11 @@ import withLoader from "../../../HOCs/withLoader";
|
|||||||
import ModalDialog from "@appserver/components/modal-dialog";
|
import ModalDialog from "@appserver/components/modal-dialog";
|
||||||
import EmbeddingBody from "../EmbeddingPanel/EmbeddingBody";
|
import EmbeddingBody from "../EmbeddingPanel/EmbeddingBody";
|
||||||
|
|
||||||
import { StyledContent, StyledModalFooter } from "./StyledSharingPanel";
|
import {
|
||||||
|
StyledContainer,
|
||||||
|
StyledContent,
|
||||||
|
StyledModalFooter,
|
||||||
|
} from "./StyledSharingPanel";
|
||||||
|
|
||||||
import Header from "./Header";
|
import Header from "./Header";
|
||||||
import Body from "./Body";
|
import Body from "./Body";
|
||||||
@ -712,18 +716,14 @@ class SharingPanelComponent extends React.Component {
|
|||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<StyledAsidePanel visible={visible}>
|
<>
|
||||||
<Backdrop
|
<Backdrop
|
||||||
onClick={this.onClose}
|
onClick={this.onClose}
|
||||||
visible={visible}
|
visible={visible}
|
||||||
zIndex={zIndex}
|
zIndex={zIndex}
|
||||||
isAside={true}
|
isAside={true}
|
||||||
/>
|
/>
|
||||||
<Aside
|
<StyledContainer className="header_aside-panel" visible={visible}>
|
||||||
className="header_aside-panel"
|
|
||||||
visible={visible}
|
|
||||||
withoutBodyScroll={true}
|
|
||||||
>
|
|
||||||
{!isLoading ? (
|
{!isLoading ? (
|
||||||
<StyledContent isNotifyUsers={isNotifyUsers}>
|
<StyledContent isNotifyUsers={isNotifyUsers}>
|
||||||
<Header
|
<Header
|
||||||
@ -770,7 +770,7 @@ class SharingPanelComponent extends React.Component {
|
|||||||
) : (
|
) : (
|
||||||
<SharingPanelLoader />
|
<SharingPanelLoader />
|
||||||
)}
|
)}
|
||||||
</Aside>
|
</StyledContainer>
|
||||||
|
|
||||||
{showAddUsersPanel && (
|
{showAddUsersPanel && (
|
||||||
<AddUsersPanel
|
<AddUsersPanel
|
||||||
@ -816,7 +816,7 @@ class SharingPanelComponent extends React.Component {
|
|||||||
embeddingLink={externalItem[0].sharedTo.shareLink}
|
embeddingLink={externalItem[0].sharedTo.shareLink}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</StyledAsidePanel>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -248,8 +248,8 @@ const StyledEmbeddingPanel = styled.div`
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: calc(100% - 64px);
|
height: calc(100vh - 64px);
|
||||||
}
|
}
|
||||||
|
|
||||||
${isMobileOnly &&
|
${isMobileOnly &&
|
||||||
@ -259,8 +259,8 @@ const StyledEmbeddingPanel = styled.div`
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: calc(100% - 64px);
|
height: calc(100vh - 64px);
|
||||||
`}
|
`}
|
||||||
}
|
}
|
||||||
${PanelStyles}
|
${PanelStyles}
|
||||||
|
Loading…
Reference in New Issue
Block a user