Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

web/ASC.Web.Components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.159",
+  "version": "1.0.160",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
   "main": "dist/asc-web-components.js",

web/ASC.Web.Components/src/components/empty-screen-container/index.js

@@ -2,15 +2,78 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { Text } from '../text';
+import { mobile } from '../../utils/device'
 
 const EmptyContentContainer = styled.div`
-  padding-top: 50px;
-  margin: 0 auto;
-  width: 687px;
-  text-align: center;
-  color: #373737;
-  padding: 100px 0;
-  min-width: 200px;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+const EmptyContentBody = styled.div`
+	display: grid;
+	grid-template-areas: 
+    "img header"
+    "img desc"
+    "img button";
+	grid-template-rows: auto auto auto;
+  grid-template-columns: 150px 1fr;
+  min-width: 320px;
+  max-width: 742px;
+
+  .ec-image {
+    grid-area: img;
+    margin: auto 0;
+  }
+
+  .ec-header {
+    grid-area: header;
+  }
+
+  .ec-desc {
+    grid-area: desc; 
+    padding-top: 5px;
+  }
+
+  .ec-buttons {
+    grid-area: button; 
+    padding-top: 10px;
+  }
+
+  @media (max-height: 400px) and (orientation: landscape){
+    padding: 20px;
+
+    .ec-image {
+      height: 40vh;
+    }
+
+    .ec-header {
+      font-size: 18px;
+    }
+
+    .ec-desc {
+      font-size: 2.25vw; 
+    }
+  }
+
+  @media ${mobile} {
+    grid-template-areas: 
+    "header"
+    "desc"
+    "button";
+    grid-template-columns: 1fr;
+    padding: 20px;
+
+    .ec-image {
+      display: none;
+    }
+
+    .ec-header {
+      font-size: 18px;
+    }
+  } 
 `;
 
 const EmptyContentImage = styled.img.attrs(props => ({
@@ -18,55 +81,31 @@ const EmptyContentImage = styled.img.attrs(props => ({
   alt: props.imageAlt
 }))`
   background: no-repeat 0 0 transparent;
-  display: block;
-  height: 150px;
-  width: 150px;
-`;
-
-const EmptyContentBodyContainer = styled.div`
-  text-align: left;
-  padding: 10px;
-`;
-
-const EmptyContentDescriptionContainer = styled.div`
-  margin: 14px auto 0;
-  max-width: 600px;
-`;
-
-const EmptyContentButtonsContainer = styled.div`
-  margin-top: 18px;
 `;
 
 const EmptyScreenContainer = props => {
   const { imageSrc, imageAlt, headerText, descriptionText, buttons } = props;
   return (
-    <EmptyContentContainer {...props}>
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} />
-            </td>
-            <td>
-              <EmptyContentBodyContainer>
-                {headerText && (
-                  <Text.Body as="div" color="#333333" fontSize={24}>{headerText}</Text.Body>
-                )}
-                {descriptionText && (
-                  <EmptyContentDescriptionContainer>
-                    <Text.Body as="span" color="#737373" fontSize={14}>{descriptionText}</Text.Body>
-                  </EmptyContentDescriptionContainer>
-                )}
-                {buttons && (
-                  <EmptyContentButtonsContainer>
-                    {buttons}
-                  </EmptyContentButtonsContainer>
-                )}
-              </EmptyContentBodyContainer>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <EmptyContentContainer>
+      <EmptyContentBody {...props}>
+
+        <EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} className="ec-image"/>
+
+        {headerText && (
+          <Text.Body as="span" color="#333333" fontSize={24} className="ec-header">{headerText}</Text.Body>
+        )}
+        
+        {descriptionText && (          
+          <Text.Body as="span" color="#737373" fontSize={14} className="ec-desc">{descriptionText}</Text.Body>
+        )}
+
+        {buttons && (
+          <div className="ec-buttons">
+            {buttons}
+          </div>
+        )}
+
+      </EmptyContentBody>
     </EmptyContentContainer>
   );
 };