Verwaltung: die Effekte liegen jetzt auf den ECHTEN Kacheln
Der Grund, warum von allem bisher nichts zu sehen war. Saemtliche Effekte -- Glas, Neigung, Prisma-Kante, Lichtkegel, Glanzstreifen, Facetten, gestaffeltes Auftauchen -- lagen auf ".wd-karte". Diese Klasse kommt im Verwaltungsbereich aber fast nicht vor. Die Listen bestehen aus ".vw-karte", die Meldungen der Uebersicht aus ".vw-meld". Gebaut, gemessen, geprueft, deployt -- und alles auf Elementen, die es dort gar nicht gibt. Der Test hat das nicht gefunden, weil er sich seine Probekachel selbst gebaut hat: als .wd-karte. Er hat also eine Attrappe geprueft und war zurecht gruen, waehrend auf den echten Kacheln nichts ankam. Ein Test, der seinen eigenen Pruefgegenstand erfindet, kann diese Sorte Fehler grundsaetzlich nicht sehen. WAS JETZT ANDERS IST Alle Effekte gelten fuer .vw-karte und .vw-meld: - Glas mit Rueckseiten-Unschaerfe - raeumliche Neigung zum Zeiger, hoechstens 7 Grad - Lichtkegel und Prisma-Kante, die dem Zeiger folgen - Glanzstreifen, der mit der Neigung wandert - ungleich geschliffene Ecken - gestaffeltes Auftauchen beim Bereichswechsel - Projektnummer und Name stehen vor der Flaeche (translateZ) Dazu setzt der Verwaltungsbereich die Lichtposition jetzt selbst. Der Verfolger im Grundsystem (wd-core.js) sucht ausdruecklich nur ".wd-karte" -- auf .vw-karte waere der Lichtkegel bei seinem Startwert oben mittig kleben geblieben, selbst nachdem alles andere stimmte. DER TEST BAUT JETZT DIE ECHTE STRUKTUR NACH .vw-karte mit .vw-karte-nr, .vw-karte-mitte und .vw-karte-rechts, genau wie das Skript sie erzeugt. Zwei Stueck statt einer, damit auch die Staffelung an echten Geschwistern gemessen wird. Geprueft: 260 Pruefungen gruen (Verwaltung 62, Portfolio 15, CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54). Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+103
-30
@@ -391,9 +391,10 @@
|
||||
Deshalb ist der Hintergrund auch ohne Unschaerfe schon dicht genug.
|
||||
Das ist kein Schoenheitsfehler, sondern der Rueckfall. */
|
||||
#vw-bereich .wd-karte,
|
||||
#vw-bereich .vw-liste,
|
||||
#vw-bereich .vw-karte,
|
||||
#vw-bereich .vw-meld,
|
||||
#vw-bereich .vw-detail-blatt,
|
||||
#vw-bereich .wd-notiz,
|
||||
#vw-bereich .vw-kachel,
|
||||
#vw-bereich table {
|
||||
-webkit-backdrop-filter: blur(22px) saturate(1.15);
|
||||
backdrop-filter: blur(22px) saturate(1.15);
|
||||
@@ -487,17 +488,35 @@
|
||||
from { opacity: 0; translate: 0 14px; scale: .985; }
|
||||
to { opacity: 1; translate: none; scale: 1; }
|
||||
}
|
||||
#vw-bereich .wd-karte {
|
||||
#vw-bereich .wd-karte,
|
||||
#vw-bereich .vw-karte,
|
||||
#vw-bereich .vw-meld {
|
||||
animation: vw-kachel-auf .5s cubic-bezier(.2,.8,.3,1) both;
|
||||
}
|
||||
#vw-bereich .wd-karte:nth-child(1) { animation-delay: .02s; }
|
||||
#vw-bereich .wd-karte:nth-child(2) { animation-delay: .07s; }
|
||||
#vw-bereich .wd-karte:nth-child(3) { animation-delay: .12s; }
|
||||
#vw-bereich .wd-karte:nth-child(4) { animation-delay: .17s; }
|
||||
#vw-bereich .wd-karte:nth-child(5) { animation-delay: .22s; }
|
||||
#vw-bereich .wd-karte:nth-child(6) { animation-delay: .27s; }
|
||||
#vw-bereich .wd-karte:nth-child(7) { animation-delay: .32s; }
|
||||
#vw-bereich .wd-karte:nth-child(n+8) { animation-delay: .36s; }
|
||||
#vw-bereich .wd-karte:nth-child(1),
|
||||
#vw-bereich .vw-karte:nth-child(1),
|
||||
#vw-bereich .vw-meld:nth-child(1) { animation-delay: .02s; }
|
||||
#vw-bereich .wd-karte:nth-child(2),
|
||||
#vw-bereich .vw-karte:nth-child(2),
|
||||
#vw-bereich .vw-meld:nth-child(2) { animation-delay: .07s; }
|
||||
#vw-bereich .wd-karte:nth-child(3),
|
||||
#vw-bereich .vw-karte:nth-child(3),
|
||||
#vw-bereich .vw-meld:nth-child(3) { animation-delay: .12s; }
|
||||
#vw-bereich .wd-karte:nth-child(4),
|
||||
#vw-bereich .vw-karte:nth-child(4),
|
||||
#vw-bereich .vw-meld:nth-child(4) { animation-delay: .17s; }
|
||||
#vw-bereich .wd-karte:nth-child(5),
|
||||
#vw-bereich .vw-karte:nth-child(5),
|
||||
#vw-bereich .vw-meld:nth-child(5) { animation-delay: .22s; }
|
||||
#vw-bereich .wd-karte:nth-child(6),
|
||||
#vw-bereich .vw-karte:nth-child(6),
|
||||
#vw-bereich .vw-meld:nth-child(6) { animation-delay: .27s; }
|
||||
#vw-bereich .wd-karte:nth-child(7),
|
||||
#vw-bereich .vw-karte:nth-child(7),
|
||||
#vw-bereich .vw-meld:nth-child(7) { animation-delay: .32s; }
|
||||
#vw-bereich .wd-karte:nth-child(n+8),
|
||||
#vw-bereich .vw-karte:nth-child(n+8),
|
||||
#vw-bereich .vw-meld:nth-child(n+8) { animation-delay: .36s; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#vw-bereich .wd-karte { animation: none; }
|
||||
@@ -516,7 +535,9 @@
|
||||
2. Die KANTE der Kachel leuchtet dort auf, wo der Zeiger steht.
|
||||
Zusammen sieht es aus, als laege eine echte Lichtquelle ueber dem
|
||||
Glas -- und nicht, als waere ein Fleck aufgemalt. */
|
||||
#vw-bereich .wd-karte {
|
||||
#vw-bereich .wd-karte,
|
||||
#vw-bereich .vw-karte,
|
||||
#vw-bereich .vw-meld {
|
||||
background:
|
||||
/* Die Flaeche: dicht genug, dass Text darauf ruhig steht. */
|
||||
linear-gradient(180deg,
|
||||
@@ -554,7 +575,15 @@
|
||||
|
||||
/* Der Lichtkegel auf der Flaeche, kraeftiger als im Grundsystem. */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
#vw-bereich .wd-karte::after {
|
||||
#vw-bereich .wd-karte::after,
|
||||
#vw-bereich .vw-karte::after,
|
||||
#vw-bereich .vw-meld::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(300px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--vw-farbe) / .30) 0%,
|
||||
rgb(var(--vw-farbe) / .12) 42%,
|
||||
@@ -580,7 +609,9 @@
|
||||
wie ein platt gedruecktes Parallelogramm. */
|
||||
perspective: 1400px;
|
||||
}
|
||||
#vw-bereich .wd-karte {
|
||||
#vw-bereich .wd-karte,
|
||||
#vw-bereich .vw-karte,
|
||||
#vw-bereich .vw-meld {
|
||||
transform-style: preserve-3d;
|
||||
transform:
|
||||
rotateX(calc(var(--vw-ny, 0) * -7deg))
|
||||
@@ -594,7 +625,9 @@
|
||||
/* Beim Ueberfahren kommt die Kachel dem Betrachter entgegen und
|
||||
wirft einen laengeren Schatten -- das erst macht aus der Neigung
|
||||
ein Objekt im Raum statt eines schraegen Bildes. */
|
||||
#vw-bereich .wd-karte:hover {
|
||||
#vw-bereich .wd-karte:hover,
|
||||
#vw-bereich .vw-karte:hover,
|
||||
#vw-bereich .vw-meld:hover {
|
||||
transform:
|
||||
rotateX(calc(var(--vw-ny, 0) * -7deg))
|
||||
rotateY(calc(var(--vw-nx, 0) * 7deg))
|
||||
@@ -608,16 +641,22 @@
|
||||
/* Der Inhalt steht vor der Flaeche. Ueberschriften weiter vorn als
|
||||
Fliesstext -- dadurch entsteht beim Neigen echte Staffelung
|
||||
statt einer flachen Ebene, die sich mitdreht. */
|
||||
#vw-bereich .wd-karte > * { transform: translateZ(18px); }
|
||||
#vw-bereich .wd-karte h2,
|
||||
#vw-bereich .wd-karte h3 { transform: translateZ(34px); }
|
||||
#vw-bereich .wd-karte > *,
|
||||
#vw-bereich .vw-karte > *,
|
||||
#vw-bereich .vw-meld > * { transform: translateZ(18px); }
|
||||
#vw-bereich .wd-karte h2, #vw-bereich .wd-karte h3,
|
||||
#vw-bereich .vw-karte .vw-karte-name,
|
||||
#vw-bereich .vw-karte .vw-karte-nr,
|
||||
#vw-bereich .vw-meld strong { transform: translateZ(34px); }
|
||||
|
||||
/* DER GLANZSTREIFEN.
|
||||
|
||||
Ein schmales Licht, das ueber die Platte laeuft und mit der
|
||||
Neigung wandert. Es sitzt im ::before, weil ::after schon den
|
||||
Lichtkegel traegt. */
|
||||
#vw-bereich .wd-karte::before {
|
||||
#vw-bereich .wd-karte::before,
|
||||
#vw-bereich .vw-karte::before,
|
||||
#vw-bereich .vw-meld::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -634,26 +673,39 @@
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
#vw-bereich .wd-karte:hover::before { opacity: 1; }
|
||||
#vw-bereich .wd-karte:hover::before,
|
||||
#vw-bereich .vw-karte:hover::before,
|
||||
#vw-bereich .vw-meld:hover::before { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Die Ecken sind ungleich gerundet -- diagonal weit, diagonal knapp.
|
||||
Eine gleichmaessig gerundete Kachel liest sich als Knopf; die
|
||||
ungleiche Rundung nimmt die Facetten der Motive auf. */
|
||||
#vw-bereich .wd-karte {
|
||||
#vw-bereich .wd-karte,
|
||||
#vw-bereich .vw-karte,
|
||||
#vw-bereich .vw-meld {
|
||||
border-radius: 36px 6px 36px 6px;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#vw-bereich .wd-karte {
|
||||
#vw-bereich .wd-karte,
|
||||
#vw-bereich .vw-karte,
|
||||
#vw-bereich .vw-meld {
|
||||
transition: none;
|
||||
transform: none;
|
||||
animation: none;
|
||||
}
|
||||
#vw-bereich .wd-karte:hover { transform: none; }
|
||||
#vw-bereich .wd-karte > *,
|
||||
#vw-bereich .wd-karte h2,
|
||||
#vw-bereich .wd-karte h3 { transform: none; }
|
||||
#vw-bereich .wd-karte::before { display: none; }
|
||||
#vw-bereich .wd-karte:hover,
|
||||
#vw-bereich .vw-karte:hover,
|
||||
#vw-bereich .vw-meld:hover { transform: none; }
|
||||
#vw-bereich .wd-karte > *, #vw-bereich .vw-karte > *, #vw-bereich .vw-meld > *,
|
||||
#vw-bereich .wd-karte h2, #vw-bereich .wd-karte h3 { transform: none; }
|
||||
#vw-bereich .wd-karte::before,
|
||||
#vw-bereich .vw-karte::before,
|
||||
#vw-bereich .vw-meld::before { display: none; }
|
||||
}
|
||||
|
||||
/* Der Titel steht als einziges frei auf der Buehne. Damit er das
|
||||
@@ -737,7 +789,9 @@
|
||||
/* Das Licht, das den Kacheln unter dem Mauszeiger folgt, nimmt
|
||||
ebenfalls die Leitfarbe an. Dadurch fuehlt sich jeder Bereich
|
||||
anders an, ohne dass irgendwo ein zweites Bild noetig waere. */
|
||||
#vw-bereich .wd-karte { --wd-lumen: var(--vw-farbe); }
|
||||
#vw-bereich .wd-karte,
|
||||
#vw-bereich .vw-karte,
|
||||
#vw-bereich .vw-meld { --wd-lumen: var(--vw-farbe); }
|
||||
|
||||
/* Die Anmeldekarte bekommt das Wappen. Sie ist halbdurchsichtig,
|
||||
das Motiv scheint also durch die Glasflaeche hindurch.
|
||||
@@ -3859,6 +3913,16 @@
|
||||
Beim Verlassen wird auf 0 zurueckgesetzt -- sonst bliebe die
|
||||
Kachel schraeg stehen, nachdem der Zeiger laengst weg ist.
|
||||
--------------------------------------------------------------------- */
|
||||
/* Die ECHTEN Kachelklassen der Verwaltung.
|
||||
|
||||
Beim ersten Anlauf stand hier nur ".wd-karte" -- die kommt im
|
||||
Verwaltungsbereich aber fast nicht vor. Die Listen bestehen aus
|
||||
.vw-karte, die Meldungen der Uebersicht aus .vw-meld. Saemtliche
|
||||
Effekte lagen dadurch auf Elementen, die es hier gar nicht gibt:
|
||||
Neigung, Glanz und Licht waren gebaut, gemessen -- und trotzdem
|
||||
nirgends zu sehen. */
|
||||
var KACHELN = "#vw-bereich .wd-karte, #vw-bereich .vw-karte, #vw-bereich .vw-meld";
|
||||
|
||||
(function kachelnNeigen() {
|
||||
try {
|
||||
if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
|
||||
@@ -3869,7 +3933,7 @@
|
||||
|
||||
document.addEventListener("pointermove", function (e) {
|
||||
var karte = e.target && e.target.closest
|
||||
? e.target.closest("#vw-bereich .wd-karte") : null;
|
||||
? e.target.closest(KACHELN) : null;
|
||||
if (!karte) return;
|
||||
letzte = karte; zx = e.clientX; zy = e.clientY;
|
||||
if (offen) return;
|
||||
@@ -3884,6 +3948,15 @@
|
||||
var ny = ((zy - r.top) / r.height - 0.5) * 2;
|
||||
letzte.style.setProperty("--vw-nx", nx.toFixed(3));
|
||||
letzte.style.setProperty("--vw-ny", ny.toFixed(3));
|
||||
|
||||
/* Die Lichtposition gleich mitsetzen.
|
||||
|
||||
Der Verfolger im Grundsystem (wd-core.js) sucht ausdruecklich
|
||||
nur ".wd-karte". Fuer .vw-karte und .vw-meld waere das Licht
|
||||
also nie gewandert -- der Lichtkegel haette bei seinem
|
||||
Startwert oben mittig geklebt. */
|
||||
letzte.style.setProperty("--wd-lichtx", (zx - r.left) + "px");
|
||||
letzte.style.setProperty("--wd-lichty", (zy - r.top) + "px");
|
||||
});
|
||||
}, { passive: true });
|
||||
|
||||
@@ -3891,7 +3964,7 @@
|
||||
wenn der Zeiger die Kachel ueber ein Kindelement verlaesst. */
|
||||
document.addEventListener("pointerout", function (e) {
|
||||
var karte = e.target && e.target.closest
|
||||
? e.target.closest("#vw-bereich .wd-karte") : null;
|
||||
? e.target.closest(KACHELN) : null;
|
||||
if (!karte) return;
|
||||
/* Nur zuruecksetzen, wenn der Zeiger die Kachel WIRKLICH verlaesst
|
||||
und nicht bloss von einem Kind zum naechsten wandert. */
|
||||
|
||||
Reference in New Issue
Block a user