fix adaptive size

This commit is contained in:
DmitriyB
2022-07-29 17:25:39 +05:00
parent dcedd8d7ce
commit 70dbfe309f
5 changed files with 57 additions and 6 deletions
+4
View File
@@ -138,5 +138,9 @@ export const LangDict = {
townName: {
ru: 'Екатеринбург, Россия',
en: 'Ekaterinburg, Russia'
},
back: {
ru: 'Назад',
en: 'Back'
}
};
+42 -1
View File
@@ -398,6 +398,23 @@
.plan-content-content {
margin: 2vw 0 1vw 0;
}
.plan-content-back-button-container {
gap: 10px;
width: 200px;
}
.plan-content-back-button-text {
font-size: 1vw;
}
.plan-content-back-button-icon {
width: .7vw;
height: .7w;
background-size: .7vw .7vw;
}
}
@media screen and (max-width: 1280px) {
@@ -493,7 +510,8 @@
}
.plan-content-content {
margin: 20px 0 16px 0;
margin: 16px 0 16px 0;
margin: 0;
}
.plan-content-title {
@@ -513,4 +531,27 @@
line-height: 17px;
}
.plan-content-back-button-text {
font-weight: 400;
font-size: 14px;
line-height: 130%;
}
.plan-content-date {
margin-top: 0px;
font-weight: 600;
font-size: 16px;
line-height: 110%;
}
.main-part-header-logo {
width: 40px;
height: 64px;
}
.main-part-header-logo.small {
width: 29px;
height: 46px;
}
}
+7 -3
View File
@@ -52,7 +52,7 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
if(planContent && !isRemoveLastElementHistry.current) {
history.current.push(planContent);
isRemoveLastElementHistry.current = false;
console.log(history.current.length, 'добавили 1')
// console.log(history.current.length, 'добавили 1')
}
}, [planContent])
@@ -77,7 +77,7 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
setPlanContent(history.current[history.current.length - 2]);
history.current.splice(history.current.length - 1, 1);
isRemoveLastElementHistry.current = true;
console.log(history.current.length, 'убрали 1')
// console.log(history.current.length, 'убрали 1')
}
}
@@ -216,7 +216,11 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
return <div className="main-part-container">
<div className="background-image"></div>
<MainPartHeader changeLang={(lang) => changeLang(lang)} onClickLogo={toMain}/>
<MainPartHeader
changeLang={(lang) => changeLang(lang)}
onClickLogo={toMain}
isSmallLogo={planContent ? true : false}
/>
<SwitchTransition mode="out-in">
<CSSTransition
key={changeContent.current}
+2 -1
View File
@@ -4,6 +4,7 @@ import whiteLogo from './logoWhiteIcon.svg';
type TProps = {
changeLang: (lang: 'ru' | 'en') => void
onClickLogo: () => void
isSmallLogo: boolean
}
export const MainPartHeader:React.FC<TProps> = React.memo((props) => {
@@ -15,7 +16,7 @@ export const MainPartHeader:React.FC<TProps> = React.memo((props) => {
}
return <div className="main-part-header">
<img className="main-part-header-logo" alt="logo" src={whiteLogo} onClick={() => props.onClickLogo()}/>
<img className={`main-part-header-logo ${props.isSmallLogo ? 'small' : null}`} alt="logo" src={whiteLogo} onClick={() => props.onClickLogo()}/>
<div className="main-part-header-lang">
<span className={`main-part-header-lang-button ${activeButton === 'en' ? 'active' : null}`} onClick={() => onClickChangeLang('en')}>EN</span>
<span className="main-part-header-lang-slash">/</span>
@@ -1,5 +1,6 @@
import React, { useContext } from "react";
import { ContextLang } from "../ContextLang";
import { LangDict } from "../langDict";
import { Legend } from "./legend";
type TProps = {
@@ -22,7 +23,7 @@ export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
return <div className="plan-content-container">
{props.showPrevButton && <div className="plan-content-back-button-container" onClick={() => props.toPrevState()}>
<span className="plan-content-back-button-icon"></span>
<span className="plan-content-back-button-text">Назад</span>
<span className="plan-content-back-button-text">{LangDict.back[lang]}</span>
</div>}
<span className="plan-content-title">{props.title[lang]}</span>
{