Skip to content

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

Pages favorites vacancies, response and current response is done

parent be37a91e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1039 additions and 86 deletions
src/current-response.html 0 → 100644
View file @ a26c4ea9
This diff is collapsed.
src/favorites-vacancies-list.html
View file @ a26c4ea9
...@@ -157,11 +157,11 @@ ...@@ -157,11 +157,11 @@
<div class="sidebar-image block-mt-blue" style="background-image: url(./img/img_banner5.png);"></div> <div class="sidebar-image block-mt-blue" style="background-image: url(./img/img_banner5.png);"></div>
</div> </div>
<div class="col-9"> <div class="col-9">
<a href="#" class="button-text favorites-vacancies-map"> <a href="#" class="button-text favorites-vacancies-ref">
<img class="img-svg" src="./img/icon_map.svg" alt=""> <img class="img-svg" src="./img/icon_map.svg" alt="">
Показать на карте Показать на карте
</a> </a>
<div class="favorites-list block-mt-yellow"> <div class="favorites-list">
<div class="row favorites-list-row"> <div class="row favorites-list-row">
<div class="col-4"> <div class="col-4">
<a href="#" class="image-vacancies" style="background-image: url(./img/img_banner3.png);"></a> <a href="#" class="image-vacancies" style="background-image: url(./img/img_banner3.png);"></a>
......
src/favorites-vacancies-map.html
View file @ a26c4ea9
...@@ -157,7 +157,11 @@ ...@@ -157,7 +157,11 @@
<div class="sidebar-image block-mt-blue" style="background-image: url(./img/img_banner5.png);"></div> <div class="sidebar-image block-mt-blue" style="background-image: url(./img/img_banner5.png);"></div>
</div> </div>
<div class="col-9"> <div class="col-9">
<a href="#" class="button-text favorites-vacancies-ref">
<img class="img-svg" src="./img/icon_list.svg" alt="">
Показать списком
</a>
<div class="map-api" id="favorites-vacancies-map"></div>
</div> </div>
</div> </div>
</div> </div>
......
src/img/icon_response.svg 0 → 100644
View file @ a26c4ea9
<svg width="19" height="12" viewBox="0 0 19 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M9.78025 7.84L0.755859 0.8V0C4.45586 0 15.1949 0 18.8046 0V0.8L9.78025 7.84ZM9.78025 10L0.755859 2.88C0.755859 6.32 0.755859 8.4 0.755859 12C4.36562 12 15.1046 12 18.8046 12C18.8046 8.4 18.8046 6.32 18.8046 2.88L9.78025 10Z" fill="#262262"/>
</g>
<defs>
<clipPath id="clip0">
<rect x="0.755859" width="18.0488" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
src/img/logo_employer2.svg 0 → 100644
View file @ a26c4ea9
This diff is collapsed.
src/js/main.js
View file @ a26c4ea9
...@@ -325,6 +325,8 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -325,6 +325,8 @@ document.addEventListener('DOMContentLoaded', () => {
let vacanciesMap = document.querySelector('#vacancies-map'); let vacanciesMap = document.querySelector('#vacancies-map');
let companiesMap = document.querySelector('#companies-map'); let companiesMap = document.querySelector('#companies-map');
let favoritesVacanciesMap = document.querySelector('#favorites-vacancies-map');
if(vacanciesMap) if(vacanciesMap)
{ {
fetch('./php/vacancies.php') fetch('./php/vacancies.php')
...@@ -521,6 +523,106 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -521,6 +523,106 @@ document.addEventListener('DOMContentLoaded', () => {
}) })
}); });
} }
if(favoritesVacanciesMap)
{
fetch('./php/favorites-vacancies.php')
.then(response => response.json())
.then(data => {
let apiKey = 'e158c5a2-b717-4552-9b2d-e21a7b7d540b';
getScript('https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=' + apiKey, function(){
ymaps.ready(function ()
{
let map = new ymaps.Map('favorites-vacancies-map', {
center: [55.751574, 37.573856],
zoom: 12,
controls: []
})
let objectManagerData = {
"type": "FeatureCollection",
"features": []
};
let MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div class="balloon-header-vacancy"><div class="balloon-header-vacancy__left"><p>$[properties.nameWork]</p><p>$[properties.salary]</p></div><div class="balloon-header-vacancy__right"><a class="button-text" href="current-vacancy.html"><img class="img-svg" src="./img/arrow_balloon.svg"></a></div></div>' +
'<div class="balloon-content-vacancy"><div class="balloon-content-vacancy-block"><div class="balloon-content-vacancy-block__image"><img src="$[properties.logoCompany]"></div><p class="balloon-content-vacancy-block__name">$[properties.nameCompany]</p></div></div>'
);
data.forEach((item, index) => {
let featureObj = {
"type": "Feature",
"id": index,
"geometry": {
"type": "Point",
"coordinates": item.coords
},
"properties": {
"nameWork": item.nameWork,
"salary": item.salary,
"nameCompany": item.nameCompany,
"logoCompany":item.logoCompany
},
"options": {
"iconLayout": "default#image",
"iconColor": "#dc3535",
"iconImageHref": "./img/icon_pin.svg",
"iconImageSize": [33, 47],
"balloonOffset": [-70, -45],
"balloonContentLayout": MyBalloonContentLayout,
"hideIconOnBalloonOpen": false,
"balloonCloseButton": false,
"zIndex": 100,
"zIndexHover": 500,
"zIndexActive": 1000
}
};
objectManagerData["features"].push(featureObj);
});
let objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 128,
clusterIconLayout: "default#pieChart",
clusterIconPieChartStrokeWidth: 0
});
map.geoObjects.add(objectManager);
objectManager.add(objectManagerData);
map.setBounds(map.geoObjects.getBounds());
objectManager.objects.events.add('click', function (e) {
var objectId = e.get('objectId');
if (objectManager.objects.balloon.isOpen(objectId)) {
objectManager.objects.balloon.close();
}
map.events.add('click', function (e)
{
if(e.get('target') === map)
{
objectManager.objects.balloon.close();
}
});
});
objectManager.objects.events.add('balloonopen', function(e) {
objectManager.objects.setObjectOptions(e.get('target')._objectIdWithOpenBalloon, {'iconImageHref': './img/icon_pin_active.svg', 'zIndex': 1000});
});
objectManager.objects.events.add('balloonclose', function(e) {
objectManager.objects.setObjectOptions(e.get('target')._objectIdWithOpenBalloon, {'iconImageHref': './img/icon_pin.svg', 'zIndex': 250});
});
})
})
});
}
}); });
// Форма Поделиться // Форма Поделиться
......
src/main.html
View file @ a26c4ea9
...@@ -185,9 +185,15 @@ ...@@ -185,9 +185,15 @@
<li> <li>
<a href="favorites-vacancies-list.html">Избранное - Список</a> <a href="favorites-vacancies-list.html">Избранное - Список</a>
</li> </li>
<!-- <li> <li>
<a href="favorites-vacancies-map.html">Избранное - На карте</a> <a href="favorites-vacancies-map.html">Избранное - На карте</a>
</li> --> </li>
<li>
<a href="response.html">Отклики</a>
</li>
<li>
<a href="current-response.html">Отклик детальная</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
src/php/favorites-vacancies.php 0 → 100644
View file @ a26c4ea9
[
{
"coords": ["56.27361", "44.087077"],
"nameWork": "Разнорабочий",
"salary": "от 27 000 руб./мес",
"nameCompany": "Сеть магазинов «Пятёрочка»",
"logoCompany": "./img/img_balloon_brand.svg"
},
{
"coords": ["56.209005", "44.10075"],
"nameWork": "Разнорабочий",
"salary": "от 27 000 руб./мес",
"nameCompany": "Сеть магазинов «Пятёрочка»",
"logoCompany": "./img/img_balloon_brand.svg"
},
{
"coords": ["56.147671", "44.196034"],
"nameWork": "Разнорабочий",
"salary": "от 27 000 руб./мес",
"nameCompany": "Сеть магазинов «Пятёрочка»",
"logoCompany": "./img/img_balloon_brand.svg"
},
{
"coords": ["56.153864", "44.209581"],
"nameWork": "Разнорабочий",
"salary": "от 27 000 руб./мес",
"nameCompany": "Сеть магазинов «Пятёрочка»",
"logoCompany": "./img/img_balloon_brand.svg"
}
]
\ No newline at end of file
src/response.html 0 → 100644
View file @ a26c4ea9
This diff is collapsed.
src/scss/style.scss
View file @ a26c4ea9
...@@ -3585,9 +3585,10 @@ input[type="submit"] ...@@ -3585,9 +3585,10 @@ input[type="submit"]
// Страница Избранное - Список // Страница Избранное - Список
.favorites-vacancies-map .favorites-vacancies-ref
{ {
width: max-content; width: max-content;
margin-bottom: 32px;
} }
.favorites-list .favorites-list
...@@ -3605,6 +3606,159 @@ input[type="submit"] ...@@ -3605,6 +3606,159 @@ input[type="submit"]
} }
} }
// Страница Отклики
.response
{
background-color: #fff;
border-top: 4px solid #dddce8;
box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
&-header
{
padding: 20px 30px 20px 20px;
&-row
{
display: flex;
justify-content: space-between;
&-block
{
display: flex;
p
{
font-family: Raleway Bold;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-primary;
}
img
{
margin-left: 8px;
}
}
&-other-blocks
{
display: flex;
justify-content: space-between;
padding-left: 140px;
width: 76%;
}
}
}
&-content
{
&-row
{
display: flex;
justify-content: space-between;
&-left
{
width: 24%;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid #dddce8;
}
&-right
{
width: 76%;
&-wrapper
{
padding-left: 150px;
border-top: 1px solid #dddce8;
.response-content-row
{
padding-right: 30px;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid #dddce8;
}
.response-content-row:nth-child(1)
{
border: 0;
}
}
}
&-block
{
display: flex;
}
}
}
&-name-column
{
justify-content: flex-start;
width: 24%;
}
&-company-column
{
justify-content: flex-start;
width: 40%;
}
&-date-column
{
justify-content: center;
width: 25%;
}
&-feedback-column
{
justify-content: center;
width: 20%;
}
&-ref
{
border: 0;
display: block;
transition: .3s;
}
&-ref:hover
{
.img-svg path
{
fill: $color-hover;
}
}
&_new
{
background-color: rgba(146, 200, 62, 0.1);
position: relative;
}
&_new:before
{
content: attr(data-label);
position: absolute;
font-family: Montserrat Bold;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $color-hover;
left: 40px;
top: 26px;
}
}
// Отклик детальная
#answer-employer
{
label
{
display: block;
margin-bottom: 10px;
}
textarea
{
width: 610px;
height: 198px;
}
}
.footer .footer
{ {
......
webpack.config.js
View file @ a26c4ea9
...@@ -7,7 +7,7 @@ const webpack = require('webpack'); ...@@ -7,7 +7,7 @@ const webpack = require('webpack');
const isDev = process.env.NODE_ENV = 'development'; 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', 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', 'vacancies-map', 'companies-map', 'current-vacancy', 'current-company', '404', 'profile', 'profile-editing', 'my-resumes', 'favorites-vacancies-list',
'favorites-vacancies-map']; 'favorites-vacancies-map', 'response', 'current-response'];
const webpackConfig = { const webpackConfig = {
context: path.resolve(__dirname, 'src'), 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