Web: Files: Tiles: Different number of loaders on different screens

ONLYOFFICE · Dec 23, 2021 · 4f33443 · 4f33443
1 parent 1f4ce11
commit 4f33443
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/packages/asc-web-common/components/Loaders/TileLoader/StyledTileLoader.js b/packages/asc-web-common/components/Loaders/TileLoader/StyledTileLoader.js
@@ -1,11 +1,32 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { mobile, tablet, size } from "@appserver/components/utils/device";
 
 const StyledTile = styled.div`
   position: relative;
   display: grid;
   width: 100%;
   height: ${(props) => (props.isFolder ? "32px" : "220px")};
   border-radius: 3px;
+
+  @media ${mobile} {
+    &:nth-of-type(n + 3) {
+      display: none;
+    }
+
+    ${(props) =>
+      props.isFolder &&
+      css`
+        &:nth-of-type(n + 2) {
+          display: none;
+        }
+      `}
+  }
+
+  @media (min-width: ${size.mobile}px) and ${tablet} {
+    &:nth-of-type(n + 7) {
+      display: none;
+    }
+  }
 `;
 
 const StyledMainContent = styled.div`