IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed style for header-container

Browse Source
This commit is contained in:
TatianaLopaeva 2020-09-09 11:22:44 +03:00
parent 46e9124f81
commit 957c7cd741
1 changed files with 194 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/advantages-container.js
View File

@ -5,7 +5,7 @@ import styled from "styled-components";
import { Text, utils } from "asc-web-components";
const { tablet } = utils.device;
const StyledBodyAdvantages = styled.div`
margin-top: 40px;
margin-top: 42px;
display: flex;
flex-direction: column;
@ -20,35 +20,37 @@ const StyledBodyAdvantages = styled.div`
.payments-icon-enterprise {
position: absolute;
margin-left: 666px;
z-index: 0;
}
/*
.first_icon {
margin: 64px 864px 193px 32px;
}
.second_icon {
margin: 104px 864px 193px 32px;
}
.third_icon {
margin: 144px 864px 193px 32px;
margin: 64px 0px 193px 32px;
} */
/* .second_icon {
margin: 104px 0px 193px 32px;
} */
/* .third_icon {
margin: 144px 0px 193px 32px;
}
.four_icon {
margin: 184px 864px 193px 32px;
margin: 184px 0px 193px 32px;
}
.five_icon {
margin: 224px 864px 193px 32px;
}
.payments-body {
/* margin-right: 609px; */
margin: 224px 0px 193px 32px;
} */
/* .payments-body {
/* margin-right: 609px;
margin-bottom: 22px;
margin-left: 64px;
font-weight: bold;
font-size: 13px;
color: #555f65;
}
.first-advantages {
} */
/* .first-advantages {
margin-top: 37px;
/* width: 247px; */
}
/* width: 247px;
} */
.second-advantages {
/* width: 278px; */
}
@ -69,76 +71,207 @@ const StyledBodyAdvantages = styled.div`
line-height: 30px;
margin: 0px 32px 0 32px;
}
.payments-body {
font-weight: bold;
font-size: 13px;
line-height: 16px;
}
.styled-advantages {
margin-top: 34px;
margin-left: 32px;
display: flex;
}
.styled-first-advantages {
margin-top: 34px;
margin-left: 32px;
display: flex;
}
.styled-second-advantages {
margin-top: 18px;
margin-left: 32px;
display: flex;
}
.styled-third-advantages {
margin-top: 17px;
margin-left: 32px;
display: flex;
}
.styled-four-advantages {
margin-top: 17px;
margin-left: 32px;
display: flex;
z-index: 1;
}
.styled-five-advantages {
margin-top: 17px;
margin-left: 32px;
display: flex;
}
.advantages {
margin-left: 8px;
margin-top: 4px;
}
/* .second-advantages {
margin-left: 8px;
margin-top: 4px;
}
.first-advantages {
margin-left: 8px;
margin-top: 4px;
}
.third-advantages {
margin-left: 8px;
margin-top: 4px;
}
.four-advantages {
margin-left: 8px;
margin-top: 4px;
}
.five-advantages {
margin-left: 8px;
margin-top: 4px;
} */
@media ${tablet} {
width: 568px;
height: 249px;
margin-top: 41px;
.main_icon {
display: none;
}
.advantages-enterprise {
width: 536px;
.styled-first-advantages {
margin-top: 33px;
margin-left: 32px;
display: flex;
}
.payments-body {
margin-bottom: 22px;
.styled-second-advantages {
margin-top: 17px;
margin-left: 32px;
display: flex;
}
.styled-third-advantages {
margin-top: 16px;
margin-left: 32px;
display: flex;
}
.styled-four-advantages {
margin-top: 16px;
margin-left: 32px;
display: flex;
z-index: 1;
}
.styled-five-advantages {
margin-top: 17px;
margin-left: 32px;
display: flex;
}
}
@media (max-width: 632px) {
margin-top: 16px;
width: 311px;
height: 301px;
.main_icon {
display: none;
.styled-first-advantages {
margin-top: 33px;
margin-left: 32px;
display: flex;
}
.advantages-enterprise {
width: 279px;
height: 60px;
.styled-second-advantages {
margin-top: 17px;
margin-left: 32px;
display: flex;
}
.payments-body {
width: 247px;
margin-bottom: 20px;
line-height: 16px;
font-weight: bold;
.styled-third-advantages {
margin-top: 16px;
margin-left: 32px;
display: flex;
}
.four-advantages {
margin-bottom: 16px;
.styled-four-advantages {
margin-top: 16px;
margin-left: 32px;
display: flex;
z-index: 1;
}
.first_icon {
margin: 93px 864px 193px 32px;
}
.second_icon {
margin: 133px 864px 193px 32px;
}
.third_icon {
margin: 182px 864px 193px 32px;
}
.four_icon {
margin: 220px 864px 193px 32px;
}
.five_icon {
margin: 269px 864px 193px 32px;
.styled-five-advantages {
margin-top: 17px;
margin-left: 32px;
display: flex;
}
}
`;
const StyledFirstAdvantages = styled.div``;
const StyledSecondAdvantages = styled.div``;
const AdvantagesContainer = ({ t }) => {
return (
<StyledBodyAdvantages>
<Text className="advantages-enterprise">{t("SubscriptionGet")}</Text>
<Text className="payments-body first-advantages">
{t("OnlyOfficeEditor")}
</Text>
<Text className="payments-body second-advantages">
{t("PrivateRooom")}
</Text>
<Text className="payments-body third-advantages">{t("WebEditors")}</Text>
<Text className="payments-body four-advantages">
{t("FunctionalityAndSecurity")}
</Text>
<Text className="payments-body five-advantages">
{t("ProfessionalTechSupport")}
</Text>
<div className="styled-first-advantages">
<img
className="first_icon"
src="images/payments_enterprise_cubes.svg"
width="24px"
height="23px"
alt="Icon"
/>
<Text className="payments-body advantages">
{t("OnlyOfficeEditor")}
</Text>
</div>
<div className="styled-second-advantages">
<img
className="second_icon"
src="images/payments_enterprise_lock.svg"
width="24px"
height="23px"
alt="Icon"
/>
<Text className="payments-body advantages">{t("PrivateRooom")}</Text>
</div>
<div className="styled-third-advantages">
<img
className="third_icon"
src="images/payments_enterprise_smartphone.svg"
width="24px"
height="23px"
alt="Icon"
/>
<Text className="payments-body advantages">{t("WebEditors")}</Text>
</div>
<div className="styled-four-advantages">
<img
className="four_icon"
src="images/payments_enterprise_update.svg"
width="24px"
height="23px"
alt="Icon"
/>
<Text className="payments-body advantages">
{t("FunctionalityAndSecurity")}
</Text>
</div>
<div className="styled-five-advantages">
<img
className="five_icon"
src="images/payments_enterprise_help.svg"
width="24px"
height="23px"
alt="Icon"
/>
<Text className="payments-body advantages">
{t("ProfessionalTechSupport")}
</Text>
</div>
<img
className="payments-icon-enterprise main_icon"
src="images/payments_enterprise.svg"
@ -146,45 +279,6 @@ const AdvantagesContainer = ({ t }) => {
height="247px"
alt="Icon"
/>
<img
className="payments-icon-enterprise first_icon"
src="images/payments_enterprise_cubes.svg"
width="24px"
height="23px"
alt="Icon"
/>
<img
className="payments-icon-enterprise second_icon"
src="images/payments_enterprise_lock.svg"
width="24px"
height="23px"
alt="Icon"
/>
<img
className="payments-icon-enterprise
third_icon"
src="images/payments_enterprise_smartphone.svg"
width="24px"
height="23px"
alt="Icon"
/>
<img
className="payments-icon-enterprise
four_icon"
src="images/payments_enterprise_update.svg"
width="24px"
height="23px"
alt="Icon"
/>
<img
className="payments-icon-enterprise
five_icon"
src="images/payments_enterprise_help.svg"
width="24px"
height="23px"
alt="Icon"
/>
</StyledBodyAdvantages>
);
};