From a6c6a6958760e453bc2ef0a45dc142dcb7e1b3a1 Mon Sep 17 00:00:00 2001
From: RedHood <red@hood.su>
Date: Tue, 8 Dec 2020 20:17:27 +1000
Subject: [PATCH] =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BD=D1=82=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../skillparts/system/views/layouts/main.php  |  32 +++---
 .../skillparts/system/views/site/index.php    |  40 +++----
 .../web/css/categories_blocks_panel.css       |  47 ++++++--
 mirzaev/skillparts/system/web/css/header.css  | 107 +++++++++++++-----
 .../skillparts/system/web/css/info_panel.css  |  43 ++++++-
 mirzaev/skillparts/system/web/css/main.css    |  20 +++-
 6 files changed, 213 insertions(+), 76 deletions(-)

diff --git a/mirzaev/skillparts/system/views/layouts/main.php b/mirzaev/skillparts/system/views/layouts/main.php
index eefcf8f..2bc2cba 100644
--- a/mirzaev/skillparts/system/views/layouts/main.php
+++ b/mirzaev/skillparts/system/views/layouts/main.php
@@ -3,11 +3,7 @@
 /* @var $this \yii\web\View */
 /* @var $content string */
 
-use app\widgets\Alert;
 use yii\helpers\Html;
-use yii\bootstrap\Nav;
-use yii\bootstrap\NavBar;
-use yii\widgets\Breadcrumbs;
 use app\assets\AppAsset;
 
 AppAsset::register($this);
@@ -31,12 +27,12 @@ AppAsset::register($this);
     <div class="wrap">
 
         <header class="container">
-            <div class="row">
-                <div class="col-2">
+            <div class="row mt-3 mt-sm-0">
+                <div class="col-3 col-sm-4 col-md-2 d-flex flex-column justify-content-end logotype">
                     <img class="img-fluid" src="/img/logo.jpg" alt="Аватар">
-                    <small class="pt-0 d-block text-center">Место под слоган</small>
+                    <small class="pt-0 d-block text-center tagline">Место под слоган</small>
                 </div>
-                <div class="col-3 ml-auto text-right d-flex flex-column justify-content-end">
+                <div class="col ml-auto text-right d-flex flex-column justify-content-end">
                     <div class="row">
                         <div class="col">
                             <p class="m-0"><i class="fas fa-shopping-cart mr-4"></i><i class="fas fa-list mr-4"></i><a>Личный кабинет</a></p>
@@ -49,7 +45,7 @@ AppAsset::register($this);
                 <div class="col">
                     <div class="h-divider d-flex">
                         <div class="col-1 ml-auto p-0 h-divider-title-left"></div>
-                        <div class="col-4 h-divider-title d-flex flex-column justify-content-center">
+                        <div class="col-5 col-lg-4 h-divider-title d-flex flex-column justify-content-center">
                             <h6 class="text-center text-white my-0"><b>Запчасти для спецтехники</b></h6>
                         </div>
                         <div class="col-1 mr-auto p-0 h-divider-title-right"></div>
@@ -58,8 +54,8 @@ AppAsset::register($this);
             </div>
 
             <div class="row mb-4">
-                <div class="col-3 py-2 d-flex flex-column justify-content-end">
-                    <button id="dropdownMenuButton" class="btn text-white d-flex button_clean catalog_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div class="col-lg-3 pr-0 pr-lg-3 py-2 d-flex flex-column align-center justify-content-end dropdownMenuButton_column">
+                    <button id="dropdownMenuButton" class="btn text-white form-control d-flex button_clean catalog_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="fas fa-bars col-2 p-0 d-flex flex-column justify-content-center"></i>
                         <p class="col-10 m-0 p-0">Каталог товаров</p>
                     </button>
@@ -70,16 +66,16 @@ AppAsset::register($this);
                     </div>
                 </div>
 
