Page tariffs is done

package.json

@@ -31,12 +31,12 @@
     "file-loader": "^5.0.2",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^8.0.2",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "@babel/polyfill": "^7.8.3",

src/index-employer.html

@@ -519,7 +519,7 @@
                     <h1>Тарифы на размещение вакансий</h1>
                     <p class="block-mt-dark-blue">Краткое описание блока. Вы можете пригласить пользователя в свой аккаунт, он сможет использовать купленные вами услуги, работать с откликами и вакансиями всей компании. Сделать это можно в разделе "Профиль компании / вкладка Пользователи".</p>
                     <div class="job-posting-rates-content block-mt-blue">
-                        <div class="row">
+                        <div class="row row-tariffs">
                             <div class="col-4">
                                 <div class="tariff-block discount">
                                     <div class="tariff-block__title">
@@ -686,7 +686,7 @@
                     <h1>Метка TOP - компании</h1>
                     <p class="block-mt-dark-blue">Краткое описание блока. Вы можете пригласить пользователя в свой аккаунт, он сможет использовать купленные вами услуги, работать с откликами и вакансиями всей компании. Сделать это можно в разделе "Профиль компании / вкладка Пользователи".</p>
                     <div class="top-company-label-content block-mt-blue">
-                        <div class="row">
+                        <div class="row row-tariffs">
                             <div class="col-4">
                                 <div class="tariff-block">
                                     <div class="tariff-block__title">
@@ -777,7 +777,7 @@
                     <h1>Тарифы на доступ к базе резюме</h1>
                     <p class="block-mt-dark-blue">Краткое описание блока. Вы можете пригласить пользователя в свой аккаунт, он сможет использовать купленные вами услуги, работать с откликами и вакансиями всей компании. Сделать это можно в разделе "Профиль компании / вкладка Пользователи".</p>
                     <div class="tariffs-base-resumes-content block-mt-blue">
-                        <div class="row">
+                        <div class="row row-tariffs">
                             <div class="col-4">
                                 <div class="tariff-block">
                                     <div class="tariff-block__title">
@@ -868,7 +868,7 @@
                     <h1>Метка ТОР-вакансии</h1>
                     <p class="block-mt-dark-blue">Краткое описание блока. Вы можете пригласить пользователя в свой аккаунт, он сможет использовать купленные вами услуги, работать с откликами и вакансиями всей компании. Сделать это можно в разделе "Профиль компании / вкладка Пользователи".</p>
                     <div class="tariffs-base-resumes-content block-mt-blue">
-                        <div class="row">
+                        <div class="row row-tariffs">
                             <div class="col-4">
                                 <div class="tariff-block">
                                     <div class="tariff-block__title">

src/js/main.js

@@ -318,52 +318,6 @@ if(inputFile.length)
 }
 
 
-// Табы 
-
-var tabs = document.querySelectorAll('.tabs');
-
-if(tabs.length)
-{
-  tabs.forEach(function(elem, index)
-  {
-    var tabsItem = elem.querySelectorAll('.tabs-item');
-    var tabsContent = elem.querySelector('.tabs-content');
-    var tabsItems = elem.querySelector('.tabs-items')
-
-    tabsItem.forEach(function(elem, index)
-    {
-      elem.addEventListener('click', function(e)
-      {
-        e.preventDefault();
-        if(!elem.classList.contains('tabs-item_active'))
-        {
-          // var prevDataTab = tabsItems.querySelector('.tabs-item_active').dataset.tab;
-          tabsItems.querySelector('.tabs-item_active').classList.remove('tabs-item_active');
-          elem.classList.add('tabs-item_active');
-          var dataTab = elem.dataset.tab;
-          if(tabsContent.querySelectorAll('.tabs-content-block_active').length > 0)
-          {
-            let oldTabsContent = tabsContent.querySelectorAll('.tabs-content-block_active');
-            oldTabsContent.forEach(tab => {
-              tab.classList.remove('tabs-content-block_active');
-            });
-            // tabsContent.querySelector('.tabs-content-block_active').classList.remove('tabs-content-block_active');
-          }
-          if(tabsContent.querySelectorAll('div[data-tab="' + dataTab + '"]').length > 0)
-          {
-            let newTabsContent = tabsContent.querySelectorAll('div[data-tab="' + dataTab + '"]');
-            newTabsContent.forEach(tab => {
-              tab.classList.add('tabs-content-block_active');
-            });
-            // tabsContent.querySelector('div[data-tab="' + dataTab + '"]').classList.add('tabs-content-block_active');
-          }
-        }
-      });
-    });
-  });
-}
-
-
 // Datapicker
 
 let datepickerElems = document.querySelectorAll('input[data-picker="datepicker"]');
