Skip to content

A
Avalon
Commit e49e73a4 authored by Sergey's avatar Sergey
Browse files
Options

Mobile adaptive is done, start make employer version

parent 99a414aa
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1163 additions and 153 deletions
src/img/icon_bg_submit.svg 0 → 100644
View file @ e49e73a4
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14ZM20 18.6L18.6 20L14.4 15.8L15.8 14.4L20 18.6Z" fill="white"/>
</svg>
src/index-employer.html 0 → 100644
View file @ e49e73a4
This diff is collapsed.
src/index.html
View file @ e49e73a4
......@@ -277,6 +277,12 @@
<input type="text" name="position" placeholder="ДОЛЖНОСТЬ">
<input type="text" name="city" placeholder="ГОРОД">
<input type="text" name="salary" placeholder="ЗАРПЛАТА">
<div class="input-search-mobile">
<input type="text" name="resume" placeholder="ПОИСК ВАКАНСИИ">
<button stype="button" class="button-detailed-search">
<img src="./img/icon_option.svg" alt="">
</button>
</div>
<input type="submit" class="main-button" value="Найти">
</form>
<div class="wrapper-button-center block-mt-green">
......@@ -967,6 +973,23 @@
<p class="block-mt-blue">Наш менеджер свяжется с Вами в ближайшее время.</p>
</div>
</div>
<div class="modal-form" id="detailed-search">
<div class="close-modal">
<a href="#">
<img class="img-svg" src="./img/icon_close_modal.svg" alt="">
</a>
</div>
<div class="modal-form-content block-mt-orange">
<form action="" name="form-detailed-search" id="form-detailed-search">
<input type="text" name="position" placeholder="ДОЛЖНОСТЬ">
<input type="text" name="city" placeholder="ГОРОД">
<input type="text" name="salary" placeholder="ЗАРПЛАТА">
<div class="block-mt-green">
<input type="submit" class="main-button" name="submit-detailed-search" value="Найти">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/js/main.js
View file @ e49e73a4
......@@ -1016,6 +1016,8 @@ let modalFilter = document.querySelector('#modal-filter');
let buttonAccount = document.querySelectorAll('.button-account');
let modalAccount = document.querySelector('#modal-account');
let buttonDetailedSearch = document.querySelectorAll('.button-detailed-search');
let modalDetailedSearch = document.querySelector('#detailed-search');
const animationModalForm = fn =>
......@@ -1101,6 +1103,10 @@ if(buttonAccount.length)
{
viewForm(buttonAccount, modalAccount);
}
if(buttonDetailedSearch.length)
{
viewForm(buttonDetailedSearch, modalDetailedSearch);
}
// Валидация формы и отправка данных
......@@ -1254,20 +1260,6 @@ function sendForm(form)
}
// Адаптивная версия шапки
// if(window.matchMedia('(max-width: 1180px)').matches)
// {
// let buttonText = document.querySelectorAll('.header-bottom-right .button-text');
// if(buttonText.length)
// {
// buttonText.forEach(button => {
// button.querySelector('p') ? button.querySelector('p').remove() : null;
// });
// }
// }
// Меню
let buttonHelp = document.querySelector('.button-help');
......@@ -1311,6 +1303,57 @@ if(buttonHelp && menuMain)
}
// Адаптив для таблицы Резюме и Отклики
let resumes = document.querySelectorAll('.resumes');
let responses = document.querySelectorAll('.response');
if(resumes.length)
{
// resumes.forEach(function(resume)
// {
// let headers = resume.querySelectorAll('.resumes-header-row-block p');
// let strBody = resume.querySelectorAll('.resumes-content-row');
// strBody.forEach(function(str)
// {
// let columns = str.querySelectorAll('.resumes-content-row-block');
// for(let i = 0; i < columns.length; i++)
// {
// columns[i].dataset.label = headers[i].innerHTML;
// }
// });
// });
resumes.forEach(function(resume)
{
resume.insertAdjacentHTML('beforebegin', '<div class="wrapper-table"></div>');
let wrapperTable = resume.previousElementSibling;
wrapperTable.appendChild(resume);
});
}
if(responses.length)
{
responses.forEach(function(response)
{
response.insertAdjacentHTML('beforebegin', '<div class="wrapper-table"></div>');
let wrapperTable = response.previousElementSibling;
wrapperTable.appendChild(response);
});
}
// Адаптив для формы быстрого поиска
if(window.matchMedia('(max-width: 650px)').matches)
{
let submitButton = document.querySelector('.quick-job-search-block-content form input[type="submit"]');
submitButton.value = ''
}
......
src/main.html
View file @ e49e73a4
......@@ -365,6 +365,14 @@
<a href="current-resume.html">Резюме детальная</a>
</li>
</ul>
<br>
<h2>Для работодателей</h2>
<br>
<ul>
<li>
<a href="index-employer.html">Главная</a>
</li>
</ul>
</div>
</div>
</div>
......
src/my-resumes.html
View file @ e49e73a4
This diff is collapsed.
src/post-resume-step1.html
View file @ e49e73a4
......@@ -385,7 +385,7 @@
<p class="block-mb-green" style="font-size: 14px;"><span>*</span> - поля, обязательные для заполнения</p>
<p class="block-mb-blue" style="font-size: 14px;">Нажимая кнопку «Далее», Вы даёте своё согласие на обработку персональных данных</p>
<div class="transfer-steps">
<button type="button" class="other-button disabled" id="prev-step-resume">Назад</button>
<!-- <button type="button" class="other-button disabled" id="prev-step-resume">Назад</button> -->
<button type="button" class="main-button" id="next-step-resume">Далее</button>
</div>
</div>
......
src/scss/_media.scss
View file @ e49e73a4
......@@ -64,6 +64,15 @@
}
@media(max-width: 1180px)
{
.brief-information-block
{
flex-direction: column;
}
.brief-information-block__info
{
margin-left: 0;
margin-top: 20px;
}
.main-search .search-list-row-companies .col-6
{
padding-left: 15px;
......@@ -135,19 +144,11 @@
{
display: none;
}
.brief-information
{
flex-direction: column;
}
.main-search .search-list-row-vacancies .col-4
{
flex: 0 0 50%;
max-width: 50%;
}
.block-to-rate
{
margin-top: 32px;
}
.profile-container .sidebar-image
{
display: none;
......@@ -204,78 +205,6 @@
{
width: 100%;
}
.block-mt-purple
{
margin-top: 72px;
}
.block-mt-dark-blue
{
margin-top: 56px;
}
.block-mt-blue
{
margin-top: 48px;
}
.block-mt-green
{
margin-top: 32px;
}
.block-mt-yellow
{
margin-top: 24px;
}
.block-mt-orange
{
margin-top: 17px;
}
.block-mb-purple
{
margin-bottom: 72px;
}
.block-mb-dark-blue
{
margin-bottom: 56px;
}
.block-mb-blue
{
margin-bottom: 48px;
}
.block-mb-green
{
margin-bottom: 32px;
}
.block-mb-yellow
{
margin-bottom: 24px;
}
.block-mb-orange
{
margin-bottom: 17px;
}
h1
{
font-size: 36px;
}
h2
{
font-size: 23px;
}
h3
{
font-size: 17px;
}
p
{
font-size: 15px;
}
a
{
font-size: 15px;
}
ul li
{
font-size: 15px;
}
.advantages-registration-row .col-3
{
flex: 0 0 50%;
......@@ -334,6 +263,16 @@
}
@media(max-width: 950px)
{
.profile-container .detailed-description .row
{
margin-left: -20px;
margin-right: -20px;
}
.profile-container .detailed-description .col-3, .profile-container .detailed-description .col-9
{
padding-left: 20px;
padding-right: 20px;
}
.all-articles .row .col-3
{
flex: 0 0 50%;
......@@ -427,15 +366,6 @@
}
@media(max-width: 850px)
{
.brief-information-block
{
flex-direction: column;
}
.brief-information-block__info
{
margin-left: 0;
margin-top: 20px;
}
.useful-articles-content .row .col-3
{
flex: 0 0 50%;
......@@ -511,6 +441,15 @@
{
margin-bottom: 0;
}
.post-resume .steps-post-resume__step
{
display: none;
}
.post-resume .steps-post-resume__step_current
{
display: block;
margin-bottom: 0;
}
}
@media(max-width: 700px)
{
......@@ -565,9 +504,93 @@
{
width: 100%;
}
// .resumes-header
// {
// display: none;
// }
// .resumes-content-row
// {
// display: block;
// padding-left: 16px;
// padding-right: 16px;
// }
// .resumes-content-row-block
// {
// width: 100% !important;
// display: block !important;
// text-align: right;
// margin-bottom: 20px;
// }
// .resumes-content-row-block:last-child
// {
// margin-bottom: 0;
// }
// .resumes__actions
// {
// flex-direction: column;
// align-items: flex-end;
// margin-bottom: 20px;
// }
// .resumes__actions .button-text:nth-child(2)
// {
// margin-top: 17px;
// margin-left: 0;
// }
// .resumes-content-row-block::before
// {
// content: attr(data-label);
// float: left;
// font-family: Raleway Bold;
// font-size: 14px;
// font-stretch: normal;
// font-style: normal;
// line-height: normal;
// letter-spacing: normal;
// color: $color-primary;
// margin-top: 7px;
// text-align: left;
// width: 30%;
// margin-right: 10px;
// }
// .resumes__actions .button-text p
// {
// width: 100%;
// }
// .resumes__name
// {
// margin-bottom: 17px;
// display: flex;
// justify-content: flex-end;
// align-items: center;
// text-align: right;
// }
// .resumes-content-row-block p
// {
// margin-bottom: 0;
// }
}
@media(max-width: 650px)
{
.profile-container .detailed-description .row
{
margin-left: -16px;
margin-right: -16px;
}
.profile-container .detailed-description .col-3, .profile-container .detailed-description .col-9
{
padding-left: 16px;
padding-right: 16px;
}
.brief-information
{
flex-direction: column;
}
.block-to-rate
{
margin-top: 32px;
height: auto;
padding: 16px 24px;
}
.tabs-items
{
flex-wrap: wrap;
......@@ -586,6 +609,8 @@
width: 100%;
left: 0;
right: 0;
top: 0;
border-radius: 0;
}
.header .feedback
{
......@@ -765,7 +790,7 @@
flex-direction: column;
align-items: flex-start;
}
.transfer-steps a:first-child
.transfer-steps *:first-child
{
margin-bottom: 32px;
}
......@@ -774,6 +799,166 @@
flex: 0 0 100%;
max-width: 100%;
}
.quick-job-search h1, .new-vacancies h1, .top-companies h1, .usage-steps h1, .faq-main h1, .useful-articles h1
{
padding-left: 16px;
padding-right: 16px;
}
.quick-job-search-block__buttons
{
flex-direction: column;
}
.quick-job-search-block__buttons .button-text:last-child
{
margin-top: 22px;
}
.quick-job-search-block-content
{
padding: 32px 16px 32px 16px;
}
.quick-job-search-block-content form input[type=text]
{
display: none;
}
.input-search-mobile
{
display: block;
width: calc(100% - 60px) !important;
height: 56px !important;
position: relative;
}
.input-search-mobile input
{
display: initial !important;
width: 100% !important;
height: 100% !important;
}
.button-detailed-search
{
display: flex;
justify-content: center;
align-items: center;
background: transparent;
border: 0;
outline: none;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 45px;
margin: 0;
padding: 0;
}
.quick-job-search-block-content form input[type=submit]
{
width: 56px;
height: 56px;
background-position: center;
background-repeat: no-repeat;
background-image: url(../img/icon_bg_submit.svg);
}
.accordion-content-block .accordion-block-title p
{
font-size: 17px;
}
.accordion-content-block .accordion-block-desc
{
font-size: 15px;
}
.block-mt-purple
{
margin-top: 72px;
}
.block-mt-dark-blue
{
margin-top: 56px;
}
.block-mt-blue
{
margin-top: 48px;
}
.block-mt-green
{
margin-top: 32px;
}
.block-mt-yellow
{
margin-top: 24px;
}
.block-mt-orange
{
margin-top: 17px;
}
.block-mb-purple
{
margin-bottom: 72px;
}
.block-mb-dark-blue
{
margin-bottom: 56px;
}
.block-mb-blue
{
margin-bottom: 48px;
}
.block-mb-green
{
margin-bottom: 32px;
}
.block-mb-yellow
{
margin-bottom: 24px;
}
.block-mb-orange
{
margin-bottom: 17px;
}
h1
{
font-size: 36px;
}
h2
{
font-size: 23px;
}
h3
{
font-size: 17px;
}
p
{
font-size: 15px;
}
a
{
font-size: 15px;
}
ul li
{
font-size: 15px;
}
#detailed-search
{
height: 361px;
top: calc(50% - 180px);
left: 16px;
right: 16px;
border-radius: 3px;
width: auto;
.modal-form-content
{
padding-bottom: 56px;
}
}
#form-detailed-search input
{
width: 100% !important;
height: 56px !important;
}
.block-to-rate, .block-to-edit
{
width: 100%;
}
}
@media(max-width: 550px)
{
......@@ -787,7 +972,7 @@
max-width: 100%;
margin-bottom: 30px;
}
.wrapper-map
.wrapper-map, .map-api
{
height: 270px;
}
......@@ -806,12 +991,6 @@
margin-top: 25px;
margin-left: 0;
}
.modal-form-content
{
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.all-articles .row .col-3
{
max-width: 100%;
......
src/scss/style.scss
View file @ e49e73a4
......@@ -261,7 +261,7 @@ button
}
p
{
color: $color-hover;
color: $color-hover !important;
}
}
......@@ -694,6 +694,28 @@ ul
}
}
// Обертка для таблиц
.wrapper-table
{
width: 100%;
overflow-x: auto;
}
.wrapper-table::-webkit-scrollbar
{
width: 5px;
height: 5px;
border-radius: 3px;
background-color: #b7b6c3;
}
.wrapper-table::-webkit-scrollbar-track { background-color: #b7b6c3;}
.wrapper-table::-webkit-scrollbar-track-piece { background-color: #ffffff;}
.wrapper-table::-webkit-scrollbar-thumb { height: 5px; background-color: #b7b6c3; border-radius: 3px;}
.wrapper-table::-webkit-scrollbar-corner { background-color: #b7b6c3;}
.wrapper-table::-webkit-resizer {background-color: #b7b6c3;}
// Стили для radio
......@@ -1266,10 +1288,6 @@ textarea.field-error
}
&__block
{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 18px;
background-color: #fff;
position: absolute;
......@@ -1892,7 +1910,7 @@ textarea.field-error
&_fixed
{
transform: translateY(0);
z-index: 5;
z-index: 4;
opacity: 1;
}
}
......@@ -1913,7 +1931,6 @@ textarea.field-error
top: 0;
font-family: Montserrat Bold;
font-size: 12px;
font-stretch: normal;
font-style: normal;
line-height: normal;
......@@ -1923,6 +1940,16 @@ textarea.field-error
// Быстрый поиск
.input-search-mobile
{
display: none;
}
.button-detailed-search
{
display: none;
}
.quick-job-search
{
h1
......@@ -1942,6 +1969,7 @@ textarea.field-error
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
input[type="text"]
{
width: 28%;
......@@ -1970,7 +1998,8 @@ textarea.field-error
&__link
{
display: flex;
margin-right: 15px;
margin-left: 7.5px;
margin-right: 7.5px;
margin-bottom: 15px;
align-items: center;
font-family: Montserrat Regular;
......@@ -4015,6 +4044,10 @@ ymaps[class$='pie-chart-content']
.block-radio
{
margin-right: 40px;
p
{
width: auto;
}
}
&__name
{
......@@ -4181,22 +4214,31 @@ input[type="submit"]
padding-left: 25px;
padding-right: 25px;
}
.detailed-description-block__name
.detailed-description
{
width: 22%;
p
{
line-height: normal;
}
}
.detailed-description-block__text
{
width: 76%;
p
.col-3, .col-9
{
line-height: normal;
display: block;
// padding-left: 16
// padding-right: auto;
}
}
// .detailed-description-block__name
// {
// width: 22%;
// p
// {
// line-height: normal;
// }
// }
// .detailed-description-block__text
// {
// width: 76%;
// p
// {
// line-height: normal;
// }
// }
}
.sidebar-image
{
......@@ -4236,6 +4278,7 @@ input[type="submit"]
background-color: #fff;
border-top: 4px solid #dddce8;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
min-width: 895px;
&-header
{
padding: 22px 39px 22px 27px;
......@@ -4306,6 +4349,12 @@ input[type="submit"]
.button-text
{
font-size: 12px;
p
{
font-size: 12px;
width: 85%;
margin: 0;
}
}
.button-text:nth-child(2)
{
......@@ -4426,6 +4475,7 @@ input[type="submit"]
background-color: #fff;
border-top: 4px solid #dddce8;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
min-width: 895px;
&-header
{
padding: 20px 30px 20px 20px;
......@@ -4440,7 +4490,7 @@ input[type="submit"]
{
font-family: Raleway Bold;
font-size: 14px;
text-align: center;
font-stretch: normal;
font-style: normal;
line-height: normal;
......
webpack.config.js
View file @ e49e73a4
......@@ -8,7 +8,7 @@ const isDev = process.env.NODE_ENV = 'development';
const pages = ['index', 'articles', 'faq', 'vacancies-list', 'current-article', 'main', 'service-rules', 'access-account', 'password-recovery', 'registration', 'companies-list',
'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'];
'post-resume-step1', 'post-resume-step2', 'post-resume-step3', 'post-resume-step4', 'current-resume', 'index-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