added styled for desktop
This commit is contained in:
TatianaLopaeva
parent
271bfc1eb8
commit
fecb7383dd
BIN
web/ASC.Web.Client/public/images/Vector.png
Normal file
BIN
web/ASC.Web.Client/public/images/Vector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 B |
Binary file not shown.
|
After Width: | Height: | Size: 728 B |
Binary file not shown.
|
After Width: | Height: | Size: 265 B |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
@ -1,34 +1,90 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import { PageLayout, utils } from "asc-web-common";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import i18n from "./i18n";
|
||||
import { Loader, toastr, Text } from "asc-web-components";
|
||||
import { Loader, Button, Text, Link } from "asc-web-components";
|
||||
import styled from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
import { connect } from "react-redux";
|
||||
import version from "../../../../package.json";
|
||||
|
||||
const { changeLanguage } = utils;
|
||||
const supportLinkPurchaseQuestions = "sales@onlyoffice.com";
|
||||
const supportLinkTechnicalIssues = "https://helpdesk.onlyoffice.com";
|
||||
|
||||
const BodyStyle = styled.div`
|
||||
margin: 0 auto;
|
||||
width: 920px;
|
||||
.contact-emails {
|
||||
position: static;
|
||||
width: 920px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
.contact-emails_link {
|
||||
color: #316daa;
|
||||
}
|
||||
`;
|
||||
|
||||
const BodyAdvantages = styled.div`
|
||||
margin: 202px 232px 288px 388px;
|
||||
position: relative;
|
||||
margin-top: 56px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32px 32px 32px 0px;
|
||||
|
||||
position: static;
|
||||
width: 888px;
|
||||
height: 346px;
|
||||
height: 247px;
|
||||
position: static;
|
||||
|
||||
background: #f8f9f9;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
|
||||
.payments-icon-enterprise {
|
||||
position: absolute;
|
||||
margin-left: 577px;
|
||||
margin-left: 666px;
|
||||
}
|
||||
.first_icon {
|
||||
margin: 64px 864px 193px 32px;
|
||||
}
|
||||
.second_icon {
|
||||
margin: 104px 864px 193px 32px;
|
||||
}
|
||||
.third_icon {
|
||||
margin: 144px 864px 193px 32px;
|
||||
}
|
||||
.four_icon {
|
||||
margin: 184px 864px 193px 32px;
|
||||
}
|
||||
.five_icon {
|
||||
margin: 224px 864px 193px 32px;
|
||||
}
|
||||
.payments-body {
|
||||
margin-right: 609px;
|
||||
margin-bottom: 196px;
|
||||
margin-left: 64px;
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: #555f65;
|
||||
}
|
||||
.first-advantages {
|
||||
margin-top: 67px;
|
||||
width: 247px;
|
||||
}
|
||||
.second-advantages {
|
||||
margin-top: 107px;
|
||||
width: 278px;
|
||||
}
|
||||
.third-advantages {
|
||||
margin-top: 147px;
|
||||
width: 124px;
|
||||
}
|
||||
.four-advantages {
|
||||
margin-top: 187px;
|
||||
width: 366px;
|
||||
}
|
||||
.five-advantages {
|
||||
margin-top: 227px;
|
||||
width: 276px;
|
||||
}
|
||||
|
||||
.advantages-enterprise {
|
||||
position: static;
|
||||
width: 856px;
|
||||
@ -48,12 +104,47 @@ const BodyAdvantages = styled.div`
|
||||
margin: 0px 33px;
|
||||
}
|
||||
`;
|
||||
const VersionStyle = styled.div`
|
||||
background: #ffff;
|
||||
padding: 8px 0px 20px 0px;
|
||||
const HeaderStylePayments = styled.div`
|
||||
.payments-header {
|
||||
margin-top: 50px;
|
||||
height: 32px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 27px;
|
||||
line-height: 32px;
|
||||
color: #333333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.payments-header-additional_support {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.payments-header-additional_portals {
|
||||
margin-top: 12px;
|
||||
}
|
||||
`;
|
||||
const BodyStyle = styled.div`
|
||||
background: #ffff;
|
||||
const LicenseBlockStyle = styled.div`
|
||||
position: relative;
|
||||
background: #edf2f7;
|
||||
height: 108px;
|
||||
margin-bottom: 17px;
|
||||
.button-payments-enterprise {
|
||||
padding: 0px;
|
||||
background: #2da7db;
|
||||
color: white;
|
||||
height: 44px;
|
||||
font-style: SemiBold;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.button-buy {
|
||||
width: 107px;
|
||||
margin: 32px 781px 32px 32px;
|
||||
}
|
||||
.button-upload {
|
||||
position: absolute;
|
||||
width: 153px;
|
||||
margin: 32px 612px 32px 155px;
|
||||
}
|
||||
`;
|
||||
const Body = ({ modules, match, isLoaded }) => {
|
||||
const { t } = useTranslation("translation", { i18n });
|
||||
@ -67,23 +158,111 @@ const Body = ({ modules, match, isLoaded }) => {
|
||||
<Loader className="pageLoader" type="rombs" size="40px" />
|
||||
) : (
|
||||
<BodyStyle>
|
||||
<VersionStyle>
|
||||
<Text className="text_style" fontSize="14px" color="#A3A9AE">
|
||||
{`${t("AboutCompanyVersion")}: ${version.version}`}
|
||||
<HeaderStylePayments>
|
||||
<Text className="payments-header">
|
||||
You are using ONLYOFFICE Enterprise Edition
|
||||
</Text>
|
||||
</VersionStyle>
|
||||
<Text className="payments-header-additional_support">
|
||||
{t("SubscriptionAndUpdatesExpires")} 1 march 2021.
|
||||
</Text>
|
||||
<Text className="payments-header-additional_portals">
|
||||
Порталы, созданные вами: 1/2
|
||||
</Text>
|
||||
</HeaderStylePayments>
|
||||
<BodyAdvantages>
|
||||
<p className="advantages-enterprise">
|
||||
Активируйте ONLYOFFICE и получите:
|
||||
</p>
|
||||
<Text className="advantages-enterprise">
|
||||
Renew subscription to get:
|
||||
</Text>
|
||||
<Text className="payments-body first-advantages">
|
||||
ONLYOFFICE editors with pro features
|
||||
</Text>
|
||||
<Text className="payments-body second-advantages">
|
||||
Private Rooom for encrypted collaboretion
|
||||
</Text>
|
||||
<Text className="payments-body third-advantages">
|
||||
Mobile web editors
|
||||
</Text>
|
||||
<Text className="payments-body four-advantages">
|
||||
Regular functionality and security updates during 1 year
|
||||
</Text>
|
||||
<Text className="payments-body five-advantages">
|
||||
1 year of professional tech support service
|
||||
</Text>
|
||||
<img
|
||||
className="payments-icon-enterprise"
|
||||
src="images/payments_enterprise.png"
|
||||
width="311px"
|
||||
height="346px"
|
||||
width="222px"
|
||||
height="247px"
|
||||
alt="Logo"
|
||||
/>
|
||||
<img
|
||||
className="payments-icon-enterprise first_icon"
|
||||
src="images/payments_enterprise_icon_first.png"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Logo"
|
||||
/>
|
||||
<img
|
||||
className="payments-icon-enterprise second_icon"
|
||||
src="images/payments_enterprise_icon_first.png"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Logo"
|
||||
/>
|
||||
|
||||
<img
|
||||
className="payments-icon-enterprise
|
||||
third_icon"
|
||||
src="images/payments_enterprise_icon_four.png"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Logo"
|
||||
/>
|
||||
<img
|
||||
className="payments-icon-enterprise
|
||||
four_icon"
|
||||
src="images/payments_enterprise_icon_second.png"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Logo"
|
||||
/>
|
||||
<img
|
||||
className="payments-icon-enterprise
|
||||
five_icon"
|
||||
src="images/payments_enterprise_icon_third.png"
|
||||
width="24px"
|
||||
height="23px"
|
||||
alt="Logo"
|
||||
/>
|
||||
</BodyAdvantages>
|
||||
<LicenseBlockStyle>
|
||||
<Button
|
||||
className="button-payments-enterprise button-upload"
|
||||
label="Upload license"
|
||||
/>
|
||||
<Button
|
||||
className="button-payments-enterprise button-buy"
|
||||
label="Buy now"
|
||||
/>
|
||||
</LicenseBlockStyle>
|
||||
<Text className="contact-emails">
|
||||
{t("PurchaseQuestions")}{" "}
|
||||
<Link
|
||||
className="contact-emails_link"
|
||||
href={`mailto:${supportLinkPurchaseQuestions}`}
|
||||
>
|
||||
{supportLinkPurchaseQuestions}
|
||||
</Link>
|
||||
</Text>
|
||||
<Text className="contact-emails">
|
||||
{t("TechnicalIssues")}{" "}
|
||||
<Link
|
||||
className="contact-emails_link"
|
||||
href={`${supportLinkTechnicalIssues}`}
|
||||
>
|
||||
{supportLinkTechnicalIssues}
|
||||
</Link>
|
||||
</Text>
|
||||
</BodyStyle>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"AboutCompanyTitle": "About this program",
|
||||
"AboutCompanyVersion": "Version",
|
||||
"AboutCompanyLicensor": "Copyright",
|
||||
"PurchaseQuestions": "For any purchase questions, contact us at ",
|
||||
"TechnicalIssues": "For for solving technical issues, use",
|
||||
"SubscriptionAndUpdatesExpires": "Your subscription for support and updates expires on",
|
||||
"AboutCompanyAddressTitle": "address",
|
||||
"AboutCompanyEmailTitle": "email",
|
||||
"AboutCompanyTelTitle": "tel.",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user