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

Refactoring styles

Browse Source
This commit is contained in:
TatianaLopaeva 2020-09-22 10:31:33 +03:00
parent a6b602851b
commit 87ee165027
5 changed files with 51 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js
View File

@ -24,23 +24,23 @@ const i18n = createI18N({
});
const { setCurrentProductId } = store.auth.actions;
const { changeLanguage, changeDocumentTitle } = utils;
const { tablet } = Utils.device;
const { tablet, size } = Utils.device;
const StyledBody = styled.div`
margin: 0 auto;
max-width: 920px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(4, min-content);
@media ${tablet} {
max-width: 600px;
margin: 0 auto;
max-width: ${size.smallTablet}px;
}
@media (max-width: 632px) {
/* max-width: 343px; */
margin: 0 auto;
min-width: ${size.mobile}px;
}
`;
class Body extends React.PureComponent {
class Body extends React.Component {
constructor(props) {
super(props);
const { t, organizationName } = this.props;

138
web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/advantagesContainer.js
View File

@ -1,8 +1,8 @@
import React, { useEffect } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { utils } from "asc-web-common";
import { Text, utils as Utils } from "asc-web-components";
import { Text, utils as Utils, Box } from "asc-web-components";
import { createI18N } from "../../../../helpers/i18n";
import { useTranslation } from "react-i18next";
const { changeLanguage } = utils;
@ -12,13 +12,10 @@ const i18n = createI18N({
page: "PaymentsEnterprise",
localesPath: "pages/PaymentsEnterprise",
});
const StyledBodyAdvantages = styled.div`
display: grid;
padding-left: 32px;
padding-top: 32px;
padding-right: 8px;
/* max-width: 880px; */
height: 279px;
padding: 32px;
grid-template-areas:
"header header"
"firstI first"
@ -27,11 +24,16 @@ const StyledBodyAdvantages = styled.div`
"fourI four"
"fiveI five";
grid-template-columns: 2.7% max-content;
grid-template-rows: 11.6% 2.9% 2.8% 2.8% 2.8% 1.1%;
grid-row-gap: 32px;
grid-column-gap: 5px;
.wrapper {
display: flex;
align-items: center;
}
grid-template-columns: 24px 1fr;
grid-template-rows: min-content min-content;
grid-auto-rows: min-content;
grid-row-gap: 18px;
grid-column-gap: 8px;
margin: 0;
background: #f8f9f9;
.advantages {
@ -52,35 +54,31 @@ const StyledBodyAdvantages = styled.div`
.first-advantages {
grid-area: first;
z-index: 1;
padding: 3px;
}
.first_icon {
grid-area: firstI;
}
.second-advantages {
grid-area: second;
padding: 3px;
z-index: 1;
}
.third-advantages {
grid-area: third;
padding: 3px;
z-index: 1;
}
.four-advantages {
grid-area: four;
padding: 3px;
z-index: 1;
}
.five-advantages {
grid-area: five;
padding: 3px;
z-index: 1;
}
.header-advantages {
grid-area: header;
z-index: 1;
}
.first_icon {
grid-area: firstI;
}
.second_icon {
grid-area: secondI;
}
@ -94,97 +92,14 @@ const StyledBodyAdvantages = styled.div`
grid-area: fiveI;
}
@media ${tablet} {
/* width: minmax(280px, 560px); */
max-width: 600px;
height: 100%;
/* margin-right: 32px; */
grid-template-columns: 2.7% 90.3%;
grid-template-rows: min-content min-content;
grid-auto-rows: min-content;
grid-row-gap: 12px;
grid-column-gap: 5px;
.main_icon {
display: none;
}
.header-advantages {
margin-bottom: 21px;
}
.first-advantages {
padding-left: 12px;
margin-bottom: 6px;
padding-top: 3px;
}
.four-advantages {
padding-left: 5px;
}
.second-advantages {
padding-left: 12px;
margin-bottom: 6px;
padding-top: 3px;
}
.third-advantages {
padding-left: 12px;
margin-bottom: 6px;
padding-top: 3px;
}
.four-advantages {
padding-left: 12px;
padding-top: 3px;
margin-bottom: 6px;
}
.five-advantages {
padding-left: 11px;
padding-top: 3px;
margin-bottom: 33px;
}
}
@media (max-width: 632px) {
padding-right: 32px;
/* width: 280px; */
height: 100%;
grid-template-columns: 7.9% 92.1%;
/* grid-template-rows: 21% 2.8% 5.3% 1.5% 5.1% 40.1%; */
grid-template-rows: min-content auto;
grid-auto-rows: min-content;
/* grid-template-columns: min-content auto;
grid-auto-columns: min-content; */
/* grid-template-columns: 7.9% 92.1%; */
/* grid-column-gap: 5px; */
grid-row-gap: 10px;
.header-advantages {
margin-bottom: 23px;
}
.first-advantages {
padding-left: 5px;
margin-bottom: 6px;
/* padding-top: 0; */
}
.four-advantages {
padding-left: 5px;
}
.second-advantages {
padding-left: 5px;
margin-bottom: 5px;
padding-top: 0px;
}
.third-advantages {
padding-left: 5px;
margin-bottom: 6px;
padding-right: 0px;
}
.four-advantages {
padding-left: 5px;
padding-top: 0px;
}
.five-advantages {
padding-left: 5px;
padding-top: 0px;
margin-bottom: 28px;
}
grid-row-gap: 20px;
grid-column-gap: 12px;
}
`;
@ -204,10 +119,11 @@ const AdvantagesContainer = () => {
height="23px"
alt="Icon_cubes"
/>
<Box className="wrapper">
<Text className="first-advantages advantages">
{t("OnlyOfficeEditor")}
</Text>
</Box>
<img
className="second_icon"
src="images/payments_enterprise_lock.svg"
@ -215,7 +131,11 @@ const AdvantagesContainer = () => {
height="23px"
alt="Icon_lock"
/>
<Text className="second-advantages advantages">{t("PrivateRooom")}</Text>
<Box className="wrapper">
<Text className="second-advantages advantages">
{t("PrivateRooom")}
</Text>
</Box>
<img
className="third_icon"
src="images/payments_enterprise_smartphone.svg"
@ -223,7 +143,9 @@ const AdvantagesContainer = () => {
height="23px"
alt="Icon_smartphone"
/>
<Box className="wrapper">
<Text className="third-advantages advantages">{t("WebEditors")}</Text>
</Box>
<img
className="four_icon"
src="images/payments_enterprise_update.svg"
@ -231,9 +153,11 @@ const AdvantagesContainer = () => {
height="23px"
alt="Icon_update"
/>
<Box className="wrapper">
<Text className="four-advantages advantages">
{t("FunctionalityAndSecurity")}
</Text>
</Box>
<img
className="five_icon"
src="images/payments_enterprise_help.svg"
@ -241,9 +165,11 @@ const AdvantagesContainer = () => {
height="23px"
alt="Icon_help"
/>
<Box className="wrapper">
<Text className="five-advantages advantages">
{t("ProfessionalTechSupport")}
</Text>
</Box>
<img
className="payments-icon-enterprise main_icon"
src="images/payments_enterprise.svg"

2
web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/buttonContainer.js
View File

@ -41,7 +41,6 @@ const StyledButtonContainer = styled.div`
display: none;
}
@media ${tablet} {
max-width: 600px;
height: 168px;
display: grid;
.button-buy {
@ -58,7 +57,6 @@ const StyledButtonContainer = styled.div`
}
}
@media (max-width: 632px) {
min-width: 343px;
height: 168px;
margin-bottom: 16px;
.button-buy {

5
web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/contactContainer.js
View File

@ -16,7 +16,7 @@ const i18n = createI18N({
const StyledContactContainer = styled.div`
display: grid;
max-width: 600px;
.contact-emails {
position: static;
margin-bottom: 11px;
@ -26,13 +26,10 @@ const StyledContactContainer = styled.div`
}
@media (max-width: 632px) {
min-width: 343px;
.contact-emails {
margin-bottom: 10px;
}
.contact-emails_link {
/* display: block; */
margin-top: 3px;
}
}

4
web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/headerContainer.js
View File

@ -34,7 +34,6 @@ const StyledHeader = styled.div`
@media ${tablet} {
display: grid;
max-width: 600px;
.payments-header {
margin-top: 39px;
font-style: normal;
@ -45,7 +44,6 @@ const StyledHeader = styled.div`
}
@media (max-width: 632px) {
min-width: 343px;
.payments-header {
margin-top: 1px;
}
@ -65,7 +63,7 @@ const HeaderContainer = ({
changeLanguage(i18n);
const moment = require("moment");
require("moment/min/locales.min");
moment.locale(culture);
culture && moment.locale(culture);
}, [culture]);
const { t } = useTranslation("translation", { i18n });