-                <div id="searchPanel" class="col-9">
+                <div id="searchPanel" class="col">
                     <input id="catalog_search_panel_button_1" class="btn btn-sm button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_1" checked>
-                    <label class="mb-0 px-5 py-1" for="catalog_search_panel_button_1">Номер детали</label>
+                    <label class="mb-0 px-3 px-md-4 px-lg-5 py-1" for="catalog_search_panel_button_1">Номер детали</label>
                     <input id="catalog_search_panel_button_2" class="btn btn-sm text-white button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_2">
-                    <label class="mb-0 px-5 py-1" for="catalog_search_panel_button_2">Вторая кнопка</label>
+                    <label class="mb-0 px-3 px-md-4 px-lg-5 py-1" for="catalog_search_panel_button_2">Вторая кнопка</label>
                     <input id="catalog_search_panel_button_3" class="btn btn-sm5 text-white button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_3">
-                    <label class="mb-0 px-5 py-1" for="catalog_search_panel_button_3">Третья кнопка</label>
+                    <label class="mb-0 px-3 px-md-4 px-lg-5 py-1" for="catalog_search_panel_button_3">Третья кнопка</label>
                     <form class="d-flex p-2 catalog_search">
-                        <input type="text" class="form-control catalog_search_line col-10" id="productNumber" placeholder="Номер запчасти, например: 45223503481">
-                        <button type="submit" class="col-2 text-white btn button_clean catalog_search_button">ПОИСК</button>
+                        <input type="text" class="form-control catalog_search_line col-8 col-lg-10 mr-2" id="productNumber" placeholder="Номер запчасти, например: 45223503481">
+                        <button type="submit" class="col text-white btn button_clean catalog_search_button">ПОИСК</button>
                     </form>
                 </div>
             </div>
@@ -93,7 +89,7 @@ AppAsset::register($this);
     <footer class="py-4">
         <div class="container">
             <div class="row">
-                <div class="col-4">
+                <div class="col-12 col-md-4 px-5 px-md-3">
                     <h5 class="mb-1"><b>Контакты</b></h5>
                     <small>Адрес: г. Хабаровск, ул. Промышленная 3, офис 105</small><br>
                     <small>Время работы: пн-пт 09:00-18:00</small><br>
diff --git a/mirzaev/skillparts/system/views/site/index.php b/mirzaev/skillparts/system/views/site/index.php
index fe15fde..576d8de 100644
--- a/mirzaev/skillparts/system/views/site/index.php
+++ b/mirzaev/skillparts/system/views/site/index.php
@@ -7,23 +7,25 @@ $this->title = 'SkillParts';
 
 <div class="row info_panel mb-4">
     <div class="container h-100 d-flex flex-column justify-content-center">
-        <p class="mb-4 gilroy">Если есть трудности с подбором запчастей<br>оставьте заявку нашему менеджеру</p>
-        <button class="text-white btn button_clean button_call">Оставить заявку</button>
+        <p class="col-lg-8 mb-4 gilroy">Проблема с подбором запчастей?</p>
+        <button class="text-white btn button_clean button_call">Связаться с менеджером</button>
+    </div>
+    <div class="h-100 d-flex flex-column justify-content-end">
+        <img class="img-fluid" src="/img/photos/963K.webp" alt="Связаться с менеджером">
     </div>
-    <img class="img-fluid" src="/img/photos/963K.webp" alt="Вызвать менеджера">
 </div>
 
 <div class="container pt-2">
     <div class="row mb-3">
         <h4 class="col gilroy categories_blocks_panel_title">Сопутствующие товары</h4>
     </div>
-    <div class="row mb-5">
-        <div class="col-4 pl-0 text-white">
-            <div class="px-5 py-3 d-inline-block category_block_title">
-                <h5 class="m-0 gilroy">Масла, смазки</h5>
+    <div class="row mb-5 px-3 px-md-0">
+        <div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-0 p-0 p-md-3 pl-md-0 d-flex flex-column">
+            <div class="px-3 px-xl-4 pt-3 d-inline-block category_block_title">
+                <h4 class="m-0">Масла, смазки</h4>
             </div>
