Web:Files:Components: disable page scrolling on mobile device when sharing panel is open

products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js

@@ -3,6 +3,34 @@ import styled, { css } from "styled-components";
 
 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`
   width: 100%;
   height: 100%;
@@ -32,17 +60,6 @@ const StyledHeaderContent = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  @media (max-width: 500px) {
-    width: 100vw;
-    max-width: 100vw;
-  }
-
-  ${isMobileOnly &&
-  css`
-    width: 100vw;
-    max-width: 100vw;
-  `}
-
   .sharing_panel-header-info {
     display: flex;
     align-items: center;
@@ -364,6 +381,7 @@ const StyledModalFooter = styled.div`
 `;
 
 export {
+  StyledContainer,
   StyledContent,
   StyledHeaderContent,
   StyledBodyContent,

products/ASC.Files/Client/src/components/panels/SharingPanel/index.js

@@ -19,7 +19,11 @@ import withLoader from "../../../HOCs/withLoader";
 import ModalDialog from "@appserver/components/modal-dialog";
 import EmbeddingBody from "../EmbeddingPanel/EmbeddingBody";
 
-import { StyledContent, StyledModalFooter } from "./StyledSharingPanel";
+import {
+  StyledContainer,
+  StyledContent,
+  StyledModalFooter,
+} from "./StyledSharingPanel";
 
 import Header from "./Header";
 import Body from "./Body";
@@ -712,18 +716,14 @@ class SharingPanelComponent extends React.Component {
             )}
           </>
         ) : (
-          <StyledAsidePanel visible={visible}>
+          <>
             <Backdrop
               onClick={this.onClose}
               visible={visible}
               zIndex={zIndex}
               isAside={true}
             />
-            <Aside
-              className="header_aside-panel"
-              visible={visible}
-              withoutBodyScroll={true}
-            >
+            <StyledContainer className="header_aside-panel" visible={visible}>
               {!isLoading ? (
                 <StyledContent isNotifyUsers={isNotifyUsers}>
                   <Header
@@ -770,7 +770,7 @@ class SharingPanelComponent extends React.Component {
               ) : (
                 <SharingPanelLoader />
               )}
-            </Aside>
+            </StyledContainer>
 
             {showAddUsersPanel && (
               <AddUsersPanel
@@ -816,7 +816,7 @@ class SharingPanelComponent extends React.Component {
                 embeddingLink={externalItem[0].sharedTo.shareLink}
               />
             )}
-          </StyledAsidePanel>
+          </>
         )}
       </>
     );

products/ASC.Files/Client/src/components/panels/StyledPanels.js

@@ -248,8 +248,8 @@ const StyledEmbeddingPanel = styled.div`
       bottom: 0;
       left: 0;
 
-      width: 100%;
-      height: calc(100% - 64px);
+      width: 100vw;
+      height: calc(100vh - 64px);
     }
 
     ${isMobileOnly &&
@@ -259,8 +259,8 @@ const StyledEmbeddingPanel = styled.div`
       bottom: 0;
       left: 0;
 
-      width: 100%;
-      height: calc(100% - 64px);
+      width: 100vw;
+      height: calc(100vh - 64px);
     `}
   }
   ${PanelStyles}