spawntree
/
ihk24
2
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

static election templates

bugfix/microsites
Florian Eisenmenger 2 роки тому
джерело
76415594a3
коміт
e7844f39d3
4 змінених файлів з 899 додано та 258 видалено
Розділений перегляд
Параметри порівняння
Показати статистику Завантажити патч Завантажити файл різниці
  1. +30
    -26
      ihk-election-static-templates/index.html
  2. +56
    -0
      ihk-election-static-templates/iss.html
  3. +281
    -232
      ihk-election-static-templates/script.js
  4. +532
    -0
      ihk-election-static-templates/styles.css

+ 30
- 26
ihk-election-static-templates/index.html Переглянути файл

@@ -5326,33 +5326,37 @@
<div class="page-wrapper">
<div class="page-content">
<div class="container">
<div style="" class="election-form"><h2>Finden Sie die Branchenvertreter:innen Ihrer Region</h2>
<form class="election-form--form">
<div class="input-wrapper"><select id="election-group" name="election-group" required="">
<option disabled="">Wahlgruppe</option>
</select></div>
<div class="input-wrapper"><select id="election-area" name="election-area" required="">
<option disabled="">Wahlbezirk</option>
</select></div>
<div class="input-wrapper"><input id="election-searchstring" name="election-searchstring"
placeholder="Suche nach Name oder Firma" type="text">
</div>
<button class="search-submit secondary" type="submit"></button>
</form>
</div>
<div class="election-result-list">
<div class="election-result-list--header">
<div class="election-result-list--header-left">

</div>
<div class="election-result-list-badge normal">

</div>
</div>
<div class="election-result-list--inner">

</div>
</div>
<object data="iss.html" width="100%" height="300"></object>


<!-- <div style="" class="election-form"><h2>Finden Sie die Branchenvertreter:innen Ihrer Region</h2>-->
<!-- <form class="election-form&#45;&#45;form">-->
<!-- <div class="input-wrapper"><select id="election-group" name="election-group" required="">-->
<!-- <option disabled="">Wahlgruppe</option>-->
<!-- </select></div>-->
<!-- <div class="input-wrapper"><select id="election-area" name="election-area" required="">-->
<!-- <option disabled="">Wahlbezirk</option>-->
<!-- </select></div>-->
<!-- <div class="input-wrapper"><input id="election-searchstring" name="election-searchstring"-->
<!-- placeholder="Suche nach Name oder Firma" type="text">-->
<!-- </div>-->
<!-- <button class="search-submit secondary" type="submit"></button>-->
<!-- </form>-->
<!-- </div>-->
<!-- <div class="election-result-list">-->
<!-- <div class="election-result-list&#45;&#45;header">-->
<!-- <div class="election-result-list&#45;&#45;header-left">-->

<!-- </div>-->
<!-- <div class="election-result-list-badge normal">-->

<!-- </div>-->
<!-- </div>-->
<!-- <div class="election-result-list&#45;&#45;inner">-->

<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>


+ 56
- 0
ihk-election-static-templates/iss.html Переглянути файл

@@ -0,0 +1,56 @@
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<div id="static-election">
<div id="static-election-overview">
<div style="" class="election-form">
<h2>Finden Sie die Branchenvertreter:innen Ihrer Region</h2>
<form class="election-form--form">
<div class="input-wrapper"><select id="election-group" name="election-group" required="">
<option disabled="">Wahlgruppe</option>
</select></div>
<div class="input-wrapper"><select id="election-area" name="election-area" required="">
<option disabled="">Wahlbezirk</option>
</select></div>
<div class="input-wrapper"><input id="election-searchstring" name="election-searchstring"
placeholder="Suche nach Name oder Firma" type="text">
</div>
<button class="search-submit secondary" type="submit"></button>
</form>
</div>
<div class="election-result-list">
<div class="election-result-list--header">
<div class="election-result-list--header-left">

</div>
<div class="election-result-list-badge normal">

</div>
</div>
<div class="election-result-list--inner">

</div>
</div>
</div>
<div id="static-election-detail">
<div class="election-detail">
<div class="election-detail--text">