-            <div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block">
-                <dl class="mb-0 mt-4 pt-2">
+            <div class="p-3 px-md-4 category_block">
+                <dl class="mb-0">
                     <dd>Масла моторные</dd>
                     <dd>Масла трансмиссионные</dd>
                     <dd>Масла гидравлические</dd>
@@ -31,22 +33,22 @@ $this->title = 'SkillParts';
                 </dl>
             </div>
         </div>
-        <div class="col-4 pl-0 text-white">
-            <div class="px-5 py-3 d-inline-block category_block_title">
-                <h5 class="m-0 gilroy">Электрооборудование</h5>
+        <div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-0 p-0 p-md-3 pl-md-0 d-flex flex-column">
+            <div class="px-3 px-xl-4 pt-3 d-inline-block category_block_title">
+                <h4 class="m-0">Электрооборудование</h4>
             </div>
-            <div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block">
-                <dl class="mb-0 mt-4 pt-2">
+            <div class="p-3 px-md-4 category_block">
+                <dl class="mb-0">
                     <dd>Фары и свет</dd>
                 </dl>
             </div>
         </div>
-        <div class="col-4 pl-0 text-white">
-            <div class="px-5 py-3 d-inline-block category_block_title">
-                <h5 class="m-0 gilroy">Инструмент</h5>
+        <div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-0 p-0 p-md-3 pl-md-0 d-flex flex-column">
+            <div class="px-3 px-xl-4 pt-3 d-inline-block category_block_title">
+                <h4 class="m-0">Инструмент</h4>
             </div>
-            <div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block">
-                <dl class="mb-0 mt-4 pt-2">
+            <div class="p-3 px-md-4 category_block">
+                <dl class="mb-0">
                     <dd>Шприцы для смазки </dd>
                     <dd>Ключи, съёмники</dd>
                     <dd>Наборы инструментов</dd>
diff --git a/mirzaev/skillparts/system/web/css/categories_blocks_panel.css b/mirzaev/skillparts/system/web/css/categories_blocks_panel.css
index c0259ef..9b74184 100644
--- a/mirzaev/skillparts/system/web/css/categories_blocks_panel.css
+++ b/mirzaev/skillparts/system/web/css/categories_blocks_panel.css
@@ -1,10 +1,8 @@
-.categories_blocks_panel_title {
-
-}
-
 .category_block {
     height: 100%;
-    background-color: #563cb0;
+    font-size: 15px;
+    color: #123EAB;
+    background-color: #fff;
 }
 
 .category_block dd {
@@ -16,6 +14,39 @@
 }
 
 .category_block_title {
-    position: absolute;
-    background-color: #7e66d5;
-}
\ No newline at end of file
+    background-color: #fff;
+}
+
+.category_block_title h4 {
+    font-weight: 700;
+}
+
+/* @media (max-width: 400px) {} */
+
+/* Малые девайсы («ландшафтные телефоны», >= 576px) */
+
+@media (max-width: 576px) {}
+
+/* Средние девайсы («таблетки», >= 768px) */
+
+@media (max-width: 768px) {
+    .category_block_title {
+        width: 100%;
+    }
+    .category_block,
+    .category_block dl {
+        margin: 0 !important;
+        padding: .5rem !important;
+    }
+    .categories_blocks_panel_title {
+        text-align: center;
+    }
+}
+
+/* Большие девайсы (десктопы, >= 992px) */
+
+@media (max-width: 992px) {}
+
+/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
+
+/* @media (max-width: 1200px) {} */
\ No newline at end of file
diff --git a/mirzaev/skillparts/system/web/css/header.css b/mirzaev/skillparts/system/web/css/header.css
index dadd2f3..c09b913 100644
--- a/mirzaev/skillparts/system/web/css/header.css
+++ b/mirzaev/skillparts/system/web/css/header.css
@@ -2,39 +2,39 @@
     margin-top: -20px;
     position: relative;
     pointer-events: none;
