Teamliste verbessert.

main
Mitja Stachowiak (Hessen) 2024-03-05 10:21:13 +01:00
parent adb7294552
commit 08dd14b273
3 changed files with 175 additions and 2 deletions

View File

@ -644,11 +644,38 @@ aside {
display: block;
clear: both;
}
.candidates li a {
display: block;
color: inherit;
text-decoration: inherit;
padding-top: 4px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 4px;
margin-top: -4px;
margin-left: -8px;
margin-right: -8px;
margin-bottom: -4px;
}
.candidates li a:hover {
background-color: #efebdc;
}
.candidates li a:after {
content: 'mehr';
display: block;
clear: both;
position: relative;
top: -1.5em;
height: 0px;
left: 20px;
font-style: italic;
color: #00aff0;
}
.candidates img {
float: right;
width: 150px;
height: auto;
border: 3px solid #bedc0a;
border: 3px solid #00aff0;
border-radius: 3px;
margin-left: 5px;
}

View File

@ -98,6 +98,7 @@ iframe {
position : relative;
top : 64px;
left : 10%;
z-index : 2;
transition: height 2s, top 2s, left 2s, margin-right 2s;
}
@ -138,6 +139,7 @@ iframe {
overflow : visible;
top : 64px;
left : 10%;
z-index : 2;
transition: height 2s, top 2s, left 2s, font-size 2s, line-height 2s;
}
@ -163,7 +165,7 @@ iframe {
#BoxLinksPos {
position : absolute;
top : 100%;
top : 0px;
margin-top : -66px;
left : 0px;
text-align : center;
@ -172,6 +174,7 @@ iframe {
#BoxLinks {
width : 100%;
padding-top: 300px;
overflow-x : scroll;
-ms-overflow-style: none;
scrollbar-width: none;
@ -392,6 +395,9 @@ iframe {
top : 0px;
height : 200px;
}
#BoxLinks {
padding-top: 200px;
}
#BoxTop .bgImage {
padding-top : 13px;
}

140
js/europa.js Normal file
View File

