fix adaptive size
This commit is contained in:
@@ -138,5 +138,9 @@ export const LangDict = {
|
||||
townName: {
|
||||
ru: 'Екатеринбург, Россия',
|
||||
en: 'Ekaterinburg, Russia'
|
||||
},
|
||||
back: {
|
||||
ru: 'Назад',
|
||||
en: 'Back'
|
||||
}
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user