</div>
<div class="election-detail--video">

</div>
<div class="election-detail--info">

</div>
<div class="election-detail--back"><a class="btn primary btn-regular" href="#">Zur
Kandidatenübersicht</a></div>
<div class="election-detail--more contact-wrapper"><h3>IHK-Wahlbüro</h3>
<p>Wir beantworten gerne Ihre Fragen zur IHK-Wahl 2024. Rufen Sie uns einfach an.</p>
<ul class="contact-buttons">
<li><a class="icon-telefon btn white btn-small icon-left" href="tel:04141/524-0">04141/524-0</a>
</li>
</ul>
</div>
</div>
</div>
</div>

+ 281
- 232
ihk-election-static-templates/script.js Переглянути файл

@@ -2,13 +2,12 @@ document.addEventListener("DOMContentLoaded", function () {

let groupSelectElement = document.getElementById("election-group"),
areaSelectElement = document.getElementById("election-area"),
formContainer = document.querySelector(".election-form--form"),
electionDetail = document.querySelector(".election-detail");
formContainer = document.querySelector(".election-form--form");

// STEP 1: LOAD SEARCH ITEMS

// Load all groups and areas
if(formContainer) {
if (formContainer) {
fetch("https://ihk-wahl.info/selects?ihk_id=M6uOiDGzTD7SlhF1")
.then(response => {
if (!response.ok) {
@@ -99,6 +98,7 @@ document.addEventListener("DOMContentLoaded", function () {
});

document.addEventListener("click", function (event) {
// click one of the search again links
if (event.target && (event.target.getAttribute("data-search") === "group" || event.target.getAttribute("data-search") === "area")) {
let id = event.target.getAttribute("data-id");
document.getElementById("election-searchstring").value = "";
@@ -111,199 +111,26 @@ document.addEventListener("DOMContentLoaded", function () {
}
submitForm();
}
});
}

// STEP 3: LOAD DETAIL PAGE

// Get the URL query string parameters
const queryParams = new URLSearchParams(window.location.search);

if (electionDetail && queryParams.has('ihk_id') && queryParams.has('c')) {
// Get the values of the 'c' and 'a' parameters
const ihkIdValue = queryParams.get('ihk_id');
const cValue = queryParams.get('c');

console.log('Value of "c":', ihkIdValue);
console.log('Value of "a":', cValue);

let electionDetailText = electionDetail.querySelector('.election-detail--text'),
electionDetailVideo = electionDetail.querySelector('.election-detail--video'),
electionDetailInfo = electionDetail.querySelector('.election-detail--info'),
htmlText = '',
htmlVideo = '',
htmlInfo = '';

fetch("https://ihk-wahl.info/candidate?ihk_id=" + ihkIdValue + "&candidate=" + cValue)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
// Build the detail page for the candidate

htmlText += data.img_path ? `
<img src="${data.img_path}" loading="lazy" class="loading" width="545" height="526">
` : '';

htmlText += '<div class="text-box">';

htmlText += (data.first_name && data.last_name) ? `
<h1>${data.first_name} ${data.last_name}</h1>
` : '';

htmlText += data.position ? `
<p class="subheadline">${data.position}</p>
` : '';

htmlText += data.election_statement ? `
<h2>Was möchten Sie bewegen?</h2>
<p>${data.election_statement}</p>
` : '';

if (data.twitter_link || data.facebook_link || data.xing_link ||
data.whatsapp_link || data.linkedin_link || data.threema_link ||
data.telegram_link) {
htmlText += `
<div class="social-media">
<p>Meine Kanäle</p>
<ul class="social-icons">
`;
}

htmlText += data.twitter_link ? `
<li><a class="social-share twitter" href="${data.twitter_link}"></a></li>
` : '';

htmlText += data.facebook_link ? `
<li><a class="social-share facebook" href="${data.facebook_link}"></a></li>
` : '';

htmlText += data.xing_link ? `
<li><a class="social-share xing" href="${data.xing_link}"></a></li>
` : '';

htmlText += data.whatsapp_link ? `
<li><a class="social-share whatsapp" href="${data.whatsapp_link}"></a></li>
` : '';

htmlText += data.linkedin_link ? `
<li><a class="social-share linkedin" href="${data.linkedin_link}"></a></li>
` : '';

htmlText += data.threema_link ? `
<li><a class="social-share threema" href="${data.threema_link}"></a></li>
` : '';

htmlText += data.telegram_link ? `
<li><a class="social-share telegram" href="${data.telegram_link}"></a></li>
` : '';

if (data.twitter_link || data.facebook_link || data.xing_link ||
data.whatsapp_link || data.linkedin_link || data.threema_link ||
data.telegram_link) {
htmlText += `
</ul>
</div>
`;
}

htmlText += '</div>';

electionDetailText.innerHTML = htmlText;

htmlVideo += data.video_path ? `
<div className="video-container">
<figure className="video">
<div className="video-box">
` : '';

if (data.video_path && data.video_img_path) {
htmlVideo += `
<video src="${data.video_path}" controls="" poster="${data.video_img_path}"></video>
`;
} else if (data.video_path) {
htmlVideo += `
<video src="${data.video_path}" controls=""></video>
`;
}

htmlVideo += data.video_path ? `
</div>
</figure>
</div>
` : '';

electionDetailVideo.innerHTML = htmlVideo;

htmlInfo += (data.candidate_election_group_id && data.candidate_election_group_name) ? `
<div class="info-box info-box-01">
<p class="info-headline">Wahlgruppe 02</p>
<p class="info-box--content info-box--text">
<a href="${data.candidate_election_group_id}">${data.candidate_election_group_name}</a>
</p>
</div>
` : '';
htmlInfo += (data.candidate_election_district_id && data.candidate_election_district_name) ? `
<div class="info-box info-box-02">
<p class="info-headline">Wahlbezirk 05</p>
<p class="info-box--content info-box--text">
<a href="${data.candidate_election_district_id}">${data.candidate_election_district_name}</a>
</p>
</div>
` : '';

htmlInfo += '<div class="info-box info-box-03">';

htmlInfo += data.company ? `
<p class="info-headline">Unternehmen</p>
<div class="info-box--content">
<p class="headline">${data.company}</p>
` : '';

htmlInfo += data.company_address ? `
<p className="address">${data.company_address}</p>
` : '';

htmlInfo += data.website ? `
<p>
<a href="${data.website}" target="_blank">Unternehmenswebseite</a>
</p>
` : '';

htmlInfo += data.email ? `
<p>
<a href="mailto:${data.email}">E-Mail</a>
</p>
` : '';

if (data.phone) {

htmlInfo += `
<p>
<a href="tel:${formatNumberLink(data.phone)}">${formatNumberOutput(data.phone)}</a>
</p>
`;
}
// click the detail page link
const topBoxElement = event.target.closest(".top-box");
if (topBoxElement) {
let ihkId = topBoxElement.getAttribute("data-ihk_id"),
candidate = topBoxElement.getAttribute("data-c");
showDetailPage(event, ihkId, candidate);
}

htmlInfo += data.company ? `
</div>
` : '';
// click the back button
if (event.target.closest(".election-detail--back a")) {
event.preventDefault();
hideDetailPage();
}
});
}

htmlInfo += '</div>';
// STEP 3 NEW: SET LINK AND LOAD DETAIL PAGE

electionDetailInfo.innerHTML = htmlInfo;
})
.catch(error => {
// Handle errors here
console.error('Fetch error:', error);
});

}
});