@@ -1018,6 +972,7 @@ if(addPlaceWork.length)
   });
 }
 
+
 // Формы в модальных окнах
 
 let shadow = document.querySelector('.wrapper-shadow');
@@ -1036,6 +991,9 @@ let modalAccount = document.querySelector('#modal-account');
 let buttonDetailedSearch = document.querySelectorAll('.button-detailed-search');
 let modalDetailedSearch = document.querySelector('#detailed-search');
 
+let buttonAppBanner = document.querySelectorAll('.button-app-banner');
+let modalAppBanner = document.querySelector('#modal-app-banner');
+
 
 const animationModalForm = fn =>
 {
@@ -1124,6 +1082,50 @@ if(buttonDetailedSearch.length)
 {
   viewForm(buttonDetailedSearch, modalDetailedSearch);
 }
+if(buttonAppBanner.length)
+{
+  // Обработка форм с опциями о размещении баннера
+
+  const bannerForms = document.querySelectorAll('form[data-picture="true"]');
+
+  if(bannerForms.length)
+  {
+    bannerForms.forEach(form => 
+    {
+      form.addEventListener('submit', (e) => 
+      {
+        e.preventDefault();
+
+        let bannerInfo = document.querySelector('.banner-info');
+        let inputBannerSizes = document.querySelector('input[name="banner-sizes"]');
+        let inputCountDays = document.querySelector('input[name="banner-count-days"]');
+
+        let sizesBanner = form.elements[0].value;
+        let countDays;
+        let allRadio = Array.from(form.querySelectorAll('input[type="radio"]'));
+      
+        allRadio.forEach(elem => {
+          if(elem.checked)
+          {
+            countDays = elem.value;
+          }
+        });
+
+        console.log(sizesBanner);
+        console.log(countDays);
+
+        inputBannerSizes.value = sizesBanner;
+        inputCountDays.value = countDays;
+
+        bannerInfo.innerHTML = `Баннер ${sizesBanner} сроком на ${countDays}`;
+
+        viewForm(buttonAppBanner, modalAppBanner);
+
+      });
+    });
+  }
+
+}
 
 // Валидация формы и отправка данных
 
@@ -1218,8 +1220,6 @@ function checkFieldTextarea(textarea)
   return result;
 }
 
-
-
 function sendForm(form)
 {
   fetch(form.action, { method: 'POST', body: new FormData(form)})
@@ -1369,6 +1369,107 @@ if(window.matchMedia('(max-width: 650px)').matches)
 }
 
 