@ -0,0 +1,140 @@
(function () {
let link = document.getElementById('europaLink');
if (!link) {
link = document.createElement('a');
link.href = 'https://eu.klimaliste.org/';
link.className = 'MenuLink';
link.setAttribute('id', 'europaLink');
let menu = document.getElementById('BoxLinks');
if (!menu) {
for (let i = 0; i < document.getElementsByTagName('div').length; i++)
if ((' '+document.getElementsByTagName('div')[i].className+' ').indexOf(' nav__links ') >= 0) {
menu = document.getElementsByTagName('div')[i];
link.className = 'nav__item';
break;
}
}
if (!menu) {
for (let i = 0; i < document.getElementsByTagName('ul').length; i++)
if ((' '+document.getElementsByTagName('ul')[i].className+' ').indexOf(' main-menu ') >= 0) {
menu = document.getElementsByTagName('ul')[i];
let li = document.createElement('li');
li.className = 'menu-item';
menu.appendChild(li);
menu = li;
link.className = 'menu-link';
break;
}
}
if (menu) menu.appendChild(link);
}
link.style.visibility = 'hidden';
link.innerHTML = ''
+'<span style="height:1.2em; width:1.8em; overflow:visible; display:inline-block; position:relative; vertical-align:middle; line-height:1em;" id="europa">'
+' <svg style="height:1.2em; display:inline-block; vertical-align:middle; position:relative; max-width:none; " version="1.1" viewBox="0 0 3000 540" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">'
+' <defs>'
+' <clipPath clipPathUnits="userSpaceOnUse" id="europaClipNo"></clipPath>'
+' <clipPath clipPathUnits="userSpaceOnUse" id="europaTextClip">'
+' <rect x="810" y="0" width="2190" height="540">'
+' </clipPath>'
+' </defs>'
+' <rect width="810" height="540" fill="#003399" id="europaSky"/>'
+' <g fill="#ffcc00" stroke-width=".999997">'
+' <path d="m404.999 59.9998-6.73632 20.7284h-21.7948l17.6328 12.8125-6.73826 20.7304 17.6367-12.8125 17.6366 12.8125-6.73826-20.7323 17.6328-12.8105h-21.7948l-6.73631-20.7284z"/>'
+' <path d="m494.999 84.115-6.73631 20.7284h-21.7948l17.6328 12.8106-6.73826 20.7304 17.6366-12.8125 17.6367 12.8125-6.73826-20.7304 17.6328-12.8106h-21.7948l-6.73632-20.7284z"/>'
+' <path d="m560.884 150-6.73437 20.7284h-21.7948l17.6309 12.8105-6.73632 20.7324 17.6348-12.8125 17.6308 12.8125-6.7324-20.7324 17.6328-12.8105h-21.7948l-6.7363-20.7284z"/>'
+' <path d="m584.999 239.999-6.73632 20.7284h-21.7948l17.6328 12.8105-6.73826 20.7323 17.6367-12.8125 17.6366 12.8125-6.73826-20.7304 17.6328-12.8125h-21.7948l-6.73631-20.7284z"/>'
+' <path d="m560.884 329.999-6.73437 20.7284h-21.7948l17.6309 12.8105-6.73632 20.7324 17.6348-12.8125 17.6308 12.8125-6.7324-20.7304 17.6328-12.8125h-21.7948l-6.7363-20.7284z"/>'
+' <path d="m494.999 395.884-6.73631 20.7304h-21.7948l17.6328 12.8106-6.73826 20.7304 17.6366-12.8125 17.6367 12.8125-6.73631-20.7304 17.6308-12.8106h-21.7948l-6.73632-20.7304z"/>'
+' <path d="m404.999 419.999-6.73632 20.7284h-21.7948l17.6328 12.8125-6.73826 20.7304 17.6367-12.8125 17.6366 12.8125-6.73826-20.7323 17.6328-12.8105h-21.7948l-6.73631-20.7284z"/>'
+' <path d="m314.999 395.884-6.73631 20.7304h-21.7948l17.6309 12.8106-6.73631 20.7304 17.6366-12.8125 17.6367 12.8125-6.73826-20.7304 17.6328-12.8106h-21.7948l-6.73632-20.7304z"/>'
+' <path d="m249.114 329.999-6.73631 20.7284h-21.7948l17.6328 12.8125-6.7324 20.7304 17.6308-12.8125 17.6348 12.8125-6.73631-20.7324 17.6309-12.8105h-21.7948l-6.73436-20.7284z"/>'
+' <path d="m224.999 239.999-6.73632 20.7284h-21.7948l17.6328 12.8125-6.73826 20.7304 17.6367-12.8125 17.6366 12.8125-6.73826-20.7323 17.6328-12.8105h-21.7948l-6.73631-20.7284z"/>'
+' <path d="m249.114 150-6.73631 20.7284h-21.7948l17.6328 12.8105-6.7324 20.7324 17.6308-12.8125 17.6348 12.8125-6.73631-20.7324 17.6309-12.8105h-21.7948l-6.73436-20.7284z"/>'
+' <path d="m314.999 84.115-6.73631 20.7284h-21.7948l17.6328 12.8106-6.73826 20.7304 17.6366-12.8125 17.6367 12.8125-6.73826-20.7304 17.6328-12.8106h-21.7948l-6.73632-20.7284z"/>'
+' </g>'
+' <text xml:space="preserve" x="860" y="200" fill="currentcolor" clip-path="url(#europaClipNo)">'
+' <tspan x="880" y="200" style="font-size:192px; ">Wir treten zur</tspan>'
+' <tspan x="880" y="440" style="font-size:192px; ">Europawahl an!</tspan>'
+' </text>'
+' <text xml:space="preserve" x="860" y="200" fill="currentcolor" clip-path="url(#europaClipNo)">'
+' <tspan x="880" y="200" style="font-size:192px; ">Unterstütze uns</tspan>'
+' <tspan x="880" y="440" style="font-size:192px; ">mit einer Spende.</tspan>'
+' </text>'
+' <text xml:space="preserve" x="860" y="200" fill="currentcolor" clip-path="url(#europaClipNo)">'
+' <tspan x="880" y="200" style="font-size:192px; ">Damit Klimaschutz im</tspan>'
+' <tspan x="880" y="440" style="font-size:192px; ">Wahlkampf sichtbar ist!</tspan>'
+' </text>'
+' </svg>'
+'</span>';
var menuBox = document.getElementById('europa');
var flag = menuBox.getElementsByTagName('svg')[0];
var texts = flag.getElementsByTagName('text');
var textRect = document.getElementById('europaTextClip').getElementsByTagName('rect')[0];
var stars = flag.getElementsByTagName('g')[0].getElementsByTagName('path');
var sky = document.getElementById('europaSky');
let absLeft = 0;
let absTop = 0;
let el = menuBox;
while (el) {
absLeft += el.offsetLeft;
absTop += el.offsetTop;
el = el.offsetParent;
}
var x = document.body.offsetWidth * 0.6 - absLeft;
var y = 6;
if (absTop > 100) y = -6;
var p = 0;
let spl = document.cookie.split(';');
for (let i = 0; i < spl.length; i++) {
spl[i] = spl[i].split('=');
if (spl[i].length == 2 && spl[i][0].trim() == 'europeAnimationProgress') {
p = parseFloat(spl[i][1]);
break;
}
}
var starts = [0, 0.4, 1, 2.5, 3, 4.5, 5, 5.5, 7, 7.5, 8.5];
var durations = [0.5, 2, 0.5, 0.5, 0.5, 0.5, 0.5, 1.5, 0.5, 1.5, 0.5];
function apply () {
let s = new Array();
for (let i = 0; i < starts.length; i++) {
s[i] = p-starts[i];
if (s[i] < 0) s[i] = 0;
s[i] /= durations[i];
if (s[i] > 1) s[i] = 1;
}
p += 0.01;
flag.style.left = x * (1-s[9])**2 + 'px';
flag.style.top = y * (1-s[9]**2) + 'em';
flag.style.height = 3 * (1-s[9]) + 1.2*s[9] + 'em';
menuBox.style.width = 1.8 * s[10] + 'em';
sky.setAttribute('y', (1-s[0])*270);
sky.setAttribute('height', s[0]*540);
for (let i = 0; i < 12; i++) {
if (s[1]-i/12 > 0) stars[i].setAttribute('fill-opacity', 1);
else stars[i].setAttribute('fill-opacity', 0);
if (s[7]-i/12 > 0) stars[i].setAttribute('fill', '#bedc0a');
}
if (s[2] > 0 && s[3] < 1) {
if (s[2] < 1) textRect.setAttribute('width', 2190*s[2]);
else textRect.setAttribute('width', 2190*(1-s[3]));
texts[0].setAttribute('clip-path', 'url(#europaTextClip)');
} else texts[0].setAttribute('clip-path', 'url(#europaClipNo)');
if (s[4] > 0 && s[5] < 1) {
if (s[4] < 1) textRect.setAttribute('width', 2190*s[4]);
else textRect.setAttribute('width', 2190*(1-s[5]));
texts[1].setAttribute('clip-path', 'url(#europaTextClip)');
} else texts[1].setAttribute('clip-path', 'url(#europaClipNo)');
if (s[6] > 0 && s[8] < 1) {
if (s[6] < 1) textRect.setAttribute('width', 2190*s[6]);
else textRect.setAttribute('width', 2190*(1-s[8]));
texts[2].setAttribute('clip-path', 'url(#europaTextClip)');
} else texts[2].setAttribute('clip-path', 'url(#europaClipNo)');
if ((p == Math.floor(p)) || (s[s.length-1] >= 1))
document.cookie = 'europeAnimationProgress='+p+';path=/;SameSite=None';
if (s[s.length-1] >= 1) window.clearInterval(timer);
}
var timer = window.setInterval(apply, 10);
apply(0);
link.style.visibility = 'visible';
})();