function submitForm(e) {
@@ -402,12 +229,12 @@ function submitForm(e) {
sortedCandidates.forEach(function (candidate) {
let html = `
<div class="election-result-list-item">
<a class="top-box" href="index2.html?ihk_id=${data.ihk_id}&c=${candidate.candidate_id}">
<span class="top-box" data-ihk_id="${data.ihk_id}" data-c="${candidate.candidate_id}">
<div class="image-box">
<img src="${candidate.img_path}" loading="lazy" class="loading" width="310" height="310">
</div>
<h3>${candidate.first_name} ${candidate.last_name}</h3>
</a>
</span>
<div class="text-box">
<div class="job-box">
<span class="icon-small-election-group" data-search="group" data-id="${candidate.candidate_election_group_id}">${candidate.candidate_election_group_name}</span>
@@ -434,54 +261,60 @@ function submitForm(e) {
// Return phone number to call
function formatNumberLink(phoneNo) {
const phoneNoStripped = phoneNo.replace(/\D/g, '');

let formatedNo = phoneNoStripped;
if (phoneNoStripped.startsWith('49')) {
// has leading 49 - countrycode
formatedNo = `00${phoneNoStripped}`;
} else if (phoneNoStripped.startsWith('0')) {
if (phoneNoStripped.startsWith('000')) {
// has three leading zeros - countrycode with error?
formatedNo = phoneNoStripped.substr(1);
} else if (phoneNoStripped.startsWith('00')) {
// has two leading zeros - countrycode
// Do nothing
} else {
// has leading zero
formatedNo = `0049${phoneNoStripped.substr(1)}`;
if (phoneNoStripped !== "") {
let formatedNo = phoneNoStripped;
if (phoneNoStripped.startsWith('49')) {
// has leading 49 - countrycode
formatedNo = `00${phoneNoStripped}`;
} else if (phoneNoStripped.startsWith('0')) {
if (phoneNoStripped.startsWith('000')) {
// has three leading zeros - countrycode with error?
formatedNo = phoneNoStripped.substr(1);
} else if (phoneNoStripped.startsWith('00')) {
// has two leading zeros - countrycode
// Do nothing
} else {
// has leading zero
formatedNo = `0049${phoneNoStripped.substr(1)}`;
}
}
return formatedNo;
}
return formatedNo;
return phoneNo;
}

// Return phone number to show on website
function formatNumberOutput(phoneNo) {
const allowedChars = /[0-9\-\/\s]/g;
const phoneNoStripped = phoneNo.match(allowedChars).join('');
let formatedNo = phoneNoStripped;

if (phoneNoStripped.startsWith('49')) {
// has leading 49 - countrycode
formatedNo = `+${phoneNoStripped}`;
} else if (phoneNoStripped.startsWith('0')) {
if (phoneNoStripped.startsWith('000')) {
// has three leading zeros - countrycode with error?
formatedNo = `+${phoneNoStripped.substr(3)}`;
} else if (phoneNoStripped.startsWith('00')) {
// has two leading zeros - countrycode
formatedNo = `+${phoneNoStripped.substr(2)}`;
} else {
// has leading zero
formatedNo = `+49 ${phoneNoStripped.substr(1)}`;
if (phoneNo.match(allowedChars) !== null) {
const phoneNoStripped = phoneNo.match(allowedChars).join('');
let formatedNo = phoneNoStripped;

if (phoneNoStripped.startsWith('49')) {
// has leading 49 - countrycode
formatedNo = `+${phoneNoStripped}`;
} else if (phoneNoStripped.startsWith('0')) {
if (phoneNoStripped.startsWith('000')) {
// has three leading zeros - countrycode with error?
formatedNo = `+${phoneNoStripped.substr(3)}`;
} else if (phoneNoStripped.startsWith('00')) {
// has two leading zeros - countrycode
formatedNo = `+${phoneNoStripped.substr(2, 2)} ${phoneNoStripped.substr(4)}`;

} else {
// has leading zero
formatedNo = `+49 ${phoneNoStripped.substr(1)}`;
}
}
}

// Überprüfe, ob nach "+49" ein Leerzeichen folgt, falls nicht, füge es hinzu
if (formatedNo.startsWith('+49') && !formatedNo.includes(' ', 3)) {
formatedNo = `${formatedNo.slice(0, 3)} ${formatedNo.slice(3)}`;
}
// Überprüfe, ob nach "+49" ein Leerzeichen folgt, falls nicht, füge es hinzu
if (formatedNo.startsWith('+49') && !formatedNo.includes(' ', 3)) {
formatedNo = `${formatedNo.slice(0, 3)} ${formatedNo.slice(3)}`;
}

return formatedNo;
return formatedNo;
}
return phoneNo;
}

// STEP 2B: CLICK BADGE (RELOAD SEARCH)
@@ -500,4 +333,220 @@ function badgeClick(e) {
searchElement.value = "";
}
submitForm();
}
}

// STEP 3: LOAD DETAIL PAGE
function showDetailPage(e, ihkIdValue, cValue) {
let electionDetail = document.querySelector(".election-detail"),
electionDetailText = electionDetail.querySelector('.election-detail--text'),
electionDetailVideo = electionDetail.querySelector('.election-detail--video'),
electionDetailInfo = electionDetail.querySelector('.election-detail--info'),
htmlText = '',
htmlVideo = '',
htmlInfo = '',
staticElectionOverviewElement = document.getElementById("static-election-overview"),
staticElectionDetailElement = document.getElementById("static-election-detail");

fetch("https://ihk-wahl.info/candidate?ihk_id=" + ihkIdValue + "&candidate=" + cValue)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
// Build the detail page for the candidate

htmlText += data.img_path ? `
<img src="${data.img_path}" loading="lazy" class="loading" width="545" height="526">
` : '';

htmlText += '<div class="text-box">';

htmlText += (data.first_name && data.last_name) ? `
<h1>${data.first_name} ${data.last_name}</h1>
` : '';

htmlText += data.position ? `
<p class="subheadline">${data.position}</p>
` : '';

htmlText += data.election_statement ? `
<h2>Was möchten Sie bewegen?</h2>
<p>${data.election_statement}</p>
` : '';

if (data.twitter_link || data.facebook_link || data.xing_link ||
data.whatsapp_link || data.linkedin_link || data.threema_link ||
data.telegram_link) {
htmlText += `
<div class="social-media">
<p>Meine Kanäle</p>
<ul class="social-icons">
`;
}

htmlText += data.twitter_link ? `
<li><a class="social-share twitter" href="${data.twitter_link}"></a></li>
` : '';

htmlText += data.facebook_link ? `
<li><a class="social-share facebook" href="${data.facebook_link}"></a></li>
` : '';

htmlText += data.xing_link ? `
<li><a class="social-share xing" href="${data.xing_link}"></a></li>
` : '';

htmlText += data.whatsapp_link ? `
<li><a class="social-share whatsapp" href="${data.whatsapp_link}"></a></li>
` : '';

htmlText += data.linkedin_link ? `
<li><a class="social-share linkedin" href="${data.linkedin_link}"></a></li>
` : '';

htmlText += data.threema_link ? `
<li><a class="social-share threema" href="${data.threema_link}"></a></li>
` : '';

htmlText += data.telegram_link ? `
<li><a class="social-share telegram" href="${data.telegram_link}"></a></li>
` : '';

if (data.twitter_link || data.facebook_link || data.xing_link ||
data.whatsapp_link || data.linkedin_link || data.threema_link ||
data.telegram_link) {
htmlText += `
</ul>
</div>
`;
}

htmlText += '</div>';

electionDetailText.innerHTML = htmlText;

htmlVideo += data.video_path ? `
<div className="video-container">
<figure className="video">
<div className="video-box">
` : '';

if (data.video_path && data.video_img_path) {
htmlVideo += `
<video src="${data.video_path}" controls="" poster="${data.video_img_path}"></video>
`;
} else if (data.video_path) {
htmlVideo += `
<video src="${data.video_path}" controls=""></video>
`;
}

htmlVideo += data.video_path ? `
</div>
</figure>
</div>
` : '';

electionDetailVideo.innerHTML = htmlVideo;

htmlInfo += (data.candidate_election_group_id && data.candidate_election_group_name) ? `
<div class="info-box info-box-01">
<p class="info-headline">Wahlgruppe 02</p>
<p class="info-box--content info-box--text">
<a href="${data.candidate_election_group_id}">${data.candidate_election_group_name}</a>
</p>
</div>
` : '';
htmlInfo += (data.candidate_election_district_id && data.candidate_election_district_name) ? `
<div class="info-box info-box-02">
<p class="info-headline">Wahlbezirk 05</p>
<p class="info-box--content info-box--text">
<a href="${data.candidate_election_district_id}">${data.candidate_election_district_name}</a>
</p>
</div>
` : '';

htmlInfo += '<div class="info-box info-box-03">';

htmlInfo += data.company ? `
<p class="info-headline">Unternehmen</p>
<div class="info-box--content">
<p class="headline">${data.company}</p>
` : '';

htmlInfo += data.company_address ? `
<p className="address">${data.company_address}</p>
` : '';

htmlInfo += data.website ? `
<p>
<a href="${data.website}" target="_blank">Unternehmenswebseite</a>
</p>
` : '';

htmlInfo += data.email ? `
<p>
<a href="mailto:${data.email}">E-Mail</a>
</p>
` : '';

if (data.phone) {

htmlInfo += `
<p>
<a href="tel:${formatNumberLink(data.phone)}">${formatNumberOutput(data.phone)}</a>
</p>
`;
console.log(data);
}

if (data.phone2) {

htmlInfo += `
<p>
<a href="tel:${formatNumberLink(data.phone2)}">${formatNumberOutput(data.phone2)}</a>
</p>
`;
}

htmlInfo += data.company ? `
</div>
` : '';

htmlInfo += '</div>';

electionDetailInfo.innerHTML = htmlInfo;

staticElectionOverviewElement.style.display = "none";
staticElectionDetailElement.style.display = "block";

if (staticElectionDetailElement) {
staticElectionDetailElement.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
})
.catch(error => {
// Handle errors here
console.error('Fetch error:', error);
});
}

function hideDetailPage(e) {
let staticElectionOverviewElement = document.getElementById("static-election-overview"),
staticElectionDetailElement = document.getElementById("static-election-detail");

staticElectionOverviewElement.style.display = "block";
staticElectionDetailElement.style.display = "none";

if (staticElectionOverviewElement) {
staticElectionOverviewElement.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}

+ 532
- 0
ihk-election-static-templates/styles.css Переглянути файл

@@ -0,0 +1,532 @@
#static-election static-election-overview {
display: block;
}
#static-election #static-election-detail {
display: none;
}

#static-election button.search-submit.secondary {
background-color: #003366;
color: #fff;
}

#static-election button.search-submit.secondary:hover {
background-color: #E3EBF5;
color: #003366;
}


#static-election .election-form {
--theme-color-link: #fff;
--theme-color-link-hover: #fff;
font-size: 16px;
background: linear-gradient(140deg, #003366 30%, #4BA490 75%, #AFCC7A 108%);
padding: 30px 30px 0 30px;
border-radius: 4px;
color: #fff;
margin-bottom: 20px;
}

@media (max-width: 567px) {
#static-election .election-form {
padding-bottom: 14px;
}
}

#static-election .election-form h2 {
margin-top: -0.3em;
margin-bottom: 0.9em;
font-size: 36px;
}

@media (max-width: 767px) {
#static-election .election-form h2 {
font-size: 24px;
}
}

#static-election .election-form--form {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}

@media (max-width: 767px) {
#static-election .election-form--form {
flex-wrap: wrap;
}
}

@media (max-width: 567px) {
#static-election .election-form--form {
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-end;
}
}

#static-election .election-form button.search-submit {
position: static;
margin-bottom: 14px;
}

@media (max-width: 567px) {
#static-election .election-form button.search-submit {
margin-bottom: 0;
}
}

#static-election .election-form .input-wrapper {
flex: 1;
display: flex;
}

@media (max-width: 767px) {
#static-election .election-form .input-wrapper {
flex: initial;
width: calc(50% - 15px);
}
}

@media (max-width: 567px) {
#static-election .election-form .input-wrapper {
width: 100%;
}
}

#static-election .election-form .input-wrapper input,
#static-election .election-form .input-wrapper select {
margin: 0 30px 14px 0;
}

@media (max-width: 767px) {
#static-election .election-form .input-wrapper input,
#static-election .election-form .input-wrapper select {
margin-right: 0;
}
}

#static-election .election-form .input-wrapper input {
width: 100%;
flex-grow: 1;
}

@media (max-width: 567px) {
#static-election .election-form .input-wrapper {
display: block;
}
}


#static-election .election-result-list-badge .badge-inner {
padding: 6px 15px;
background: #E3EBF5;
border-radius: 18px;
margin-bottom: 8px;
}

#static-election .election-result-list-badge p {
font-family: "Korb", sans-serif;
font-weight: bold;
margin: 0;
}

#static-election .election-result-list-badge p span {
padding-left: 5px;
font-weight: normal;
}

#static-election .election-result-list-badge.inverted p {
color: #fff;
transition: 0.25s ease;
}

#static-election .election-result-list-badge.inverted .badge-inner {
background: #003366;
transition: 0.25s ease;
}

#static-election .election-result-list-badge.inverted .badge-inner:hover {
background-color: #E3EBF5;
}

#static-election .election-result-list-badge.inverted .badge-inner:hover p {
color: #003366;
}

#static-election .election-result-list-badge.closable {
cursor: pointer;
}

#static-election .election-result-list-badge.closable .badge-inner {
padding-left: 48px;
position: relative;
}

#static-election .election-result-list-badge.closable .badge-inner:before {
content: '\e82d';
font-family: 'Icons', sans-serif;
position: absolute;
left: 15px;
top: 50%;
margin-top: -9px;
color: #fff;
display: block;
text-align: center;
font-size: 18px;
line-height: 1;
transition: 0.25s ease;
}

#static-election .election-result-list-badge.closable .badge-inner:hover:before {
color: #003366;
}


#static-election .election-result-list-item {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 4px;
background: #EFF3F6;
text-decoration: none;
width: 312px;
}

@media (max-width: 693px) {
#static-election .election-result-list-item {
width: 100%;
}
}

@media (max-width: 356px) {
#static-election .election-result-list-item {
max-width: none;
}
}

#static-election .election-result-list-item .top-box {
display: block;
cursor: pointer;
}

#static-election .election-result-list-item .image-box {
position: relative;
width: 100%;
padding-bottom: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

#static-election .election-result-list-item img {
position: absolute;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

#static-election .election-result-list-item .text-box {
padding: 10px;
}

#static-election .election-result-list-item h3 {
font-size: 28px;
line-height: 32px;
margin: 5px 10px 15px 10px;
text-decoration: underline;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

#static-election .election-result-list-item .job-box,
#static-election .election-result-list-item .city-box {
margin-bottom: 5px;
background: #E3EBF5;
border-radius: 4px;
padding: 4px 0 2px 0;
}

@media (max-width: 567px) {
#static-election .election-result-list-item .job-box,
#static-election .election-result-list-item .city-box {
display: none;
}
}

#static-election .election-result-list-item .job-box a,
#static-election .election-result-list-item .job-box span,
#static-election .election-result-list-item .city-box a,
#static-election .election-result-list-item .city-box span {
display: block;
position: relative;
width: calc(100% - 8px);
margin: 0;
padding: 0 0 0 26px;
font-size: 16px;
line-height: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}

#static-election .election-result-list-item .job-box a:before,
#static-election .election-result-list-item .job-box span:before,
#static-election .election-result-list-item .city-box a:before,
#static-election .election-result-list-item .city-box span:before {
position: absolute;
left: 4px;
top: 50%;
font-family: "Icons";
transform: translate(0, -50%);
}


#static-election .election-detail {
margin: 0 0 80px 0;
}

#static-election .election-detail--text {
display: flex;
justify-content: space-between;
align-items: flex-start;
background: #E3EBF5;
padding: 0 0 30px 0;
}

@media (max-width: 1100px) {
#static-election .election-detail--text {
display: block;
}
}

#static-election .election-detail--text img {
display: block;
width: 545px;
margin: 0 40px 0 0;
}

@media (max-width: 1100px) {
#static-election .election-detail--text img {
width: 100%;
}
}

#static-election .election-detail--text .text-box {
flex: 1;
padding-right: 1.5rem;
}

@media (max-width: 1100px) {
#static-election .election-detail--text .text-box {
padding-left: 15px;
padding-right: 15px;
}
}

#static-election .election-detail--text h1 {
margin: 1.5rem 0;
}

#static-election .election-detail--text h2 {
margin: 0 0 0.75rem 0;
font-size: 36px;
line-height: 42px;
}

#static-election .election-detail--text p {
margin: 0 0 1.5rem 0;
}

#static-election .election-detail--text p.subheadline {
margin: -1rem 0 1.5rem 0;
font-weight: 600;
}

#static-election .election-detail--text .social-media p {
font-size: 1rem;
text-transform: uppercase;
margin: 0 0 0.5rem 0;
}

#static-election .election-detail--text .social-media .social-icons a:before {
color: #003366;
}

#static-election .election-detail--text .social-media .social-icons a:hover:before {
color: #56BD66;
}

#static-election .election-detail--video {
padding: 30px 0;
background: #B0C4D6;
}

@media (max-width: 1100px) {
#static-election .election-detail--video {
background: none;
}
}

#static-election .election-detail--video .video-container {
margin: 0 auto;
max-width: 976px;
}

@media (max-width: 1100px) {
#static-election .election-detail--video .video-container {
width: 100%;
max-width: none;
}
}

#static-election .election-detail--video .video-container .video {
margin: 0;
}

#static-election .election-detail--info {
display: flex;
justify-content: space-between;
background: #003366;
color: #fff;
}

@media (max-width: 1023px) {
#static-election .election-detail--info {
display: block;
background: none;
}
}

#static-election .election-detail--info .info-box {
flex: 1;
padding: 30px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

@media (max-width: 1023px) {
#static-election .election-detail--info .info-box {
background: #003366;
margin: 0 0 5px 0;
}
}

#static-election .election-detail--info .info-headline {
display: block;
font-size: 16px;
text-transform: uppercase;
margin-bottom: 2px;
letter-spacing: 0.3px;
}

@media (max-width: 767px) {
#static-election .election-detail--info .info-headline {
font-size: 14px;
}
}

#static-election .election-detail--info .info-headline + h1 {
margin-top: 0.1em;
}

#static-election .election-detail--info .info-headline + h2, .election-detail--info .info-headline + h3, .election-detail--info .info-headline + h4 {
margin-top: 0.2em;
}

#static-election .election-detail--info .info-box--content p {
font-size: 18px;
line-height: 27px;
margin: 0 0 5px 0;
}

#static-election .election-detail--info .info-box--content p.headline {
font-weight: 600;
margin: 0;
}

#static-election .election-detail--info .info-box--content p.address {
margin-bottom: 10px;
}

#static-election .election-detail--info .info-box--text {
font-size: 36px;
line-height: 44px;
margin: 0;
font-family: 'Korb', sans-serif;
}

@media (max-width: 767px) {
#static-election .election-detail--info .info-box--text {
font-size: 24px;
line-height: 29px;
}
}

#static-election .election-detail--info a {
color: #fff;
}

#static-election .election-detail--info a:hover {
color: #56BD66;
}

#static-election .election-detail--back {
background: #E3EBF5;
display: flex;
justify-content: center;
padding: 30px 15px;
margin: 20px 0 0 0;
}

#static-election .election-detail--more {
margin: 60px 0 0 0 !important;
max-width: none !important;
}


#static-election .election-result-list .election-result-list--header {
display: flex;
justify-content: space-between;
padding-bottom: 20px;
}

@media (max-width: 767px) {
#static-election .election-result-list .election-result-list--header {
display: block;
}
}

#static-election .election-result-list .election-result-list--header-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}

@media (min-width: 768px) {
#static-election .election-result-list .election-result-list--header-left {
margin-right: 20px;
}
}

@media (max-width: 767px) {
#static-election .election-result-list .election-result-list-badge {
display: flex;
justify-content: flex-end;
}
}

#static-election .election-result-list .election-result-list--inner {
grid-gap: 30px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 20px 0 40px 0;
}

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти