From e7844f39d3a55b6300b654f91cb24c93f4e11efe Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Wed, 4 Oct 2023 16:45:04 +0200 Subject: [PATCH] static election templates --- ihk-election-static-templates/index.html | 56 +-- ihk-election-static-templates/iss.html | 56 +++ ihk-election-static-templates/script.js | 513 ++++++++++++---------- ihk-election-static-templates/styles.css | 532 +++++++++++++++++++++++ 4 files changed, 899 insertions(+), 258 deletions(-) create mode 100644 ihk-election-static-templates/iss.html create mode 100644 ihk-election-static-templates/styles.css diff --git a/ihk-election-static-templates/index.html b/ihk-election-static-templates/index.html index 4bd0312..f87f43f 100644 --- a/ihk-election-static-templates/index.html +++ b/ihk-election-static-templates/index.html @@ -5326,33 +5326,37 @@
-

Finden Sie die Branchenvertreter:innen Ihrer Region

-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
- -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/ihk-election-static-templates/iss.html b/ihk-election-static-templates/iss.html new file mode 100644 index 0000000..19a8af0 --- /dev/null +++ b/ihk-election-static-templates/iss.html @@ -0,0 +1,56 @@ + + +
+
+
+

Finden Sie die Branchenvertreter:innen Ihrer Region

+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
Zur + Kandidatenübersicht
+

IHK-Wahlbüro

+

Wir beantworten gerne Ihre Fragen zur IHK-Wahl 2024. Rufen Sie uns einfach an.

+ +
+
+
+
\ No newline at end of file diff --git a/ihk-election-static-templates/script.js b/ihk-election-static-templates/script.js index d8144e4..dfcc652 100644 --- a/ihk-election-static-templates/script.js +++ b/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 ? ` - - ` : ''; - - htmlText += '
'; - - htmlText += (data.first_name && data.last_name) ? ` -

${data.first_name} ${data.last_name}

- ` : ''; - - htmlText += data.position ? ` -

${data.position}

- ` : ''; - - htmlText += data.election_statement ? ` -

Was möchten Sie bewegen?

-

${data.election_statement}

- ` : ''; - - if (data.twitter_link || data.facebook_link || data.xing_link || - data.whatsapp_link || data.linkedin_link || data.threema_link || - data.telegram_link) { - htmlText += ` - - `; - } - - htmlText += '
'; - - electionDetailText.innerHTML = htmlText; - - htmlVideo += data.video_path ? ` -
-
-
- ` : ''; - if (data.video_path && data.video_img_path) { - htmlVideo += ` - - `; - } else if (data.video_path) { - htmlVideo += ` - - `; - } - - htmlVideo += data.video_path ? ` -
-
-
- ` : ''; - - electionDetailVideo.innerHTML = htmlVideo; - - htmlInfo += (data.candidate_election_group_id && data.candidate_election_group_name) ? ` -
-

Wahlgruppe 02

-

- ${data.candidate_election_group_name} -

-
- ` : ''; - htmlInfo += (data.candidate_election_district_id && data.candidate_election_district_name) ? ` -
-

Wahlbezirk 05

-

- ${data.candidate_election_district_name} -

-
- ` : ''; - - htmlInfo += '
'; - - htmlInfo += data.company ? ` -

Unternehmen

-
-

${data.company}

- ` : ''; - - htmlInfo += data.company_address ? ` -

${data.company_address}

- ` : ''; - - htmlInfo += data.website ? ` -

- Unternehmenswebseite -

- ` : ''; - - htmlInfo += data.email ? ` -

- E-Mail -

- ` : ''; - - if (data.phone) { - - htmlInfo += ` -

- ${formatNumberOutput(data.phone)} -

- `; - } + // 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 ? ` -
- ` : ''; + // click the back button + if (event.target.closest(".election-detail--back a")) { + event.preventDefault(); + hideDetailPage(); + } + }); + } - htmlInfo += '
'; +// 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 = `
- +

${candidate.first_name} ${candidate.last_name}

- +
${candidate.candidate_election_group_name} @@ -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(); -} \ No newline at end of file +} + +// 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 ? ` + + ` : ''; + + htmlText += '
'; + + htmlText += (data.first_name && data.last_name) ? ` +

${data.first_name} ${data.last_name}

+ ` : ''; + + htmlText += data.position ? ` +

${data.position}

+ ` : ''; + + htmlText += data.election_statement ? ` +

Was möchten Sie bewegen?

+

${data.election_statement}

+ ` : ''; + + if (data.twitter_link || data.facebook_link || data.xing_link || + data.whatsapp_link || data.linkedin_link || data.threema_link || + data.telegram_link) { + htmlText += ` + + `; + } + + htmlText += '
'; + + electionDetailText.innerHTML = htmlText; + + htmlVideo += data.video_path ? ` +
+
+
+ ` : ''; + + if (data.video_path && data.video_img_path) { + htmlVideo += ` + + `; + } else if (data.video_path) { + htmlVideo += ` + + `; + } + + htmlVideo += data.video_path ? ` +
+
+
+ ` : ''; + + electionDetailVideo.innerHTML = htmlVideo; + + htmlInfo += (data.candidate_election_group_id && data.candidate_election_group_name) ? ` +
+

Wahlgruppe 02

+

+ ${data.candidate_election_group_name} +

+
+ ` : ''; + htmlInfo += (data.candidate_election_district_id && data.candidate_election_district_name) ? ` +
+

Wahlbezirk 05

+

+ ${data.candidate_election_district_name} +

+
+ ` : ''; + + htmlInfo += '
'; + + htmlInfo += data.company ? ` +

Unternehmen

+
+

${data.company}

+ ` : ''; + + htmlInfo += data.company_address ? ` +

${data.company_address}

+ ` : ''; + + htmlInfo += data.website ? ` +

+ Unternehmenswebseite +

+ ` : ''; + + htmlInfo += data.email ? ` +

+ E-Mail +

+ ` : ''; + + if (data.phone) { + + htmlInfo += ` +

+ ${formatNumberOutput(data.phone)} +

+ `; + console.log(data); + } + + if (data.phone2) { + + htmlInfo += ` +

+ ${formatNumberOutput(data.phone2)} +

+ `; + } + + htmlInfo += data.company ? ` +
+ ` : ''; + + htmlInfo += '
'; + + 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", + }); + } +} diff --git a/ihk-election-static-templates/styles.css b/ihk-election-static-templates/styles.css new file mode 100644 index 0000000..c3e629d --- /dev/null +++ b/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; +}