From 70dbfe309f0953c55e880a2441bf6efc55351c3d Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Fri, 29 Jul 2022 17:25:39 +0500
Subject: [PATCH] fix adaptive size

---
 src/components/langDict.tsx                   |  4 ++
 src/components/mainPart/mainPart.css          | 43 ++++++++++++++++++-
 src/components/mainPart/mainPart.tsx          | 10 +++--
 src/components/mainPart/mainPartHeader.tsx    |  3 +-
 .../mainPart/planContentContainer.tsx         |  3 +-
 5 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/components/langDict.tsx b/src/components/langDict.tsx
index 3b23e6f..82fc475 100644
--- a/src/components/langDict.tsx
+++ b/src/components/langDict.tsx
@@ -138,5 +138,9 @@ export const LangDict = {
     townName: {
         ru: 'Екатеринбург, Россия',
         en: 'Ekaterinburg, Russia'
+    },
+    back: {
+        ru: 'Назад',
+        en: 'Back'
     }
 };
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index b08ded2..746615a 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -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;
+    }
 }
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index 7404c15..f95813d 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/src/components/mainPart/mainPart.tsx
@@ -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}
diff --git a/src/components/mainPart/mainPartHeader.tsx b/src/components/mainPart/mainPartHeader.tsx
index 1440a8e..6755083 100644
--- a/src/components/mainPart/mainPartHeader.tsx
+++ b/src/components/mainPart/mainPartHeader.tsx
@@ -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>
diff --git a/src/components/mainPart/planContentContainer.tsx b/src/components/mainPart/planContentContainer.tsx
index 3b27c17..8c43ac1 100644
--- a/src/components/mainPart/planContentContainer.tsx
+++ b/src/components/mainPart/planContentContainer.tsx
@@ -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>
         {