Web: Common: Changed the logic of displaying downloads for tablet / mobile (removed jumps when downloading)

web/ASC.Web.Common/src/components/NavMenu/index.js

@@ -5,29 +5,35 @@ import { Backdrop, Toast, Aside, utils } from "asc-web-components";
 import Header from "./sub-components/header";
 import HeaderNav from "./sub-components/header-nav";
 import HeaderUnAuth from "./sub-components/header-unauth";
-
 import { I18nextProvider, withTranslation } from "react-i18next";
 import i18n from "./i18n";
 import { connect } from "react-redux";
-
 import { withRouter } from "react-router";
-
 import { getLanguage } from "../../store/auth/selectors";
 import Loaders from "../Loaders";
 
 const backgroundColor = "#0F4071";
-const { size } = utils.device;
+const { tablet } = utils.device;
+
 const StyledContainer = styled.header`
   align-items: center;
   background-color: ${backgroundColor};
 
-  ${(props) =>
-    props.isTablet &&
-    !props.isLoaded &&
-    css`
-      margin-right: -16px; /* It is a opposite value of padding-right of custom scroll bar,
+  @media ${tablet} {
+    ${(props) =>
+      !props.isLoaded
+        ? css`
+            position: static;
+
+            margin-right: -16px; /* It is a opposite value of padding-right of custom scroll bar,
        so that there is no white bar in the header on loading. (padding-right: 16px)*/
-    `}
+          `
+        : css`
+            position: fixed;
+            z-index: 160;
+            width: 100%;
+          `}
+  }
 `;
 
 class NavMenu extends React.Component {
@@ -112,12 +118,10 @@ class NavMenu extends React.Component {
 
     const isAsideAvailable = !!asideContent;
 
-    const isTablet = window.innerWidth <= size.tablet;
-
     console.log("NavMenu render", this.state, this.props);
 
     return (
-      <StyledContainer isLoaded={isLoaded} isTablet={isTablet}>
+      <StyledContainer isLoaded={isLoaded}>
         <Toast />
 
         <Backdrop visible={isBackdropVisible} onClick={this.backdropClick} />

web/ASC.Web.Common/src/components/NavMenu/sub-components/header-unauth.js

@@ -22,28 +22,16 @@ const Header = styled.header`
   padding: 0 32px;
 
   @media ${tablet} {
-    z-index: 160;
     transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
     -moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
     -ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
     -webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
     -o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
 
-    ${(props) =>
-      isSafari
-        ? props.isLoaded
-          ? css`
-              position: fixed;
-              top: ${(props) => (props.valueTop ? "0" : "-56px")};
-            `
-          : css`
-              margin-top: 2px;
-            `
-        : css`
-            position: fixed;
-            top: ${(props) => (props.valueTop ? "0" : "-56px")};
-          `};
+    position: inherit;
+    top: ${(props) => (props.valueTop ? "0" : "-56px")};
   }
+
   .header-items-wrapper {
     width: 960px;
 

web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js

@@ -32,8 +32,7 @@ const Header = styled.header`
   height: 56px;
 
   @media ${tablet} {
-    position: fixed;
-    z-index: 160;
+    position: inherit;
 
     transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
     -moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js

@@ -22,7 +22,7 @@ const commonStyles = css`
 
     @media ${tablet} {
       padding: 16px 0 16px 24px;
-      margin-top: ${(props) => (props.isLoaded ? "104px" : "2px")};
+      margin-top: ${(props) => props.isLoaded && "104px"};
     }
 
     .section-wrapper {

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js

@@ -3,7 +3,6 @@ import styled, { css } from "styled-components";
 import { utils } from "asc-web-components";
 import isEqual from "lodash/isEqual";
 import classnames from "classnames";
-import { isSafari } from "react-device-detect";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { LayoutContextConsumer } from "../../Layout/context";
@@ -23,19 +22,11 @@ const StyledSectionHeader = styled.div`
     border-bottom: none;
 
     ${(props) =>
-      isSafari
-        ? props.isLoaded
-          ? css`
-              position: absolute;
-              top: 56px;
-            `
-          : css`
-              position: none;
-            `
-        : css`
-            position: absolute;
-            top: 56px;
-          `};
+      props.isLoaded &&
+      css`
+        position: absolute;
+        top: 56px;
+      `}
 
     ${(props) =>
       props.borderBottom &&
@@ -44,6 +35,7 @@ const StyledSectionHeader = styled.div`
       padding-bottom: 16px
     `};
     height: 49px;
+    width: ${(props) => !props.isLoaded && "100%"};
   }
 
   .section-header {
@@ -51,31 +43,19 @@ const StyledSectionHeader = styled.div`
 
     @media ${tablet} {
       max-width: calc(100vw - 32px);
-      width: ${(props) =>
-        props.isArticlePinned ? `calc(100% - 272px)` : "100%"};
-
-      background-color: #fff;
-
-      ${(props) =>
-        isSafari
-          ? props.isLoaded
-            ? css`
-                position: fixed;
-                top: ${(props) => (!props.isHeaderVisible ? "56px" : "0")};
-              `
-            : css`
-                margin-top: 2px;
-              `
-          : css`
-              position: fixed;
-              top: ${(props) => (!props.isHeaderVisible ? "56px" : "0")};
-            `};
-
-      z-index: 155;
-
-      padding-right: 16px;
-
+      width: 100%;
       padding-top: 4px;
+      ${(props) =>
+        props.isLoaded &&
+        css`
+          position: fixed;
+          top: ${(props) => (!props.isHeaderVisible ? "56px" : "0")};
+          width: ${(props) =>
+            props.isArticlePinned ? `calc(100% - 272px)` : "100%"};
+          background-color: #fff;
+          z-index: 155;
+          padding-right: 16px;
+        `}
     }
 
     h1,
@@ -142,7 +122,6 @@ class SectionHeader extends React.Component {
         borderBottom={borderBottom}
         isLoaded={isLoaded}
       >
-        {console.log("isLoaded", isLoaded)}
         <LayoutContextConsumer>
           {(value) => (
             <div