From 4f59f9f8fcc71dbed04afb2158e56a0ddc3189a7 Mon Sep 17 00:00:00 2001
From: bakhirev <alexey-bakhirev@yandex.ru>
Date: Mon, 2 Dec 2024 22:25:29 +0300
Subject: [PATCH] update

---
 src/ts/components/BillBoard/index.module.scss | 13 ++++++++++
 .../components/GameBanner/index.module.scss   |  6 +++++
 .../components/Quiz/styles/answer.module.scss | 26 ++++++++++++++-----
 .../components/Quiz/styles/index.module.scss  | 13 ++++++++++
 .../components/Races/styles/index.module.scss |  5 ++++
 .../ShowSymbol/styles/index.module.scss       |  9 +++++++
 .../SwimmingPool/styles/track.module.scss     | 11 ++++++++
 src/ts/pages/PageWrapper/index.tsx            | 10 ++++++-
 8 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/src/ts/components/BillBoard/index.module.scss b/src/ts/components/BillBoard/index.module.scss
index 91072a5..81009a3 100644
--- a/src/ts/components/BillBoard/index.module.scss
+++ b/src/ts/components/BillBoard/index.module.scss
@@ -55,3 +55,16 @@
   }
 }
 
+@media (max-width: 900px) {
+  .billboard {
+    &_box {
+      width: 300px;
+      height: 120px;
+    }
+    &_title {
+      font-size: var(--font-m);
+      height: 70px;
+      padding: var(--space-s);
+    }
+  }
+}
diff --git a/src/ts/components/GameBanner/index.module.scss b/src/ts/components/GameBanner/index.module.scss
index fee4951..bef9454 100644
--- a/src/ts/components/GameBanner/index.module.scss
+++ b/src/ts/components/GameBanner/index.module.scss
@@ -32,3 +32,9 @@
     color: var(--color-white);
   }
 }
+
+@media (max-width: 900px) {
+  .game_banner {
+    height: 200px;
+  }
+}
diff --git a/src/ts/components/Quiz/styles/answer.module.scss b/src/ts/components/Quiz/styles/answer.module.scss
index 6abd00d..6341ec7 100644
--- a/src/ts/components/Quiz/styles/answer.module.scss
+++ b/src/ts/components/Quiz/styles/answer.module.scss
@@ -1,11 +1,8 @@
 @import 'src/styles/variables';
 
 .quiz_answer {
-  --temp-width: 160px;
-  --temp-small: calc(var(--temp-width) - 32px);
-
   position: relative;
-  width: var(--temp-width);
+  width: 160px;
   padding-bottom: var(--space-m);
 
   cursor: pointer;
@@ -26,7 +23,7 @@
   }
 
   &_small {
-    width: var(--temp-small);
+    width: 128px;
   }
 
   &_icon {
@@ -105,7 +102,7 @@
   padding: var(--space-s) var(--space-l);
 
   & .quiz_answer {
-    width: var(--temp-small);
+    width: 128px;
 
     animation-delay: 1s;
     animation-duration: 2s;
@@ -119,7 +116,6 @@
   }
 }
 
-
 @keyframes quiz_answer {
   from {
     top: 0;
@@ -133,3 +129,19 @@
     opacity: 0.3;
   }
 }
+
+@media (max-width: 900px) {
+  .quiz_answer {
+    width: 100px;
+
+    &_small {
+      width: 68px;
+    }
+    &_text {
+      font-size: var(--font-s);
+    }
+  }
+  .quiz_answer_wrapper_small .quiz_answer {
+    width: 68px;
+  }
+}
diff --git a/src/ts/components/Quiz/styles/index.module.scss b/src/ts/components/Quiz/styles/index.module.scss
index 554c073..68b7958 100644
--- a/src/ts/components/Quiz/styles/index.module.scss
+++ b/src/ts/components/Quiz/styles/index.module.scss
@@ -153,3 +153,16 @@
     background-position: -200px 0;
   }
 }
+
+@media (max-width: 900px) {
+  .quiz {
+    &_title,
+    &_description {
+      width: 100%;
+      padding: var(--space-l) var(--space-xs);
+    }
+    &_title {
+      font-size: var(--font-m);
+    }
+  }
+}
diff --git a/src/ts/components/Races/styles/index.module.scss b/src/ts/components/Races/styles/index.module.scss
index de9d780..7dcb2c4 100644
--- a/src/ts/components/Races/styles/index.module.scss
+++ b/src/ts/components/Races/styles/index.module.scss
@@ -39,3 +39,8 @@
   }
 }
 
+@media (max-width: 900px) {
+  .races_track {
+    height: 70px;
+  }
+}
diff --git a/src/ts/components/ShowSymbol/styles/index.module.scss b/src/ts/components/ShowSymbol/styles/index.module.scss
index b93675c..40ebabc 100644
--- a/src/ts/components/ShowSymbol/styles/index.module.scss
+++ b/src/ts/components/ShowSymbol/styles/index.module.scss
@@ -17,7 +17,16 @@
     --temp-width: 20px;
     --temp-height: 30px;
   }
+}
 
+@media (max-width: 900px) {
+  .show_symbol {
+    --temp-width: 24.5px;
+    --temp-height: 33px;
+  }
+}
+
+.show_symbol {
   font-size: var(--temp-font);
   position: relative;
 
diff --git a/src/ts/components/SwimmingPool/styles/track.module.scss b/src/ts/components/SwimmingPool/styles/track.module.scss
index bf06495..f2a4581 100644
--- a/src/ts/components/SwimmingPool/styles/track.module.scss
+++ b/src/ts/components/SwimmingPool/styles/track.module.scss
@@ -53,3 +53,14 @@
 .swimming_pool_track + .swimming_pool_track .swimming_pool_track_line {
   border-top: 4px dashed red;
 }
+
+@media (max-width: 900px) {
+  .swimming_pool_track {
+    height: 70px;
+
+    &_value {
+      width: 71px;
+      line-height: 64px;
+    }
+  }
+}
diff --git a/src/ts/pages/PageWrapper/index.tsx b/src/ts/pages/PageWrapper/index.tsx
index b28af85..a488a4c 100644
--- a/src/ts/pages/PageWrapper/index.tsx
+++ b/src/ts/pages/PageWrapper/index.tsx
@@ -20,10 +20,18 @@ interface IPageWrapper {
 function MobileView({
   children,
 }: IPageWrapper) {
+  const { type, page } = useParams<any>();
+  const padding = type === 'team' && page === 'building'
+    ? { padding: 0 }
+    : {};
+
   return (
     <>
       <div className={style.page_wrapper}>
-        <div className={style.page_wrapper_main_mobile}>
+        <div
+          className={style.page_wrapper_main_mobile}
+          style={padding}
+        >
           {children}
         </div>
         <HeaderWithTab/>