-    border-bottom: 4px solid #563cb0;
+    border-bottom: 4px solid #123EAB;
 }
 
 .h-divider-title {
-    background-color: #563cb0;
+    background-color: #123EAB;
 }
 
 .h-divider-title-left {
     max-width: 0;
     max-height: 0;
     border: 1rem solid transparent;
-    border-right: 1rem solid #563cb0;
-    border-bottom: 1rem solid #563cb0;
+    border-right: 1rem solid #123EAB;
+    border-bottom: 1rem solid #123EAB;
 }
 
 .h-divider-title-right {
     max-width: 0;
     max-height: 0;
     border: 1rem solid transparent;
-    border-left: 1rem solid #563cb0;
-    border-bottom: 1rem solid #563cb0;
+    border-left: 1rem solid #123EAB;
+    border-bottom: 1rem solid #123EAB;
 }
 
 .catalog_button {
     width: 100%;
     border-radius: 3px;
     transition: 0.3s;
-    background-color: #563cb0 !important;
+    background-color: #123EAB !important;
 }
 
 .catalog_button:hover {
     transition: 0.3s;
-    background-color: #7e66d5 !important;
+    background-color: #6940ff !important;
 }
 
 .catalog_button:active {
@@ -44,51 +44,50 @@
 
 .catalog_search {
     border-radius: 0px 5px 5px 5px;
-    background-color: #563cb0;
+    background-color: #123EAB;
 }
 
 #searchPanel label {
     display: inline-block;
     border-radius: 5px 5px 0px 0px;
     color: #ececec;
-    background-color: #9d88e6;
+    background-color: #86f;
 }
 
 #searchPanel input[type=radio] {
-	display: none;
+    display: none;
 }
 
 #searchPanel label {
-	cursor: pointer;
-	user-select: none;
+    cursor: pointer;
+    user-select: none;
 }
 
 #searchPanel label:hover {
-	color: #ffffff;
+    color: #ffffff;
 }
 
-#searchPanel input[type=radio] + label:active,
-#searchPanel input[type=radio]:checked + label:active {
-	background-color: #402d82;
+#searchPanel input[type=radio]+label:active, #searchPanel input[type=radio]:checked+label:active {
+    background-color: #402d82;
 }
 
-#searchPanel input[type=radio]:checked + label {
-	color: #ffffff;
-	background-color: #563cb0;
+#searchPanel input[type=radio]:checked+label {
+    color: #ffffff;
+    background-color: #123EAB;
 }
 
-#searchPanel input[type=radio]:disabled + label {
-	background: #241c3d;
-	color: #c4c4c4;
+#searchPanel input[type=radio]:disabled+label {
+    background: #241c3d;
+    color: #c4c4c4;
 }
 
 .catalog_search_line {
-    border-radius: 3px 0px 0px 3px;
+    border-radius: 3px;
     background-color: #fbf9ff !important;
 }
 
 .catalog_search_button {
-    border-radius: 0px 3px 3px 0px;
+    border-radius: 3px;
     background-color: #d53737;
 }
 
