Commit 7bc45a59 authored by Sergey's avatar Sergey

Page tariffs is done

parent 0517b160
This diff is collapsed.
......@@ -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">
......
......@@ -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');
}
}
});
});
});
});
}
......
......@@ -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>
......
This diff is collapsed.
......@@ -600,7 +600,6 @@
{
width: 100%;
margin: 0;
padding-top: 20px;
padding-left: 0;
padding-right: 0;
}
......
......@@ -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
{
......
This diff is collapsed.
......@@ -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'),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment