Added adaptation for mobile
This commit is contained in:
parent
251c222c24
commit
745f3ed131
@ -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 }) => {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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 }) => {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user