@@ -98,4 +97,60 @@
 
 .catalog_search_button:active {
     background-color: #c13131;
-}
\ No newline at end of file
+}
+
+@media (max-width: 400px) {
+    .logotype {
+        display: none !important;
+    }
+    .catalog_search {
+        flex-direction: column;
+    }
+    .catalog_search_line {
+        max-width: 100%;
+        border-radius: 3px 3px 0px 0px;
+    }
+    .catalog_search_button {
+        border-radius: 0px 0px 3px 3px;
+    }
+}
+
+/* Малые девайсы («ландшафтные телефоны», >= 576px) */
+@media (max-width: 576px) {
+    .tagline {
+        display: none !important;
+    }
+    #searchPanel label {
+        width: 100%;
+        text-align: center;
+    }
+    #searchPanel label:not(:nth-child(2)) {
+        border-radius: 0;
+    }
+    .catalog_search {
+        border-radius: 0px 0px 5px 5px;
+    }
+}
+
+/* Средние девайсы («таблетки», >= 768px) */
+@media (max-width: 768px) {
+}
+
+/* Большие девайсы (десктопы, >= 992px) */
+@media (max-width: 992px) {
+    .h-divider {
+        margin-top: 15px;
+    }
+    .h-divider div {
+        display: none !important;
+    }
+    .dropdownMenuButton_column {
+        width: max-content;
+    }
+    #dropdownMenuButton p {
+        display: none;
+    }
+}
+
+/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
+@media (max-width: 1200px) {}
\ No newline at end of file
diff --git a/mirzaev/skillparts/system/web/css/info_panel.css b/mirzaev/skillparts/system/web/css/info_panel.css
index 30bb2bb..e4b0309 100644
--- a/mirzaev/skillparts/system/web/css/info_panel.css
+++ b/mirzaev/skillparts/system/web/css/info_panel.css
@@ -1,12 +1,13 @@
 .info_panel {
-    height: 230px;
+    height: 280px;
     overflow: hidden;
 }
 
 .info_panel img {
     left: 10vw;
-    bottom: 32vw;
     scale: 1.2;
+    min-width: 100%;
+    min-height: 200%;
     position: relative;
     object-fit: cover;
     z-index: 0;
@@ -14,7 +15,10 @@
 
 .info_panel .container {
     /* position: absolute; */
+    top: 50%;
+    height: 0px !important;
     z-index: 15;
+    position: relative;
 }
 
 .info_panel .container p {
@@ -24,7 +28,7 @@
 
 .info_panel .button_call {
     width: 350px;
-    margin-left: 5vw;
+    margin-left: 2vw;
     background-color: #57a946;
 }
 
@@ -34,4 +38,35 @@
 
 .info_panel .button_call:active {
     background-color: #468e37;
-}
\ No newline at end of file
+}
+
+.catalog_search_button:active {
+    background-color: #c13131;
+}
+
+@media (max-width: 400px) {}
+
+/* Малые девайсы («ландшафтные телефоны», >= 576px) */
+
+@media (max-width: 576px) {
+    .info_panel .container {
+        padding: 0px 35px;
+    }
+    .info_panel .button_call {
+        width: 100%;
+        margin-left: 0;
+    }
+}
+
+/* Средние девайсы («таблетки», >= 768px) */
+
+@media (max-width: 768px) {
+}
+
+/* Большие девайсы (десктопы, >= 992px) */
+
+@media (max-width: 992px) {}
+
+/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
+
+@media (max-width: 1200px) {}
\ No newline at end of file
diff --git a/mirzaev/skillparts/system/web/css/main.css b/mirzaev/skillparts/system/web/css/main.css
index 36d1d96..dbc5a1e 100644
--- a/mirzaev/skillparts/system/web/css/main.css
+++ b/mirzaev/skillparts/system/web/css/main.css
@@ -35,4 +35,22 @@ main {
 
 .gilroy {
     font-family: 'Gilroy';
-}
\ No newline at end of file
+}
+
+/* @media (max-width: 400px) {} */
+
+/* Малые девайсы («ландшафтные телефоны», >= 576px) */
+
+/* @media (max-width: 576px) {} */
+
+/* Средние девайсы («таблетки», >= 768px) */
+
+/* @media (max-width: 768px) {} */
+
+/* Большие девайсы (десктопы, >= 992px) */
+
+/* @media (max-width: 992px) {} */
+
+/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
+
+/* @media (max-width: 1200px) {} */
\ No newline at end of file