/** * HypeBites – Tablet und Desktop * ============================================================================ * * WOFÜR DIESE DATEI * ----------------- * Alles andere im Projekt ist für das Handy gebaut und dort fertig. Auf * breiten Schirmen stand bisher genau dieselbe Telefon-Oberfläche: 20px * Seitenrand, 10px zwischen den Kacheln, 176px breite Karten -- nur eben * in einem 1400px breiten Fenster. Das ist der Grund, warum die Seite am * Rechner gequetscht wirkt, obwohl kein einziger Wert zu klein ist. Sie * sind zu klein FÜR DIESE FLÄCHE. * * Diese Datei ist die einzige Stelle, die das Verhalten ab 768px regelt. * * WARUM EINE EIGENE DATEI UND NICHT IN JEDER DATEI EIN @media-BLOCK * ----------------------------------------------------------------- * Zwei Gründe: * * 1. Die fertige Handy-Ansicht bleibt unangetastet. Keine Regel hier * greift unter 768px -- was auf dem Telefon heute richtig aussieht, * kann durch diese Datei nicht kaputtgehen. * 2. "Wie verhält sich die App auf dem Desktop?" ist EINE Frage und * hat EINE Antwort-Datei. Verteilt auf sieben Stylesheets wäre sie * in einem halben Jahr wieder ein Flickenteppich. * * WIE ES FUNKTIONIERT * ------------------- * Zuerst wachsen die Leitern aus hb-tokens.css (Abstände, Schriftgrössen, * Seitenrand). Alles, was bereits mit var(--hb-space-*) gebaut ist -- * vor allem die Spot-Seite -- atmet dadurch automatisch mit. Danach * kommen die Bausteine, die noch feste Pixelwerte tragen, sowie die * Stellen, an denen eine Handy-Geste auf dem Desktop keinen Sinn ergibt: * waagerecht scrollende Reihen werden zu Rastern, denn am Rechner * scrollt niemand gern seitwärts. * * WIRD ZULETZT GELADEN * -------------------- * inc/hb-assets.php hängt diese Datei an alle anderen Stylesheets als * Abhängigkeit -- sie steht damit immer als letzte im Quelltext und * gewinnt bei gleicher Spezifität, ohne !important. * * @package divi-child */ /* ============================================================================ 1 LEITERN: AB TABLET MEHR LUFT, AB DESKTOP NOCH ETWAS MEHR Zwei Stufen, nicht fünf. Jede weitere Stufe ist eine zusätzliche Ansicht, die jemand prüfen muss -- und Zwischengrössen fallen ohnehin niemandem auf. Die Innenabstände (xs, sm) wachsen bewusst NICHT mit: Der Abstand zwischen Symbol und Beschriftung ist eine Frage der Schriftgrösse, nicht der Fensterbreite. Nur die Abstände ZWISCHEN Bauteilen wachsen. ============================================================================ */ @media (min-width: 768px) { :root { --hb-gutter: 28px; --hb-space-md: 24px; --hb-space-lg: 38px; --hb-space-xl: 60px; --hb-text-sm: 14px; --hb-text-md: 16px; --hb-text-lg: 19px; --hb-text-xl: 28px; /* Lesebreite: So breit darf eine Spalte mit Text und Karten werden. Alles darüber liest sich schlechter, nicht besser -- 80 bis 90 Zeichen pro Zeile ist die Grenze, ab der das Auge die nächste Zeile nicht mehr sicher findet. */ --hb-measure: 820px; } } @media (min-width: 1200px) { :root { --hb-gutter: 40px; --hb-space-lg: 44px; --hb-space-xl: 72px; --hb-text-xl: 32px; --hb-measure: 880px; } } /* ============================================================================ 2 SPOT-SEITE Die Spot-Seite ist schon vollständig auf die Token gebaut, deshalb stimmen Abstände und Schriftgrössen ab hier von selbst. Drei Dinge bleiben. ============================================================================ */ @media (min-width: 768px) { .hb-spot { max-width: var(--hb-measure); } /* a) Die Aktionsreihe (Merken, Liken, Teilen, Bewerten) stand am Rechner links zusammengeschoben und liess rechts ein Drittel der Spalte leer. Ursache: hb-style.css setzt .hb-spot-actions auf width:fit-content -- am Telefon fällt das nicht auf, weil vier Symbole dort ohnehin die volle Breite füllen. Die Regel in hb-spot.css setzt zwar grid-template-columns: repeat(4, 1fr), aber keine Breite, und überschreibt fit-content damit nicht. */ .hb-spot .hb-spot-actions { width: 100%; } /* b) Die Mood-Reihe zieht sich am Telefon absichtlich bis an beide Bildschirmkanten und scrollt seitwärts. In einer 820px-Spalte mitten auf einem 1440px-Schirm ergibt beides keinen Sinn: Es gibt keine Kante, an die sie sich anlegen könnte, und Platz für alle Blasen ist da. Also einfach umbrechen lassen. */ .hb-spot-moods { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; } /* c) Die Bewertungs- und Video-Kacheln dürfen mitwachsen statt in Handybreite stehen zu bleiben. */ .hb-spot .hb-video-grid, .hb-spot .hb-reviews-list { gap: var(--hb-space-md); } } /* ============================================================================ 3 DASHBOARD-RAHMEN Ab 901px steht die Navigation wieder links als Seitenleiste (darunter übernimmt die Bottom-Bar). Die Werte hier gelten also für genau die Ansicht mit Seitenleiste. ============================================================================ */ @media (min-width: 901px) { .hb-dash-app { /* Vorher 4% Seitenrand: auf 1440px sind das 57px, auf 1024px nur 41px -- der Rand wanderte mit der Fensterbreite, während alles darin gleich blieb. Ein fester Wert aus der Leiter ist ruhiger. */ padding: var(--hb-space-lg) var(--hb-gutter); gap: var(--hb-space-xl); } .hb-dash-sidebar { top: var(--hb-space-lg); } .hb-dash-title { font-size: var(--hb-text-xl); margin-bottom: var(--hb-space-md); } } /* ============================================================================ 4 ÜBERSICHT: DIE REGALE Die waagerecht scrollenden Reihen bleiben -- sie sind hier richtig, weil sie eine Rangfolge zeigen ("die neuesten zuerst") und nicht alles auf einmal zeigen sollen. Am Rechner dürfen die Karten aber grösser sein: 240px sind auf einem Telefon eine ganze Bildschirmbreite, auf 1000px Fläche wirken sie wie Briefmarken. ============================================================================ */ @media (min-width: 901px) { .hb-spot-grid { gap: var(--hb-space-md); } .hb-spot-grid .hb-grid-card { flex-basis: 272px; width: 272px; } .hb-grid-card-body { padding: var(--hb-space-md); } /* Die Suchleiste war genauso hoch wie am Telefon und wirkte dadurch wie ein Eingabefeld in einem Formular, nicht wie der Einstieg in die App. */ .hb-map-searchwrap { padding: 0 var(--hb-space-md); } .hb-map-search { padding: 17px 0; font-size: var(--hb-text-md); } } @media (min-width: 1400px) { .hb-spot-grid .hb-grid-card { flex-basis: 300px; width: 300px; } } /* ---------------------------------------------------------------- Die Pfeile der Regale: in die Kopfzeile, auf Höhe der Überschrift Vorher lagen sie halb auf der ersten und letzten Karte (left/right: -8px, top: 40%) und trafen dort auf die Entfernungs-Pille und das Merken-Symbol. Drei runde Elemente auf engstem Raum, von denen zwei zur Karte gehören und eines nicht -- deshalb wirkten sie wie danebengelegt. Jetzt sitzen sie rechts in derselben Zeile wie die Überschrift. Dass sie dort GENAU auf einer Höhe stehen, macht nicht das CSS, sondern hbDashWireArrows() in hb-dashboard.js: Es stellt Titel und Pfeile in einen gemeinsamen Kasten (.hb-shelf-head). Der Grund ist Verlässlichkeit -- ein Hochziehen per negativem Versatz müsste die Höhe der Überschrift kennen, und die ändert sich mit der Schriftgrösse, mit dem Zusatz "· 5 km" im Titel und mit jedem Umbruch auf schmalen Schirmen. Ein Flex-Kasten braucht diese Zahl nicht. Der nicht nutzbare Pfeil wird gedimmt statt ausgeblendet: Ein Paar liest sich als Bedienelement, ein einzelner Punkt sieht aus wie ein Versehen -- und so springt auch nichts, wenn man am Anfang oder Ende der Reihe ankommt. Unter 768px bleibt alles wie es ist: Dort wird gewischt, die Pfeile sind ausgeblendet, und die leere Kopfzeile zeigt nur den Titel. ---------------------------------------------------------------- */ .hb-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hb-space-md); } .hb-shelf-head .hb-dash-title { margin-bottom: 0; /* min-width: 0 hält lange Titel in der Zeile, statt die Pfeile hinauszudrücken -- "In deiner Nähe · 10 km" ist der längste Fall. */ min-width: 0; } .hb-shelf-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* hover: hover gehört zwingend dazu. hb-style.css blendet die Pfeile auf Touch-Geräten mit display: none !important aus -- und die Regeln hier tragen ebenfalls !important (sie müssen hb-hidden überstimmen) und stehen später im Quelltext. Ohne diese Bedingung gewännen sie, und auf einem iPad Pro mit 1366px stünden die Pfeile wieder da. */ @media (min-width: 768px) and (hover: hover) { /* In der Kopfzeile sind die Pfeile normale Elemente in einer Reihe -- die absolute Positionierung aus hb-style.css wird zurückgenommen. */ .hb-shelf-nav .hb-scroll-arrow { position: static; top: auto; left: auto; right: auto; transform: none; width: 34px; height: 34px; font-size: 12px; box-shadow: none; transition: opacity var(--hb-ease), transform var(--hb-ease); } .hb-shelf-nav .hb-scroll-arrow:hover { transform: scale(1.06); opacity: 1; } .hb-shelf-nav .hb-scroll-arrow:active { transform: scale(.94); } /* hb-hidden setzt hb-style.css auf display:none -- hier wird daraus "vorhanden, aber nicht benutzbar". */ .hb-shelf-nav .hb-scroll-arrow.hb-hidden { display: flex !important; opacity: .28; pointer-events: none; } /* Fallback für Regale ohne eigene Kopfzeile -- auf der Startseite baut hb-app.js die Reihe, dort steht die Überschrift in einem eigenen Divi-Modul und lässt sich nicht zuverlässig finden. Dort bleiben die Pfeile im Slider, rücken aber wenigstens aus den Fotos heraus: in einen eigenen Streifen über der Reihe. */ .hb-grid-scroll-wrap:has(> .hb-scroll-arrow) { padding-top: 48px; } .hb-grid-scroll-wrap > .hb-scroll-arrow { top: 2px; transform: none; width: 34px; height: 34px; font-size: 12px; box-shadow: none; } .hb-grid-scroll-wrap > .hb-scroll-left { left: auto; right: 42px; } .hb-grid-scroll-wrap > .hb-scroll-right { right: 0; } .hb-grid-scroll-wrap > .hb-scroll-arrow.hb-hidden { display: flex !important; opacity: .28; pointer-events: none; } } /* Zwischen 768 und 900px läuft die App noch im Vollbild-Modus des Telefons: Die Übersicht hebt dort den Seitenrand komplett auf, damit die Karten am Handy bis an beide Kanten laufen. Auf einem iPad im Hochformat ist genau das der Eindruck, den Florian beschrieben hat -- Inhalt klebt am Glas, nichts hat eine Kante. Die Regel drüben trägt !important (sie muss gegen Divis Spalten gewinnen), deshalb steht es auch hier. Nur für die Übersicht: Die Karte SOLL den ganzen Schirm bekommen, eine Karte mit Rand wäre ein Bild von einer Karte. */ @media (min-width: 768px) and (max-width: 900px) { body.hb-home-fullscreen-active .hb-dash-app { padding-left: var(--hb-gutter) !important; padding-right: var(--hb-gutter) !important; } } /* ============================================================================ 5 MERKLISTE: NEBENEINANDER STATT EINE SPALTE ÜBER 1000px Eine Spot-Karte ist ein Foto, ein Titel, zwei Angaben. Über die ganze Breite gezogen steht der Titel links, die Entfernung 900px weiter rechts, und dazwischen ist nichts -- das Auge muss die Strecke jedes Mal überbrücken. Zwei bis drei Karten pro Reihe lösen das, ohne dass sich an der Karte selbst etwas ändert. Die Wischgesten bleiben davon unberührt: Sie hängen am Zeigegerät (@media (hover: none)), nicht an der Fensterbreite. ============================================================================ */ /* Schon ab Tablet, nicht erst ab Desktop: Auf einem iPad im Hochformat (834px) passen zwei Karten nebeneinander. Eine einzelne Karte über 834px ist genau das Bild, das Florian als "gequetscht" beschrieben hat -- viel Fläche, wenig darauf. */ @media (min-width: 768px) { .hb-dash-listpanel .hb-spot-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--hb-space-sm); } .hb-list-topbar { margin-bottom: var(--hb-space-md); } /* Der Leerzustand ist bewusst NICHT im Raster: Ein einzelner Kasten, der ein Drittel der Breite einnimmt, sieht aus wie ein Fehler. */ .hb-dash-listpanel .hb-dash-emptystate { max-width: var(--hb-measure); padding: var(--hb-space-xl) var(--hb-space-lg); } } /* ============================================================================ 6 PROFIL ("Mein Konto") Das Profil war am Desktop der auffälligste Fall: Die drei Kennzahlen zogen sich über 1000px auseinander, während die Karten darunter in 176px-Häppchen links klebten. Zwei Massstäbe auf derselben Seite. Antwort: EINE Lesebreite für die ganze Seite, und die Karten füllen sie in einem Raster aus. ============================================================================ */ @media (min-width: 768px) { .hb-konto { max-width: var(--hb-measure); } .hb-konto-section { margin-bottom: var(--hb-space-xl); } .hb-konto-section-title { font-size: var(--hb-text-lg); margin-bottom: var(--hb-space-md); } /* Kennzahlen: mehr Innenraum, damit die Kachel nicht nur ein Rahmen um eine Zahl ist. */ .hb-konto-stats { gap: var(--hb-space-sm); margin-bottom: var(--hb-space-lg); } .hb-konto-stat { padding: var(--hb-space-md) var(--hb-space-sm); } /* Letzte Besuche: aus dem Wisch-Karussell wird ein Raster. Seitwärts scrollen ist eine Telefongeste -- mit Maus ist sie unbequem (Shift+Rad), und der Platz dafür ist ohnehin da. */ .hb-konto-slider { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--hb-space-sm); overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .hb-konto-visit { flex: 1 1 auto; width: auto; padding: var(--hb-space-md); } .hb-konto-listgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--hb-space-sm); } .hb-konto-menu-item { padding: var(--hb-space-sm) var(--hb-space-md); } .hb-konto-head { gap: var(--hb-space-md); margin-bottom: var(--hb-space-lg); } .hb-konto-avatar { width: 104px; height: 104px; } .hb-konto-name { font-size: var(--hb-text-xl); } .hb-konto-placeholder { padding: var(--hb-space-lg) var(--hb-space-md); } } /* Im Dashboard hebt .hb-dash-account die Breitenbegrenzung des Profils auf, damit es sich in den Reiter einfügt. Am Desktop führte genau das dazu, dass das Profil als einziger Reiter über die volle Breite lief. */ @media (min-width: 901px) { .hb-dash-account .hb-konto { max-width: var(--hb-measure); /* Links bündig statt mittig: Im Dashboard hat der Inhalt eine feste linke Kante -- die Überschrift der Übersicht, die Listenreiter der Merkliste. Ein mittig gesetztes Profil wäre der einzige Reiter, der beim Umschalten seitlich wegspringt. Auf der eigenständigen Seite /mein-profil/ bleibt es mittig, dort gibt es keine Seitenleiste. */ margin-left: 0; margin-right: auto; } } /* ============================================================================ 7 KONTOFORMULAR (Ultimate Member) Hier steckten zwei echte Fehler, keine Geschmacksfragen: 1. hb-um-forms.css baut ab 900px ein zweispaltiges Raster mit max-width: 880px -- aber der Kasten darüber, .um, war auf 520px begrenzt. Ein Kind kann nicht breiter werden als sein Elternteil. 2. Das Raster stand auf der falschen Ebene (.um-form statt dem
darin) und hatte deshalb gar keine zwei Kinder zu verteilen. Punkt 2 ist in hb-um-forms.css behoben, Abschnitt 14 -- er gehört zum Konto-Formular und nicht zur Bildschirmbreite. Punkt 1 steht hier: Die 520px sind für Anmeldung und Registrierung richtig, ein Login-Formular soll schmal sein. Aufgehoben wird die Begrenzung deshalb nur auf der Konto-Seite. ============================================================================ */ @media (min-width: 900px) { .um-account.um { max-width: 880px; } .um-account .um-form { gap: var(--hb-space-lg); } .um-account .um-account-side { padding: var(--hb-space-md); } /* Beschriftung und Feld dürfen etwas auseinanderrücken, sobald Platz da ist -- am Telefon wäre derselbe Abstand verschwendete Höhe. */ .um-account .um-form-field, .um-account .um-field { margin-bottom: var(--hb-space-md); } } /* ============================================================================ 8 ÜBERALL: MODALE FENSTER Die Modale sind am Telefon fast bildschirmfüllend, was dort richtig ist. Am Desktop stand derselbe schmale Streifen mitten auf dem Schirm. ============================================================================ */ @media (min-width: 768px) { .hb-review-box, .hb-konto-modal-card, .hb-list-modal-card { max-width: 560px; padding: var(--hb-space-lg); } .hb-review-title, .hb-konto-modal-title { font-size: var(--hb-text-lg); } }