Commit 3fee6418 authored by Sergey's avatar Sergey

Pages profiles for employer version is done

parent 90bfec98
......@@ -303,7 +303,7 @@ if(window.matchMedia('(max-width: 650px)').matches)
// Для input[type="file"]
var inputFile = document.querySelectorAll('input[type="file"]');
let inputFile = document.querySelectorAll('input[type="file"]');
if(inputFile.length)
{
......@@ -311,6 +311,7 @@ if(inputFile.length)
{
input.addEventListener('change', function(e)
{
if(input.id === 'load-photo') return;
var value = input.value;
value = value.replace( 'C:\\fakepath\\', '');
input.parentElement.querySelector('.file-value').innerHTML = value;
......@@ -896,28 +897,29 @@ if(buttonMailingPhone && buttonMailingEmail)
// Загрузка фото
let canvasAvatar = document.querySelector('#canvas-avatar');
// let canvasPhoto = document.querySelector('#canvas-photo');
if(canvasAvatar)
let loadPhoto = document.querySelector('#load-photo');
let photoBlock = document.querySelector('.load-photo__block');
if(loadPhoto && photoBlock)
{
let ctx = canvasAvatar.getContext("2d");
// let ctx = canvasPhoto.getContext("2d");
let initialAvatar = new Image();
// let initialAvatar = new Image();
// Загружаем файл изображения
initialAvatar.src = "../img/img_substrate.png";
initialAvatar.onload = function()
{
ctx.drawImage(initialAvatar, 0, 0, 210, 210);
}
// initialAvatar.src = "../img/img_substrate_employee.png";
let loadAvatar = document.querySelector('#load-avatar');
// initialAvatar.onload = function()
// {
// ctx.drawImage(initialAvatar, 0, 0, 210, 210);
// }
loadAvatar.addEventListener('change', () => {
loadPhoto.addEventListener('change', () => {
let file = loadAvatar.files[0];
let file = loadPhoto.files[0];
let img;
let reader = new FileReader();
......@@ -927,11 +929,23 @@ if(canvasAvatar)
function drawNewImage()
{
img = new Image();
img.src = reader.result;
img.onload = function()
{
ctx.drawImage(img, 0, 0, 210, 210);
// 1 способ через канвас без масштабирования
// ctx.drawImage(img, 0, 0, 210, 210);
// 2 способ через канвас с масштабированием
// let scaleFactor = Math.min((canvasPhoto.width / img.width),(canvasPhoto.height / img.height));
// ctx.drawImage(img,0,0,img.width*scaleFactor,img.height*scaleFactor);
// console.log(canvasPhoto.width, canvasPhoto.height, img.width, img.height, scaleFactor);
// 3 способ через background
photoBlock.style.backgroundImage = 'url(' + img.src + ')';
}
img.src = reader.result;
}
});
......
......@@ -323,7 +323,7 @@
<a href="profile.html">Профиль</a>
</li>
<li>
<a href="profile-editing.html">Редактирование профиля</a>
<a href="profile-editing.html">Профиль - Редактирование</a>
</li>
<li>
<a href="my-resumes.html">Мои резюме</a>
......@@ -456,6 +456,18 @@
<li>
<a href="mailing.html">Рассылка</a>
</li>
<li>
<a href="profile-employer.html">Профиль</a>
</li>
<li>
<a href="profile-editing-employer.html">Профиль - Редактирование</a>
</li>
<li>
<a href="profile-preview-employer.html">Профиль - Предпросмотр</a>
</li>
<li>
<a href="profile-employee.html">Профиль - Сотрудник</a>
</li>
</ul>
</div>
</div>
......
......@@ -322,12 +322,12 @@
</div>
<div class="block-mt-blue">
<form action="" name="post-resume-step1" id="post-resume-step1">
<div class="load-avatar">
<div class="load-avatar__block">
<canvas id="canvas-avatar" width="210" height="210"></canvas>
<div class="load-photo">
<div class="load-photo__block" style="background-image: url(./img/img_substrate_employee.png);">
<!-- <canvas id="canvas-photo" width="210" height="210"></canvas> -->
</div>
<label for="load-avatar">
<input type="file" name="load-avatar" id="load-avatar" hidden>
<label for="load-photo">
<input type="file" name="load-photo" id="load-photo" accept="image/gif, image/jpeg" hidden>
Загрузить фото
</label>
</div>
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -10,6 +10,11 @@
padding-left: 0;
padding-right: 0;
}
.load-photo
{
position: relative;
margin-bottom: 32px;
}
}
@media(max-width: 1280px)
{
......@@ -158,11 +163,6 @@
flex: 0 0 50%;
max-width: 50%;
}
.load-avatar
{
position: relative;
margin-bottom: 32px;
}
.header-scroll-right .button-text p
{
display: none;
......
......@@ -581,24 +581,24 @@ select
right: 20px;
}
.choices.disabled
.choices.is-disabled
{
pointer-events: none;
}
.choices.disabled .choices__inner
.choices.is-disabled .choices__inner
{
border: solid 2px #dddce8 !important;
border-color: #dddce8 !important;
background: transparent;
}
.choices.disabled .choices__list--single .choices__item
.choices.is-disabled .choices__list--single .choices__item
{
color: #b7b6c3 !important;
}
.choices.disabled[data-type*=select-one]:after
.choices.is-disabled[data-type*=select-one]:after
{
border-top-color: #dddce8;
}
......@@ -845,6 +845,10 @@ ul
border-color:#dddce8;
background: transparent;
}
input[type="radio"]:disabled ~ p
{
color: #b7b6c3;
}
input[type="radio"]:disabled ~ .radio:before
{
background-color: #b7b6c3;
......@@ -982,6 +986,11 @@ textarea.field-error
border-color: red !important;
}
textarea:disabled
{
background-color: transparent;
}
// Пагинация
......@@ -4281,7 +4290,7 @@ input[type="submit"]
&-row
{
margin-left: -25px;
margin-right: -25px;
margin-right: -5px;
.col-3
{
padding-left: 25px;
......@@ -4290,7 +4299,7 @@ input[type="submit"]
.col-9
{
padding-left: 25px;
padding-right: 25px;
padding-right: 5px;
}
.detailed-description
{
......@@ -4762,23 +4771,43 @@ input[type="submit"]
// Страница Подписка
.subscription, .mailing
.row
{
form
{
.block-checkbox
.block-checkbox, .block-radio
{
margin-top: 0;
margin-bottom: 22px;
label
{
margin: 0;
}
.col-4 .block-checkbox:last-child
}
.col-4
{
p
{
font-size: 15px;
}
}
.col-8
{
.col-4 .block-checkbox:last-child, .col-4 .block-radio:last-child,
.col-12 .block-checkbox:last-child, .col-12 .block-radio:last-child
{
margin-bottom: 0;
}
.col-4 .block-checkbox:first-child
.col-4 .block-checkbox:first-child, .col-4 .block-radio:first-child,
.col-12 .block-checkbox:first-child, .col-12 .block-radio:first-child
{
margin-bottom: 22px;
}
}
}
.subscription, .mailing
{
form
{
.other-position
{
display: flex;
......@@ -4908,17 +4937,21 @@ input[type="submit"]
}
}
.load-avatar
.load-photo
{
width: 210px;
height: 263px;
position: absolute;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
right: 0;
top: 0;
&__block
{
width: 100%;
height: 210px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
label
{
......@@ -5732,6 +5765,142 @@ hr
}
}
// Таблица сотрудников
.employees
{
background-color: #fff;
border-top: 4px solid #dddce8;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
&-header
{
padding: 22px 20px;
&-row
{
display: flex;
justify-content: space-between;
align-items: center;
&-block
{
display: block;
p
{
font-family: Raleway Bold;
font-size: 14px;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
color: $color-primary;
}
}
}
}
&-content
{
&-row
{
border-top: 1px solid #dddce8;
padding: 22px 20px;
display: flex;
justify-content: space-between;
align-items: center;
&-block
{
display: block;
p
{
line-height: normal;
}
}
}
&-row_new
{
background-color: rgba(146, 200, 62, 0.1);
.employees-label-column
{
p
{
opacity: 1;
pointer-events: auto;
}
}
.employees-button-column
{
.add-employee
{
opacity: 1;
pointer-events: auto;
}
}
}
}
&-label-column
{
width: 10%;
p
{
opacity: 0;
pointer-events: none;
font-family: Montserrat Bold;
font-size: 14px;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-hover;
}
}
&-name-column
{
width: 22%;
}
&-button-column
{
width: 14%;
display: flex;
justify-content: center;
align-items: center;
.add-employee
{
opacity: 0;
pointer-events: none;
padding-bottom: 4px;
line-height: normal;
}
}
&-status-column
{
width: 14%;
text-align: center;
}
&-email-column
{
width: 22%;
}
&-remove-column
{
width: 9%;
display: flex;
justify-content: center;
align-items: center;
.remove-employee
{
border: 0;
display: block;
}
.remove-employee:hover
{
.img-svg path
{
fill: $color-hover;
}
}
}
}
// Футер
......
......@@ -12,7 +12,8 @@ const pages = ['index', 'articles', 'faq', 'vacancies-list', 'current-article',
'current-article-employer', 'service-rules-employer', 'access-account-employer', 'tariffs', 'password-recovery-employer', 'registration-employer',
'resumes-list', 'resumes-map', 'current-resume-employer', 'resume-paid', 'current-vacancy-employer', 'favorites-employer', 'my-vacancies',
'response-employer', 'response-vacancy-employer1', 'response-vacancy-employer2', 'employee-invitation', 'payment-services', 'invoice-payment', 'my-orders',
'post-vacancy-step1', 'post-vacancy-step2', 'post-vacancy-step3', 'post-vacancy-step4', 'post-vacancy-step5', 'mailing', 'profile-employer', 'profile-editing-employer'];
'post-vacancy-step1', 'post-vacancy-step2', 'post-vacancy-step3', 'post-vacancy-step4', 'post-vacancy-step5', 'mailing', 'profile-employer', 'profile-editing-employer',
'profile-preview-employer', 'profile-employee'];
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