@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-vacancies-table {
padding-top: clamp(40px, 8vw, 140px);
padding-bottom: clamp(40px, 8vw, 140px);
.filters {
&__inner {
background-color: var(--background-color, var(--white)) !important;
}
}
.results{
display: flex;
flex-direction: column;
gap: 1rem;
}
.pagination{
margin-top: 1rem;
&-navigation{
@include fluid-type(18,26)
}
}
.career-table-item {
background-color: var(--primary);
color: var(--white);
display: flex;
flex-wrap: wrap;
padding: 20px;
text-decoration: none;
gap: 1rem 2rem;
border-radius: 10px;
font-size: 16px;
position: relative;
@include bp($md) {
font-size: 18px;
align-items: center;
}
@include bp($md, true) {
flex-direction: column;
flex-wrap: nowrap;
}
&:hover {
.arrow-icon {
background-color: var(--secondary);
}
}
&__title {
@include fluid-type(18, 22);
flex-grow: 1;
flex-basis: 100%;
@include bp($md) {
flex-basis: 40%;
}
}
&__location {
flex-basis: 15%;
flex-grow: 1;
}
&__employment-type {
flex-basis: 15%;
}
&__arrow {
display: flex;
justify-content: flex-end;
position: relative;
@include bp($md) {
height: 40px;
}
@include bp($md, true) {
position: absolute;
bottom: 1rem;
right: 1rem;
}
width: 40px;
height: 40px;
border: solid var(--white) 1px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
transition: .3s ease-in-out;
cursor: pointer;
.ico{
width: 20px;
height: 20px;
&--arrow-right{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A");
}
}
}
&:hover {
.career-table-item__arrow {
background-color: var(--white);
.ico--arrow-right {
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
}
}
}
}
.nice-select {
border: none;
width: 100%;
background-color: var(--white);
display: flex;
align-items: center;
font-family: 'Source Sans 3';
font-size: 22px;
&-dropdown {
border-radius: 15px;
border: 2px solid var(--secondary);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width:100%;
z-index: 500;
}
}
}
class VacanciesTable {
constructor(block) {
this.block = block;
this.init();
}
init() {
const feed = this.block.querySelector('[data-post-feed]');
const resultsElem = feed.querySelector('.results');
const resultsMeta = feed.querySelector('.results-meta');
const scrollHint = feed.querySelector('.filters__scroll-hint');
const filters = feed.querySelector('.filters__inner');
const niceSelects = this.block.querySelectorAll('select');
niceSelects.forEach((select) => {
NiceSelect.bind(select);
});
// on scroll hint, scroll the filters horizontally by 100px
if (scrollHint) {
scrollHint.addEventListener('click', () => {
filters.scrollBy({
left: 200,
behavior: 'smooth',
});
});
}
if (feed) {
feed.addEventListener('post-feed-pre-update', (data) => {
// scroll to top of block, but add offset of 100
const blockTop = this.block.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: blockTop - 100,
behavior: 'smooth',
});
// get dropdown
const dropdown = feed.querySelector('.btn--dropdown');
// console.log(dropdown);
if (dropdown) {
dropdown.classList.remove('open');
}
});
feed.addEventListener('post-feed-update', (data) => {
// console.log(data.detail);
if (!data) {
return;
}
if (!data.detail && !data.detail.results) {
if(data.results){
resultsElem.innerHTML = data.results;
}
return;
}
const results = data.detail.results;
resultsElem.innerHTML = '';
results.forEach(result => {
resultsElem.innerHTML += result;
});
resultsElem.classList.remove('is-page-one');
totalPostsElem.innerHTML = data.detail.found_posts;
});
feed.addEventListener('post-feed-error', (data) => {
if(data.detail && data.detail.reason){
resultsElem.innerHTML = data.detail.reason;
}
});
}
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-vacancies-table').forEach((block) => {
new VacanciesTable(block);
});
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/vacancies-table",
"title": "Vacancies Table",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-vacancies-table.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Vacancies Table",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": ["file:../../assets/css/vacancies-table/block-vacancies-table.css", "nice-select"],
"viewScript": ["nice-select","vacancies-table"]
}