+// Выравнивание тарифов по высоте 
+
+let rows = document.querySelectorAll('.row-tariffs');
+
+if(rows.length)
+{
+  rows.forEach(row => {
+    let tariffContents = row.querySelectorAll('.tariff-block__content');
+
+    if(tariffContents.length)
+    {
+      window.addEventListener('load', function()
+      {
+        let maxHeight = tariffContents[0].getBoundingClientRect().height;
+
+        console.log(maxHeight);
+
+        tariffContents.forEach(content => 
+        {
+          if(maxHeight < content.getBoundingClientRect().height)
+          {
+            maxHeight = content.getBoundingClientRect().height;
+          }
+        });
+
+        tariffContents.forEach(content => 
+        {
+          content.style.height = maxHeight + 'px';
+        });
+
+      });
+    }
+  });
+}
+
+// Скрытие табов 
+
+window.addEventListener('load', function()
+{
+  if(document.querySelectorAll('.tabs-content-block'))
+  {
+    document.querySelectorAll('.tabs-content-block').forEach(content => {
+      if(!content.classList.contains('tabs-content-block_active')) 
+      {
+        content.style.display = 'none';
+      }
+    });
+  }
+});
+
+// Табы 
+
+var tabs = document.querySelectorAll('.tabs');
+
+if(tabs.length)
+{
+  window.addEventListener('load', () => 
+  {
+    tabs.forEach(function(elem, index)
+    {
+      var tabsItem = elem.querySelectorAll('.tabs-item');
+      var tabsContent = elem.querySelector('.tabs-content');
+      var tabsItems = elem.querySelector('.tabs-items')
+
+      tabsItem.forEach(function(elem, index)
+      {
+        elem.addEventListener('click', function(e)
+        {
+          e.preventDefault();
+          if(!elem.classList.contains('tabs-item_active'))
+          {
+            // var prevDataTab = tabsItems.querySelector('.tabs-item_active').dataset.tab;
+            tabsItems.querySelector('.tabs-item_active').classList.remove('tabs-item_active');
+            elem.classList.add('tabs-item_active');
+            var dataTab = elem.dataset.tab;
+            if(tabsContent.querySelectorAll('.tabs-content-block_active').length > 0)
+            {
+              let oldTabsContent = tabsContent.querySelectorAll('.tabs-content-block_active');
+              oldTabsContent.forEach(tab => {
+                tab.classList.remove('tabs-content-block_active');
+                tab.style.display = 'none';
+              });
+              // tabsContent.querySelector('.tabs-content-block_active').classList.remove('tabs-content-block_active');
+            }
+            if(tabsContent.querySelectorAll('div[data-tab="' + dataTab + '"]').length > 0)
+            {
+              let newTabsContent = tabsContent.querySelectorAll('div[data-tab="' + dataTab + '"]');
+              newTabsContent.forEach(tab => {
+                tab.classList.add('tabs-content-block_active');
+              });
+              // tabsContent.querySelector('div[data-tab="' + dataTab + '"]').classList.add('tabs-content-block_active');
+            }
+          }
+        });
+      });
+    });
+  });
+}
+
+
+
 
 
 

src/main.html

@@ -387,6 +387,12 @@
                         <li>
                             <a href="access-account-employer.html">Вход в личный кабинет</a>
                         </li>
+                        <li>
+                            <a href="tariffs.html">Тарифы</a>
+                        </li>
+                        <li>
+                            <a href="password-recovery-employer.html">Восстановление пароля</a>
+                        </li>
                     </ul>
                 </div>
             </div>

src/scss/_media.scss

@@ -600,7 +600,6 @@
     {
         width: 100%;
         margin: 0;
-        padding-top: 20px;
         padding-left: 0;
         padding-right: 0;
     }

src/scss/style.scss

@@ -664,6 +664,7 @@ ul
     list-style-type: none;
     list-style-image: none;
     padding-left: 4px;
