/* ============================================================================ Project Legend V0.58.9 - v0589-details3.css (Strang "details3") SPIELERSTATISTIKEN UND VERTRAGSSEITE PASSEN INS FENSTER Grundlage (keine Befunddatei, Messungen): - 2d-werkstatt/messungen/kp-vorher-de.txt, Route competition-stats: Seitenueberhang 1489/1463/1496 px bei 1536x770/1366x768/1280x720 (Reiter LIGA), 1308 px bei 1920x1080, 1430 px bei 1024x768; auf Wirt k nachgemessen 1493/1467/1500/1311/1434 px (details3/messungen/ kp-vorher-de.txt), bei 1440x900/1600x900/1536x864 1436/1478/1497 px. - Gegenpruefung daten (Wirt g), Route contract im Jugendzustand: 35/22/65 px bei 1536x770/1366x768/1280x720 (dort 2 Elemente unter der Aktionsleiste verdeckt: die Leiste "Taktische Passung"), 227 px bei 1024x768, 3 px bei 1600x900. Entscheidung des Auftraggebers "Detailseiten auch ohne Scrollen": bei 1536x770, 1366x768, 1280x720 und 1440x900, 1600x900, 1536x864 kein Seitenueberhang; nach ENTSCHEIDUNG-HAUPTSITZUNG.md (21.09. abends) bei allen Fensterhoehen, gemessen auch 1920x1080, 2457x971 und 2560x1440. Tabellen rollen in einem eigenen, begrenzten Bereich mit klebendem Kopf - die SEITE rollt nicht. HAUSREGELN, die hier gelten: - Keine Wichtig-Markierung; dieses Blatt haengt nach v0576-passung.css und vor ui-v0420/system.css. - Keine neue Bruchstelle: Breite nur 981 px (Rail-Bruch), Hoehe nur 960 px (Zwischenhoehe, stil-wache.pl) und 800 px. - Erst Abstaende, dann Umordnen, dann Aufklapper; keine Schriftgroesse. - Kein neues Abschneiden: jeder begrenzte Bereich rollt (overflow:auto), kein max-height-Deckel auf Inhalt. - Alle Regeln sind ueber #pl420Content[data-pl42-ansicht=""] begrenzt (v0420-shell.js:673). Andere Detailseiten teilen Klassen (.pl42-screen--detail, .pl42-panel) und bleiben unberuehrt. - Handy (unter 981 px): hier greift nichts; die Seiten stehen einspaltig wie bisher und rollen senkrecht. ========================================================================= */ /* ============================================================================ 1 - SPIELERSTATISTIKEN: RANGLISTE LINKS, EIGENE WERTE RECHTS ---------------------------------------------------------------------------- Vorher standen sechs Bloecke untereinander (gemessen 1536x770, Hoehe in px): Kopf 65, Wettbewerb 50, Statistik 50, Rangliste 1168, Deine Werte 242, Aufschluesselung 192, Einzelne Partien 338 - 2153 px fuer 650. Jetzt: Kopf | Wettbewerb (Liga/Pokal/National) Statistik (Torschuetzen ... Bewertung) (volle Breite) Rangliste (Tabelle rollt, | Deine Werte Kopf klebt, Dein Rang und | [Aufschluesselung | Einzelne Partien] Hinweis darunter) | Aufschluesselung / Partien (Liste rollt) Die Rangliste ist der Zweck der Seite (v0420-detail-screens.js: "The ranking is the point of these tabs") und bekommt die ganze Hoehe. Die Reiterleiste rechts (Aufklapper-Stufe, v0589-details3.js) gilt ab 981 px Breite bei JEDER Hoehe (ENTSCHEIDUNG-HAUPTSITZUNG.md, 21.09. abends: "ohne Scrollen bei allen Fensterhoehen"). Ein erster Stand zeigte sie nur bis 960 px; bei 2457x971 (virtuelle Flaeche der Skalierung) blieben der Partienliste dann 6 von 286 px (messungen/lauf2/kp-gross-nachher-profi-bis960.txt, #BLOCK-Zeile). Die Karten werden ueber ihre Reihenfolge angesprochen (article 1-4 aus v0420-detail-screens.js, registerScreen('competition-stats')), damit das Raster auch ohne das Modul steht. ========================================================================= */ /* Die Reiterleiste des Moduls gibt es nur ab 981 px Breite (Abschnitt unten). Auf dem Handy und ohne Modul bleibt sie weg, und beide Karten stehen untereinander. Erster Nachher-Lauf: diese Regel stand nur im Block ab 981 px, auf dem Handy erschien die Leiste (messungen/lauf1/handy-nachher.txt: 2 Textelemente mehr, Seite 66 px hoeher). */ #pl420Content[data-pl42-ansicht="competition-stats"] .pl589-d3-reiter{display:none} @media (min-width:981px){ #pl420Content[data-pl42-ansicht="competition-stats"]{display:flex;flex-direction:column} /* width:100% - in einer Flexsaeule hebt margin:0 auto (shell.css:116) das Strecken auf (v0576-passung.css Abschnitt 2). flex-basis 0: das Kind des Rollbehaelters schrumpft sonst nicht auf dessen Innenhoehe (gemessen im Strang details, v0589-details.css Abschnitt 1). */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen{ flex:1 1 0px; min-height:0; width:100%; display:grid; /* Rechts breiter. Die Aufschluesselung kann nicht schmaler werden als ihre neun Spalten (gemessen min-content bei 1366x768: de 555, en 592, it 572, es 565, fr 500, pt-BR 513, id 511 px; messungen/tabellenbreiten.txt): Kopfwoerter wie "PARADEN"/"ASSISTS" brechen nicht, den Zellenrand haelt phase2-premium.css fest (s. u.). Bei 1,1 : 1 zugunsten der Rangliste rollte sie waagerecht und versteckte die letzte Spalte (1280x720: 514 von 555 px, messungen/lauf-bilder-final.log). Die Rangliste bricht dagegen nur Namen und Vereine zwischen Woertern um und verliert keine Spalte; ihr Mindestmass sinkt ausserdem um rund 60 px (Sortierknoepfe unten). Gerechnet bei 1 : 1,25 (Innenrand 2 x 8 px): 1366 -> rechts 613, Tabelle 597 >= 592 (en); Rangliste 490 >= 386-423; 1280 -> 638 / 511; 1440 -> 647 / 518. */ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); /* Reihe 4 (Aufschluesselung bzw. Reiterleiste) darf schrumpfen: ohne Modul (Schalter __V0589_DETAILS3_AUS) stehen Aufschluesselung und Partien untereinander, und die Aufschluesselung allein lief bei 1280x720 um 17 px ueber das Fenster (messungen/lauf2/modulprobe.txt, Schritt 9; jetzt 0: messungen/modulprobe.txt). */ grid-template-rows:auto auto auto minmax(0,auto) minmax(0,1fr); grid-template-areas: "kopf wett" "metr metr" "rang werte" "rang aufs" "rang partien"; align-items:start; } #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>.pl42-screen-head{grid-area:kopf} /* Die Wettbewerbswahl steht rechts neben dem Titel (vorher eine eigene Zeile von 50 px). Wird die Spalte zu schmal, bricht sie um statt waagerecht zu rollen (.pl42-segment rollt sonst unsichtbar, shell.css:229). */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>.pl42-segment:nth-child(2){ grid-area:wett; align-self:center; justify-self:end; max-width:100%; flex-wrap:wrap; } /* Auch die Statistikwahl bricht um, statt Reiter unsichtbar zu verrollen (1024x768: 957 px Inhalt in 899, schon in V0.58.8 so, kp-vorher-de.txt). */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>.pl42-segment:nth-child(3){grid-area:metr;flex-wrap:wrap} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(1){grid-area:rang;align-self:stretch} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(2){grid-area:werte} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(3){grid-area:aufs} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(4){grid-area:partien;align-self:stretch} /* Rangliste: Kopf fest, Tabelle begrenzt, Dein Rang und Hinweis darunter. .pl42-panel.pl42-flush traegt overflow:hidden (shell.css:145), .pl42-hscroll overflow-y:hidden (shell.css:263) - beide werden fuer den senkrechten Bereich geoeffnet (wie v0576-passung.css Abschnitt 4 fuer die Ligatabelle). */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(1){ display:flex; flex-direction:column; min-height:0; overflow:visible; } #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(1)>*{flex:0 0 auto} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(1)>.pl42-hscroll{ flex:0 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; } /* system.css Abschnitt 1 setzt th auf static - mit Grund: ohne senkrechten Bereich klebte nichts. Hier gibt es den Bereich. */ #pl420Content[data-pl42-ansicht="competition-stats"] .pl42-hscroll>.pl42-table thead th{position:sticky;top:0;z-index:2} /* Die halbe Breite reicht der Rangliste nicht fuer 640 px Mindestbreite (screens.css:72). Spieler und Verein duerfen zwischen Woertern umbrechen, statt die letzte Spalte in einen waagerechten Roller zu schieben. */ #pl420Content[data-pl42-ansicht="competition-stats"] .pl42-hscroll>.pl42-table{min-width:0} /* Der Zellenrand (8/11 px) ist NICHT verhandelbar: phase2-premium.css setzt "thead th" und "tbody td" mit Wichtig-Markierung in Schicht "legacy" - das schlaegt jede ungeschichtete Regel (gemessen: eine Regel mit 8 px blieb wirkungslos, berechnet 11 px). Platz kommt deshalb aus dem Umbruch: Namen, Vereine, der Wettbewerb und mehrwortige Spaltenkoepfe ("ZU NULL", "Ø BEW.", "LISTA DE ARTILHEIROS") duerfen zwischen Woertern umbrechen. white-space:nowrap steht dort ohne Markierung und laesst sich aufheben. */ #pl420Content[data-pl42-ansicht="competition-stats"] .pl42-hscroll>.pl42-table th, #pl420Content[data-pl42-ansicht="competition-stats"] .pl42-board td:nth-child(2), #pl420Content[data-pl42-ansicht="competition-stats"] .pl42-board td:nth-child(3), #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(3) .pl42-table td:first-child{white-space:normal} /* Die Sortierknoepfe im Tabellenkopf (v0536-tabellen.js) erben aus phase1-product-foundation.css "button{min-width:44px}" (Schicht "legacy", ohne Markierung) - dadurch waren "#", "POS" und "SP." je 66 px breit fuer ein- bis dreistellige Werte (gemessen, plaene/js-regeln2.js). Die Breite der Spalte ergibt sich jetzt aus Kopf und Werten; die Hoehe von 44 px (v03812-responsive.css, mit Markierung) bleibt, die ganze Kopfzelle bleibt Klickflaeche. */ #pl420Content[data-pl42-ansicht="competition-stats"] .pl42-hscroll>.pl42-table th .pl536-kopf{min-width:0} /* Senkrechte Rollleiste so schmal wie die waagerechte (shell.css:264, 8 px); die Vorgabe des Browsers nahm 15 px der Tabellenbreite. */ #pl420Content[data-pl42-ansicht="competition-stats"] .pl42-hscroll::-webkit-scrollbar{width:8px} /* Deine Werte: vier Kennzahlen je Reihe - in der halben Breite wuerde auto-fit (shell.css:184, 140 px) auf zwei oder drei Spalten fallen und die Karte um bis zu drei Reihen hoeher machen. Ein festes Vierer-Raster (erster Nachher-Stand) brach dagegen lange Beschriftungen MITTEN IM WORT um: fr "TITULARISATI|ONS" bei 1366x768 (shots/erk-end-*-fr-1366x768.png; Spalte 108 px, Wort 111 px + 12 px Rand bei 10 px Schrift, gerechnet aus der Messung bei 1920x1080, messungen/wortbreiten.txt). Darum vier Spalten, von denen keine schmaler wird als ihr laengstes Wort (minmax(min-content,1fr)); die uebrigen teilen sich den Rest. Abstaende zuerst: Spalten-, Reihen- und Trennlinienabstand 14-30 -> 8 px (shell.css:185, screens.css:21). Gerechnet aus messungen/wortbreiten.txt (Summe der Spaltenminima + 3 x 8, Schrift 10 px): engste Lage 1024x768 (Innenbreite rund 399 px) - pt-BR 391, id 386, fr 346, de 334; bei 1280/1366/1536 bleibt ueberall Luft. Ein zweiter Versuch mit umbrechender Flexreihe stellte fr bei 1366x768 drei Kennzahlen in die erste Reihe und eine allein in die dritte (shots/erk-flex-*-fr-1366x768.png) - das Raster haelt die Spalten buendig. */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(2) .pl42-metric-row{ grid-template-columns:repeat(4,minmax(min-content,1fr)); column-gap:var(--pl42-s2); row-gap:var(--pl42-s2); } #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(2) .pl42-divider{ margin-top:var(--pl42-s2); margin-bottom:var(--pl42-s2); } /* Aufschluesselung und Partien: Kopf fest, Inhalt begrenzt. */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(3), #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(4){ display:flex; flex-direction:column; min-height:0; } #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(3)>*, #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(4)>*{flex:0 0 auto} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(3)>.pl42-hscroll{ flex:0 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; } /* Neun Spalten in der halben Breite: der seitliche Kartenrand gibt 5 px je Seite ab (11-15 -> 8 px, shell.css:143 bzw. v0576-passung.css:44). */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(3){ padding-left:var(--pl42-s2); padding-right:var(--pl42-s2); } /* Ohne Modul fehlt der Listenbereich: dann rollt die Karte selbst. */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(4):not(:has(>.pl589-d3-liste)){overflow-y:auto} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>article:nth-of-type(4)>.pl589-d3-liste{ flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } } /* Aufschluesselung und Partien teilen sich einen Platz hinter der Reiterleiste - bei jeder Hoehe, darum ohne Hoehenmarke (Entscheidung 2 der Hauptsitzung). Nur wenn das Modul die Leiste gebaut hat; sonst bleibt das Raster aus dem Abschnitt darueber (beide untereinander). */ @media (min-width:981px){ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen:has(>.pl589-d3-reiter){ grid-template-areas: "kopf wett" "metr metr" "rang werte" "rang reit" "rang feld"; } #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>.pl589-d3-reiter{display:flex;grid-area:reit} /* Lange Kartentitel ("AUFSCHLUESSELUNG NACH WETTBEWERB") brechen im Reiter zwischen Woertern um, statt in der Leiste unsichtbar zu verrollen. */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen>.pl589-d3-reiter>button{ flex:1 1 auto; justify-content:center; white-space:normal; text-align:center; } #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen:has(>.pl589-d3-reiter)>article[data-pl589-d3-feld]{grid-area:feld;align-self:stretch} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen:has(>.pl589-d3-reiter)>article[data-pl589-d3-feld]:not([data-pl589-d3-aktiv]){display:none} /* Der aktive Reiter traegt genau die Ueberschrift der Karte (das Modul liest sie aus deren Kopf) - dieselbe Zeile doppelt kostete 39 px der ohnehin knappen Flaeche (gemessen 1280x720: Aufschluesselung 185 px in 181). */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen:has(>.pl589-d3-reiter)>article[data-pl589-d3-feld]>.pl42-panel-head{display:none} /* Oberer und unterer Kartenrand 11-15 -> 8 px: gemessen lief die Aufschluesselung bei 1536x770 um 3 px in sich (200 von 203 px, messungen/lauf1/kp-nachher-de.txt, erster Nachher-Lauf). */ #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen:has(>.pl589-d3-reiter)>article[data-pl589-d3-feld]{ padding-top:var(--pl42-s2); padding-bottom:var(--pl42-s2); } } /* ============================================================================ 2 - VERTRAGSSEITE: DIE KADERPERSPEKTIVE BEKOMMT IHRE ZWEI SPALTEN ZURUECK ---------------------------------------------------------------------------- Im Jugendzustand steht eine dritte Karte im Raster (Entwicklungsplan, v0420-decisions.js registerScreen('contract')). auto-fit (detail.css:164, 320 px) teilt dann in drei gleiche Spalten; die Kaderperspektive wird so schmal, dass ihre vier Anzeigen (detail.css:10, zwei Spalten ab 420 px Innenbreite) untereinander fallen. Gemessen bei 1280x720 (Gegenpruefung daten, Wirt k): Karte 278 px statt 196 im Profizustand, die Seite 65 px ueber dem Fenster, "Taktische Passung" (613-648) unter der klebenden Aktionsleiste (ab 604) - 2 Elemente verdeckt. Umordnen statt Streichen: bei drei Karten bekommt die Kaderperspektive 1,5 Anteile. Gerechnet (Innenbreite = Spalte - 2 x 11 px Rand): 1280 -> 484 px Karte, 1366 -> 464, 1440 -> 490, 1536 -> 527 - ueberall >= 442, also zwei Anzeigen je Reihe wie im Profizustand. Mit zwei Karten (Profi) greift die Regel nicht, dort bleibt alles wie in V0.58.8. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-ansicht="contract"] .pl42-contract-grid:has(>.pl42-panel:nth-child(3)){ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); } } /* 1024x768 (kleinste Wirtsbreite): responsive.css:99 stapelt Verein und Vergleich unter 1025 px - der Kopf der Vertragsseite wurde so 386 statt 239-257 px hoch (gemessen, Jugendzustand; Seite 227 px ueber dem Fenster). Ab 981 px stehen beide wieder nebeneinander wie darueber (detail.css:148); gerechnet 1024 -> Vergleich 495 px breit, je Vertragsspalte rund 225 px. */ @media (min-width:981px){ #pl420Content[data-pl42-ansicht="contract"] .pl42-contract-top{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} } /* Kein Bruch mitten im Wort: in der Zeile "Konkurrenz auf deiner Position" drueckte der lange Wert (rechtsbuendig, min-width:0, detail.css:161) die Beschriftung unter ihr laengstes Wort, und overflow-wrap:break-word (shell.css:36) brach es - schon in V0.58.8: "Competencia" (es), "Concurrence" (fr), "Concorrência" (pt-BR), "Concorrenza" (it), "Competition" (en), "Persaingan" (id): 13 Brueche in 13 von 126 Ansichten im Profi- und 5 in 5 von 42 im Jugendzustand (messungen/wortbruch-vorher.txt; 7 Sprachen, 6 Fenster). Beide Seiten der Zeile behalten jetzt mindestens ihr laengstes Wort; umbrochen wird nur zwischen Woertern (nachher 0 von 126 bzw. 0 von 42, messungen/wortbruch-nachher.txt). */ @media (min-width:981px){ #pl420Content[data-pl42-ansicht="contract"] .pl42-compare-row>span, #pl420Content[data-pl42-ansicht="contract"] .pl42-compare-row>b{min-width:min-content} } /* Abstaende auf kurzen Schirmen: die Aktionsleiste traegt 14 px Innenrand oben und unten (detail.css:173) um Knoepfe von 44 px. */ @media (min-width:981px) and (max-height:800px){ #pl420Content[data-pl42-ansicht="contract"] .pl42-actionbar{padding-top:var(--pl42-s2);padding-bottom:var(--pl42-s2)} } /* ============================================================================ 3 - ZWISCHENHOEHEN 801-960 px: DIESELBEN ABSTAENDE WIE UNTER 800 ---------------------------------------------------------------------------- Ein maximiertes Fenster auf einem 1440x900- oder 1600x900-Monitor hat rund 820 px (Hauptsitzung, Nachtrag Zwischenhoehen). Unter 800 px setzt v0576-passung.css Abschnitt 44 (b) Innenrand oben/unten und Bloeckabstand auf 8 px; darueber gelten 22 bzw. 17,6 px (1600 px Breite, shell.css:112/117, detail.css:3). Gemessen bei 1600x820 (Wirt k, de): die Vertragsseite im Jugendzustand 83 px ueber dem Fenster in V0.58.8 (messungen/kp-vorher-u17-de.txt), nach Abschnitt 2 allein nur noch 5 px Luft - zu wenig fuer laengere Sprachen. Fuer die zwei Seiten dieses Strangs gilt darum bis 960 px Hoehe dieselbe Dichte wie unter 800. Nur Abstaende - keine Schrift, kein Deckel, keine Anordnung. national-team gehoert dem Strang liga: dessen Stand vom 21.09., 20:08 (v0589-liga.css, Abschnitt G bis 960 px) bringt die Seite in allen 11 gemessenen Fenstern auf 0 px (messungen/nt-liga-vorher.txt) - hier steht deshalb keine Regel dafuer. ========================================================================= */ @media (min-width:981px) and (max-height:960px){ #pl420Content[data-pl42-ansicht="competition-stats"], #pl420Content[data-pl42-ansicht="contract"]{padding-top:var(--pl42-s2);padding-bottom:var(--pl42-s2)} #pl420Content[data-pl42-ansicht="competition-stats"]>.pl42-screen, #pl420Content[data-pl42-ansicht="contract"]>.pl42-screen{gap:var(--pl42-s2)} }