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

Added adaptation for mobile

Browse Source
This commit is contained in:
TatianaLopaeva 2020-08-28 10:32:25 +03:00
parent 251c222c24
commit 745f3ed131
5 changed files with 58 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@ const i18n = createI18N({
});
const { changeLanguage } = utils;
const { tablet } = Utils.device;
const { tablet, mobile } = Utils.device;
const StyledBody = styled.div`
margin: 0 auto;
@ -30,6 +30,10 @@ const StyledBody = styled.div`
width: 600px;
margin: 0 auto;
}
@media ${mobile} {
width: 343px;
margin: 0 auto;
}
`;
const Body = ({ standAloneMode, isLoaded }) => {

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

@ -83,7 +83,7 @@ const StyledBodyAdvantages = styled.div`
@media ${mobile} {
margin-top: 16px;
width: 311px;
height: 333px;
height: 301px;
.main_icon {
display: none;
}
@ -92,8 +92,28 @@ const StyledBodyAdvantages = styled.div`
height: 60px;
}
.payments-body {
width: 247px;
margin-bottom: 20px;
line-height: 16px;
font-weight: bold;
}
.four-advantages {
margin-bottom: 16px;
}
.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;
}
}
`;

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

@ -5,7 +5,7 @@ import styled from "styled-components";
import { Button, utils } from "asc-web-components";
import { store, history } from "asc-web-common";
const { getPortalSettings, setIsLoaded } = store.auth.actions;
const { tablet } = utils.device;
const { tablet, mobile } = utils.device;
const onButtonClickBuy = (e) => {
getPortalSettings(store.dispatch)
.then(() => store.dispatch(setIsLoaded(true)))
@ -49,6 +49,22 @@ const StyledButtonContainer = styled.div`
width: 536px;
margin: 0px 32px 32px 32px;
border-radius: 3px;
}
}
@media ${mobile} {
width: 343px;
height: 168px;
.button-buy {
width: 279px;
margin: 32px 32px 16px 32px;
border-radius: 3px;
}
.button-upload {
width: 279px;
margin: 0px 32px 32px 32px;
border-radius: 3px;
}
}

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

@ -2,10 +2,10 @@ import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { Text, Link } from "asc-web-components";
import { Text, Link, utils } from "asc-web-components";
const supportLinkPurchaseQuestions = "sales@onlyoffice.com";
const supportLinkTechnicalIssues = "https://helpdesk.onlyoffice.com";
const { tablet, mobile } = utils.device;
const StyledContactContainer = styled.div`
.contact-emails {
position: static;
@ -15,6 +15,13 @@ const StyledContactContainer = styled.div`
.contact-emails_link {
color: #316daa;
}
@media ${mobile} {
width: 343px;
.contact-emails_link {
display: block;
}
}
`;
const ContactContainer = ({ t }) => {

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

@ -19,10 +19,8 @@ const StyledHeader = styled.div`
margin-bottom: 8px;
}
.payments-header-additional_support {
margin-top: 8px;
}
.payments-header-additional_portals {
margin-top: 13px;
}
@media ${tablet} {
@ -51,6 +49,9 @@ const StyledHeader = styled.div`
margin-top: 0px;
height: 96px;
}
.sd {
height: 70px;
}
.payments-header-additional_support {
width: 343px;
line-height: 20px;
@ -58,6 +59,9 @@ const StyledHeader = styled.div`
font-style: normal;
font-weight: normal;
}
.payments-header-additional_portals {
margin-top: 10px;
}
}
`;