+    margin-bottom: 0;
     li 
     {
         font-family: Montserrat Regular;
@@ -3394,6 +3395,7 @@ label
     cursor: pointer;
     width: 16px;
     height: 16px;
+    margin-left: 10px;
     .img-svg 
     {
         max-width: 100%;
@@ -3466,11 +3468,11 @@ label
         display: flex;
         margin-left: -20px;
         margin-right: -20px;
+        flex-wrap: wrap;
         .tabs-item 
         {
             font-family: Raleway Bold;
             font-size: 16px;
-            
             font-stretch: normal;
             font-style: normal;
             line-height: normal;
@@ -3486,10 +3488,7 @@ label
             margin-left: 20px;
             margin-right: 20px;
             justify-content: center;
-            .block-tooltip 
-            {
-                margin-left: 10px;
-            }
+            padding-top: 15px;
         }
         .tabs-item_active 
         {
@@ -3504,11 +3503,11 @@ label
     {
         &-block 
         {
-            display: none;
+            // display: none;
         }
         &-block_active 
         {
-            display: block;
+            display: block !important;
         }
     }
 }
@@ -5021,15 +5020,18 @@ input[type="submit"]
         background-color: #fff;
         border-bottom-left-radius: 3px;
         border-bottom-right-radius: 3px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         &__price 
         {
             margin-top: 43px;
             .old-price 
             {
-                display: flex;
+                display: none;
                 justify-content: center;
                 align-items: center;
-                opacity: 0;
+                // opacity: 0;
                 p 
                 {
                     font-family: Montserrat Regular;
@@ -5100,27 +5102,36 @@ input[type="submit"]
         {
             .old-price 
             {
-                opacity: 1;
+                // opacity: 1;
+                display: flex;
             }
         }
     }
 }
 
+.row-tariffs
+{
+    margin-left: -10px;
+    margin-right: -10px;
+    .col-4 
+    {
+        padding-left: 10px;
+        padding-right: 10px;
+        margin-bottom: 43px;
+    }
+}
+
 .job-posting-rates, .top-company-label, .tariffs-base-resumes, .top-job-label, .offer-website
 {
     h1, h1 ~p 
     {
         text-align: center;
     }
-    .row 
+    .row-tariffs
     {
-        margin-left: -20px;
-        margin-right: -20px;
         .col-4 
         {
-            padding-left: 10px;
-            padding-right: 10px;
-            // margin-bottom: 22px;
+            margin-bottom: 0;
         }
     }
 }
@@ -5181,6 +5192,83 @@ input[type="submit"]
     }
 }
 
+.posting-pictures
+{
+    &-block 
+    {
+        border-bottom: 2px solid #DDDCE8;
+        padding-bottom: 43px;
+        &__image 
+        {
+            img 
+            {
+                max-width: 100%;
+                height: auto;
+                box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
+            }
+        }
+        &__title 
+        {
+            display: flex;
+            align-items: center;
+            font-family: Montserrat Bold;
+            font-size: 19px;
+            font-stretch: normal;
+            font-style: normal;
+            line-height: 1.47;
+            letter-spacing: normal;
+            color: $color-primary;
+        }
+        form 
+        {
+            .block-radio label 
+            {
+                .radio 
+                {
+                    margin-right: 20px;
+                }
+                p 
+                {
+                    font-family: Montserrat Bold;
+                    font-size: 16px;
+                    font-stretch: normal;
+                    font-style: normal;
+                    line-height: 1.88;
+                    letter-spacing: normal;
+                    color: $color-primary;
+                    span 
+                    {
+                        margin-left: 40px;
+                        font-family: Montserrat Regular;
+                        font-size: 16px;
+                        font-weight: normal;
+                        font-stretch: normal;
+                        font-style: normal;
+                        line-height: 1.88;
+                        letter-spacing: normal;
+                        color: $color-primary;
+                    }
+                }
+            }
+        }   
+    }
+}
+
+.posting-pictures .posting-pictures-block:last-child
+{
+    border: 0;
+    margin-bottom: 0;
+}
+
+.banner-info 
+{
+    text-align: center;
+}
+
+
+
+// Футер 
+
 
 .footer 
 {

webpack.config.js

@@ -9,7 +9,7 @@ const pages = ['index', 'articles', 'faq', 'vacancies-list', 'current-article',
 'vacancies-map', 'companies-map', 'current-vacancy', 'current-company', '404', 'profile', 'profile-editing', 'my-resumes', 'favorites-vacancies-list',
 'favorites-vacancies-map', 'response', 'response-resume', 'response-vacancy', 'response-vacancy-not-reg', 'subscription',
 'post-resume-step1', 'post-resume-step2', 'post-resume-step3', 'post-resume-step4', 'current-resume', 'index-employer', 'articles-employer', 'faq-employer',
-'current-article-employer', 'service-rules-employer', 'access-account-employer'];
+'current-article-employer', 'service-rules-employer', 'access-account-employer', 'tariffs', 'password-recovery-employer'];
 
 const webpackConfig = {
     context: path.resolve(__dirname, 'src'),