Web: Files: Added adaptive layout.

products/ASC.Files/Client/src/components/panels/UploadPanel/FileList.js

@@ -4,23 +4,38 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList as List } from "react-window";
 import { inject, observer } from "mobx-react";
 import FileRow from "./FileRow";
+import { isMobile } from "react-device-detect";
 
 const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
   <CustomScrollbars stype="mediumBlack" {...props} forwardedRef={ref} />
 ));
+
+const mobileRowHeight = 48;
+const desktopRowHeight = 40;
 const FileList = ({ uploadDataFiles }) => {
   const [rowSizes, setRowSizes] = useState({});
   const listRef = useRef(null);
   const onUpdateHeight = (i, showInput) => {
+    const mobileHeight = showInput ? 92 : mobileRowHeight;
+    const desktopHeight = showInput ? 88 : desktopRowHeight;
+
     if (listRef.current) {
       listRef.current.resetAfterIndex(i);
     }
-    setRowSizes((prevState) => ({ ...prevState, [i]: showInput ? 88 : 40 }));
+    setRowSizes((prevState) => ({
+      ...prevState,
+      [i]: isMobile ? mobileHeight : desktopHeight,
+    }));
   };
 
   const getSize = (i) => {
     console.log("getSize", i, rowSizes[i]);
-    return rowSizes[i] ? rowSizes[i] : 40;
+    console.log("isMobile", isMobile);
+    return rowSizes[i]
+      ? rowSizes[i]
+      : isMobile
+      ? mobileRowHeight
+      : desktopRowHeight;
   };
 
   const renderRow = useCallback(({ data, index, style }) => {

products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js

@@ -9,6 +9,7 @@ import { withTranslation } from "react-i18next";
 import PasswordInput from "./PasswordInput";
 import ErrorFileUpload from "./ErrorFileUpload.js";
 import ActionsUploadedFile from "./ActionsUploadedFile";
+import { isMobile } from "react-device-detect";
 
 const StyledFileRow = styled(Row)`
   /* margin: 0 16px; */
@@ -19,20 +20,30 @@ const StyledFileRow = styled(Row)`
   padding-right: 16px;
   padding-left: 16px;
 
-  min-height: 40px;
+  ${!isMobile && "min-height: 40px;"}
+
   height: 100%;
 
   .styled-element,
   .row_content {
-    ${(props) => props.showPasswordInput && "margin-top: -49px"}
+    ${(props) =>
+      props.showPasswordInput &&
+      css`
+        margin-top: ${isMobile ? "-45px" : "-49px"};
+      `}
   }
-
   .password-input {
     position: absolute;
     top: 44px;
     left: 16px;
-    width: 382px;
+    max-width: 470px;
+    width: calc(100% - 32px);
+    .conversation-password-wrapper {
+      max-width: 470px;
+      width: 100%;
+    }
   }
+
   .row_content > a,
   .row_content > p {
     margin: auto 0;
@@ -58,6 +69,7 @@ const StyledFileRow = styled(Row)`
     .enter-password {
       margin-right: 8px;
       text-decoration: underline dashed;
+      cursor: pointer;
     }
   }
 

products/ASC.Files/Client/src/components/panels/UploadPanel/PasswordInput.js

@@ -12,9 +12,15 @@ const StyledBody = styled.div`
   #conversion-button {
     margin-left: 8px;
     background-color: #a6dcf2;
+    width: 100%;
+    max-width: 78px;
   }
   #conversion-password {
-    width: 382px;
+    max-width: 382px;
+    width: 100%;
+  }
+  .conversion-input {
+    width: 100%;
   }
 `;
 const PasswordComponent = ({
@@ -66,10 +72,11 @@ const PasswordComponent = ({
   };
 
   return (
-    <StyledBody>
+    <StyledBody className="conversation-password-wrapper">
       <PasswordInput
         simpleView
         id="conversion-password"
+        className="conversion-input"
         type="password"
         inputValue={password}
         onChange={onChangePassword}