Make vacancies and companies list pages

src/companies-list.html

@@ -142,7 +142,7 @@
                         </div>
                     </div>
                 </div>
-            </>
+            </div>
         </header>
         <div class="menu menu-main">
             <div class="menu-title">
@@ -342,6 +342,9 @@
                                         <img class="img-svg" src="./img/icon_map.svg" alt="">
                                         Показать на карте
                                     </a>
+                                    <button type="button" class="other-button button-filter">
+                                        <img class="img-svg" src="./img/icon_option.svg" alt="">
+                                    </button>
                                     <form action="" id="quick-search">
                                         <input type="text" name="q" placeholder="Поиск по компаниям">
                                         <input type="submit" name="submit-quick-search" value="" style="background-image: url(./img/bg-submit-quick-search.svg);">

src/companies-map.html

@@ -342,6 +342,9 @@
                                         <img class="img-svg" src="./img/icon_list.svg" alt="">
                                         Показать списком
                                     </a>
+                                    <button type="button" class="other-button button-filter">
+                                        <img class="img-svg" src="./img/icon_option.svg" alt="">
+                                    </button>
                                     <form action="" id="quick-search">
                                         <input type="text" name="q" placeholder="Поиск по компаниям">
                                         <input type="submit" name="submit-quick-search" value="" style="background-image: url(./img/bg-submit-quick-search.svg);">

src/scss/_media.scss

@@ -39,14 +39,18 @@
         padding-right: 20px;
         padding-left: 20px;
     }
+}
+@media(max-width: 1180px)
+{
+    .image-companies
+    {
+        max-width: 100%;
+    }
     .main-search .search-list-row-companies .col-6
     {
         padding-left: 15px;
         padding-right: 15px;
     }
-}
-@media(max-width: 1180px)
-{
     .new-vacancies-content .col-3
     {
         flex: 0 0 33%;
@@ -61,11 +65,11 @@
         flex: 0 0 33%;
         max-width: 33%;
     }
-    .main-search .search-list-row-vacancies .col-4
-    {
-        flex: 0 0 50%;
-        max-width: 50%;
-    }
+    // .main-search .search-list-row-vacancies .col-4
+    // {
+    //     flex: 0 0 50%;
+    //     max-width: 50%;
+    // }
     .image-vacancies
     {
         max-width: initial;
@@ -126,9 +130,46 @@
     {
         flex-direction: column;
     }
+    .button-filter 
+    {
+        display: flex;
+    }
+    .additional-search 
+    {
+        flex-wrap: wrap;
+    }
+    .additional-search form 
+    {
+        width: 100%;
+        margin-top: 32px;
+    }
+    .additional-search form input[type=text]
+    {
+        min-width: 100%;
+        max-width: 100%;
+    }
+    .list-container-row .col-3
+    {
+        display: none;
+    }
+    .list-container-row .col-9 
+    {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    .main-search .search-list-row-vacancies .col-4
+    {
+        flex: 0 0 25%;
+        max-width: 25%;
+    }
 }
 @media(max-width: 1000px)
 {
+    .main-search .search-list-row-vacancies .col-4
+    {
+        flex: 0 0 33%;
+        max-width: 33%;
+    }
     .faq-main-content__right
     {
         display: none;
@@ -316,6 +357,16 @@
 }
 @media(max-width: 800px)
 {
+    .main-search .search-list-row-companies .col-6
+    {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    .main-search .search-list-row-vacancies .col-4
+    {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
     .detailed-description-block .col-3, .detailed-description-block .col-9
     {
         flex: 0 0 100%;
@@ -433,6 +484,10 @@
 }
 @media(max-width: 550px)
 {
+    .main-search .search-list-row-companies .company-card
+    {
+        height: auto;
+    }
     .advantages-registration-row .col-3
     {
         flex: 0 0 100%;
@@ -467,6 +522,19 @@
 }
 @media(max-width: 500px)
 {
+    .pagination
+    {
+        flex-wrap: wrap;
+    }
+    .wrapper-pagination .pagination__block
+    {
+        margin-bottom: 10px;
+    }
+    .main-search .search-list-row-vacancies .col-4
+    {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
     .block-file label
     {
         flex-direction: column;

src/scss/style.scss

@@ -310,6 +310,19 @@ button
     color: $color-clicked;
 }
 
+.button-filter 
+{
+    width: 56px;
+    height: 50px;
+    padding: 0;
+    display: none;
+}
+
+.button-filter:hover .img-svg path
+{
+    fill: $color-hover;
+}
+
 .wrapper-button 
 {
     display: flex;

src/vacancies-list.html

@@ -407,6 +407,9 @@
                                         <img class="img-svg" src="./img/icon_map.svg" alt="">
                                         Показать на карте
                                     </a>
+                                    <button type="button" class="other-button button-filter">
+                                        <img class="img-svg" src="./img/icon_option.svg" alt="">
+                                    </button>
                                     <form action="" id="quick-search">
                                         <input type="text" name="q" placeholder="Поиск по вакансиям">
                                         <input type="submit" name="submit-quick-search" value="" style="background-image: url(./img/bg-submit-quick-search.svg);">

src/vacancies-map.html

@@ -407,6 +407,9 @@
                                         <img class="img-svg" src="./img/icon_list.svg" alt="">
                                         Показать списком
                                     </a>
+                                    <button type="button" class="other-button button-filter">
+                                        <img class="img-svg" src="./img/icon_option.svg" alt="">
+                                    </button>
                                     <form action="" id="quick-search">
                                         <input type="text" name="q" placeholder="Поиск по вакансиям">
                                         <input type="submit" name="submit-quick-search" value="" style="background-image: url(./img/bg-submit-quick-search.svg);">