/* TravTools · © MUNLabs * mobil.css — Bedienung mit dem Daumen (r90) * * Diese Datei steht als letzte in der Kette (siehe _shared/css_stack.php). * Das ist Absicht und kein Zufall: die Mobilregeln muessen die * Komponenten-Ebene aus premium.css uebersteuern koennen, und sie stehen * alle an einer Stelle — wer spaeter am Handy-Verhalten etwas aendert, muss * nicht durch zwanzig Dateien suchen. * * Alles hier steht in einer Medienabfrage. Am Schreibtisch aendert sich * nichts, kein einziger Pixel. * * Das Handy-Menue selbst liegt weiter in _shared/layout.css, direkt neben * der Beschreibung seines Markups. */ /* ================================================================== 0 · DIE KOPFZEILE MUSS HAFTEN In _shared/sidebar.css steht seit jeher "position:sticky; top:0" – sie hat es nur nie getan. Der Grund liegt zwei Ebenen hoeher: body.tt-app traegt overflow-x:hidden, und sobald eine Achse "hidden" ist, wird der Koerper zum Scrollbehaelter. Darin hat sticky keinen Anker mehr und verhaelt sich wie relative – die Leiste scrollte mit weg. Auf dem Handy wiegt das schwer: wer eine lange Mitgliederliste durchsieht, verliert den Menueknopf aus dem Bild und muss erst wieder ganz nach oben. "clip" schneidet genauso ab wie "hidden", erzeugt aber keinen Scrollbehaelter. Dazu overflow-y:visible, weil eine Achse auf "clip" sonst wieder zu "hidden" wird, sobald die andere "auto" ist. Bewusst nur unter 980 Pixel: am Schreibtisch bleibt alles, wie es ist. ================================================================== */ @media (max-width:980px){ body.tt-app{ overflow-x:clip; overflow-y:visible; } } /* ================================================================== 1 · KOPFZEILE Auf 390 Pixel blieben dem Seitentitel ganze 62 Pixel. "Uebersicht" braucht 92 und stand deshalb als "Ube…" da — auf jeder Seite, den ganzen Tag. Das Emblem links ist Zierde, der Titel sagt, wo man ist: also weicht das Emblem. ================================================================== */ @media (max-width:620px){ .tt-top-icon{display:none} .tt-top-inner{gap:8px} /* 15px statt 16: bei 16 fehlten "Spielerverwaltung" acht Pixel und es stand "Spielerverwaltun…" da. Laengere Titel kuerzt der Browser weiter mit Auslassungspunkten – das ist gewollt, nicht jeder Titel passt. */ .tt-top-title{font-size:14.5px; line-height:1.25} .tt-top-right{gap:6px} /* Die Knoepfe oben rechts waren 34 Pixel hoch. 40 ist das Groesste, was neben der Uhr in die 66 Pixel hohe Leiste passt, ohne sie zu sprengen. */ .tt-top-right .tt-btn-mini, .tt-top-right .tt-bell, .tt-top-burger{min-height:40px} } @media (max-width:400px){ .tt-top{padding:10px 10px} .tt-top-title{font-size:14px} .tt-top-inner{gap:8px} .tt-top-right{gap:5px} } /* ================================================================== 2 · EINGABEFELDER Safari auf dem iPhone zoomt in die Seite hinein, sobald man ein Feld mit weniger als 16 Pixel Schrift antippt — und zoomt nicht von selbst zurueck. Danach steht die Seite verschoben da und man muss von Hand herauszoomen. Das ist der Grund, warum Formulare auf dem Handy "verrutschen"; es liegt nicht am Formular. 16 Pixel ist die Schwelle, ab der Safari es sein laesst. ================================================================== */ @media (max-width:760px){ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea, .tt-inp{ font-size:16px !important; } } /* ================================================================== 3 · TIPPZIELE Ein Finger trifft rund 44 Pixel zuverlaessig; darunter tippt man daneben. Gemessen wurde zwischen 34 und 36 Pixel. Bewusst auf .tt-main begrenzt: in der Kopfzeile gilt Abschnitt 1 mit seinen 40 Pixeln, denn dort gibt die Leistenhoehe die Grenze vor. ================================================================== */ @media (max-width:760px){ .tt-main .tt-btn, .tt-main button, .tt-main select, .tt-main input[type=submit], .tt-main input[type=button], .tt-main input[type=reset], .tt-main input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .tt-main .tt-inp{ min-height:44px; } /* Kaestchen und Punkte: die Schrift daneben bleibt, wie sie ist — groesser wird nur das, was man trifft. */ .tt-main input[type=checkbox], .tt-main input[type=radio]{ width:21px; height:21px; min-width:21px; } /* Das Kreuz zum Schliessen war 20 Pixel gross. Wer es verfehlt, tippt auf das, was darunter liegt. */ .tt-modal-close{ min-width:44px; min-height:44px; display:inline-grid; place-items:center; } } /* ================================================================== 4 · MODALE Sie passten schon auf den Bildschirm (premium.css rechnet mit 100vw - 36px), liessen aber links und rechts je 18 Pixel liegen und endeten bei 90vh. Auf einem 390er Bildschirm ist beides spuerbar. ================================================================== */ @media (max-width:620px){ .tt-modal{ width:calc(100vw - 20px) !important; max-width:calc(100vw - 20px) !important; max-height:calc(100vh - 72px) !important; border-radius:20px !important; } .tt-modal-header{padding:14px 16px !important} .tt-modal-body{ padding:16px !important; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .tt-modal-foot{padding:14px 16px !important} /* Zwei Knoepfe nebeneinander werden auf 350 Pixel schnell zu schmal, um ihre Beschriftung zu zeigen. Untereinander haben sie Platz. */ .tt-modal-foot{flex-wrap:wrap} .tt-modal-foot > .tt-btn{flex:1 1 140px} } /* ================================================================== 5 · TABELLEN BEKOMMEN EINE SCHIENE (r91) Das Tool hat 47 verschiedene Tabellenklassen, viele davon mit sechs bis zehn Spalten – Truppenquote, Einsatzplan, Artefakte, Berichte, Pushcalls, Getreideverwaltung, Weltwunder. Auf 390 Pixel hat der Browser sie nicht etwa breiter gemacht, sondern die Spalten zusammengequetscht, bis alles hineinpasste. Deshalb hat die Messung auch kein Querscrollen gefunden: nichts ragte heraus, der Inhalt wurde stattdessen INNERHALB der Zellen abgeschnitten. Aus "Kornröschen" wurde "Kornrö…", aus einer Uhrzeit ein Rest. Jetzt behalten die Spalten ihre Breite und die Tabelle laesst sich seitlich schieben. Nichts verschwindet mehr. Bewusst allgemein und ohne Klassenliste: bei 47 Klassen waere jede Aufzaehlung nach der naechsten neuen Tabelle wieder unvollstaendig. ================================================================== */ @media (max-width:760px){ /* Der Kasten um die Tabelle wird zur Schiene. */ .tt-main *:has(> table){ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } /* Und die Tabelle darf so breit sein, wie ihr Inhalt es braucht. */ .tt-main table{ min-width:max-content; } /* Die Grenze fuer Zellen mit langem Text: ohne sie wuerde eine Zelle mit einem ganzen Satz die Tabelle auf mehrere tausend Pixel ziehen und man schoebe sich einen Nachmittag lang nach rechts. Kurze Datenzellen bleiben davon unberuehrt. */ .tt-main table td, .tt-main table th{ max-width:320px; } } /* ================================================================== 6 · WAS NUR BEIM UEBERFAHREN ERSCHEINT (r91) Auf dem Anleitungsseite gibt es an jeder Ueberschrift einen Knopf, der den Link kopiert. Er steht auf opacity:0 und wird erst sichtbar, wenn die Maus darueberfaehrt. Auf einem Handy faehrt nichts darueber – die Knoepfe waren dort unsichtbar und damit nicht vorhanden. 64 Stueck allein auf einer Seite. Dasselbe bei den Notizkarten, dem Loeschknopf im Verlauf und den Aktionen am Feed. Die Abfrage geht nach dem Eingabegeraet, nicht nach der Breite: ein Geraet ohne Zeiger hat auch bei 1200 Pixel kein Ueberfahren. Reine Zierde – Glanzkanten, Schimmer – bleibt unangetastet. ================================================================== */ @media (hover:none){ .gd-topic h3 .cp, details.gd-topic > summary .cp, .tt-note-card .nc-actions, .tt-nt-logitem .tt-nt-logdel, .tt-feed-actions{ opacity:1 !important; } } /* ================================================================== 7 · LANGE SEITENTITEL (r91) Nach r90 hat der Titel 135 Pixel. Das reicht fuer die meisten, aber auf 22 Seiten steht weiter ein Auslassungspunkt. Der Untertitel ist auf dem Handy ausgeblendet, also ist unter dem Titel Platz: zwei Zeilen passen in die 66 Pixel hohe Leiste, ohne sie zu dehnen. "Eingehende Angriffe" steht damit vollstaendig da. Ein einzelnes ueberlanges Wort kuerzt der Browser weiterhin – das laesst sich nicht umbrechen. ================================================================== */ @media (max-width:620px){ .tt-top-title{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.15; } } /* ================================================================== 8 · WENN EINE SEITE IHRE EIGENE MEINUNG HAT (r91) Die Regeln aus Abschnitt 2 und 3 haben nicht ueberall gegriffen. Der Grund ist nicht die Reihenfolge der Dateien, sondern die Spezifitaet: viele Seiten bringen einen eigenen