ScarriffleandClaude Opus 5
f8ada44a8c
Drei Gründe, warum der Mac anders aussah, und keiner davon war Geschmack. **Die Schrift.** macOS rendert dieselben Textstile deutlich kleiner als iOS: `largeTitle` misst dort 26 Punkt statt 34, Fließtext 13 statt 17. Eine Oberfläche, die auf dem iPad stimmt, wirkt damit zusammengeschrumpft. Auf dem Mac stehen jetzt feste Größen — die von iOS. Das kostet dort Dynamic Type; vertretbar, weil macOS keine systemweite Textgröße kennt und man ein Fenster stattdessen größer ziehen kann. **Der Aufmacher wächst mit.** Das war der zweite, größere Teil: das Bild ist so breit wie das Fenster, die Schrift darauf war es nicht. Bei 1280 Punkt Breite wirkt ein 34-Punkt-Titel verloren, bei 834 auf dem iPad genau richtig. Titel, Schriftzug, Angaben und Abstände richten sich jetzt nach der Breite des Aufmachers — mit dem iPad als Bezug und einem Deckel, damit ein Fenster über die ganze Wand nicht in Plakatschrift endet. Die Beschreibung bekommt außerdem eine Zeilenbreite: ein Satz über 1280 Punkt ist unlesbar, das Auge verliert die Zeile. **Die Seitenleiste.** Sie richtet sich nach ihrem Inhalt, und bei Wörtern wie „Start" fällt sie auf eine Breite zusammen, in der schon der Kontoname darunter nicht mehr Platz hatte — daher das „S…". Die Beschriftungen haben jetzt eine Mindestbreite. **Die Formulare.** Auf dem Mac nahm SwiftUI den Spalten-Stil: Beschriftungen rechts ausgerichtet, keine abgesetzten Abschnitte. Jetzt derselbe gruppierte Stil wie auf iOS. Dazu: Scrollbalken sind weg. Der graue Streifen unter dem Aufmacher kam daher, dass in den Systemeinstellungen „Scrollbalken immer einblenden" steht — dagegen reicht `.hidden` nicht, `.never` schon. Und das Fenster öffnet mit 1280 × 820 statt in Notizzettelgröße, ohne graue Titelleiste. 263 Tests grün, iOS baut unverändert. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
85 lines
3.7 KiB
Swift
85 lines
3.7 KiB
Swift
import SwiftUI
|
|
|
|
/// Die Schriftskala der App.
|
|
///
|
|
/// Auf iOS die Systemstile, damit Dynamic Type wirkt. Die Rolle steht im
|
|
/// Namen, nicht die Größe — sonst führt jede Anpassung zu einer Suche quer
|
|
/// durch alle Views.
|
|
///
|
|
/// **Auf dem Mac stehen feste Größen.** Dieselben Stile sind dort deutlich
|
|
/// kleiner: `largeTitle` misst 26 Punkt statt 34, `body` 13 statt 17. Eine
|
|
/// Oberfläche, die auf dem iPad stimmt, wirkt damit auf dem Mac zusammen-
|
|
/// geschrumpft — und genau das war sie. Die Zahlen hier sind die von iOS.
|
|
///
|
|
/// Das kostet auf dem Mac Dynamic Type. Das ist vertretbar: macOS hat keine
|
|
/// systemweite Textgrößen-Einstellung, auf die Apps reagieren müssten, und ein
|
|
/// Fenster lässt sich stattdessen größer ziehen.
|
|
extension Font {
|
|
#if os(macOS)
|
|
/// Der Titel im Aufmacher-Bild.
|
|
public static let flixyHero = Font.system(size: 34, weight: .bold)
|
|
/// Titel auf Detailseiten.
|
|
public static let flixyTitle = Font.system(size: 22, weight: .semibold)
|
|
/// Überschrift einer Reihe auf der Startseite.
|
|
public static let flixyRowHeader = Font.system(size: 17, weight: .semibold)
|
|
/// Titel unter einem Poster.
|
|
public static let flixyCardTitle = Font.system(size: 15, weight: .medium)
|
|
/// Fließtext, Beschreibungen.
|
|
public static let flixyBody = Font.system(size: 17)
|
|
/// Jahreszahl, Laufzeit, Auflösung — alles, was neben dem Titel steht.
|
|
public static let flixyCaption = Font.system(size: 12)
|
|
#else
|
|
/// Der Titel im Aufmacher-Bild.
|
|
public static let flixyHero = Font.system(.largeTitle, design: .default, weight: .bold)
|
|
/// Titel auf Detailseiten.
|
|
public static let flixyTitle = Font.system(.title2, design: .default, weight: .semibold)
|
|
/// Überschrift einer Reihe auf der Startseite.
|
|
public static let flixyRowHeader = Font.system(.headline, design: .default, weight: .semibold)
|
|
/// Titel unter einem Poster.
|
|
public static let flixyCardTitle = Font.system(.subheadline, design: .default, weight: .medium)
|
|
/// Fließtext, Beschreibungen.
|
|
public static let flixyBody = Font.system(.body)
|
|
/// Jahreszahl, Laufzeit, Auflösung — alles, was neben dem Titel steht.
|
|
public static let flixyCaption = Font.system(.caption)
|
|
#endif
|
|
}
|
|
|
|
/// Abstände.
|
|
///
|
|
/// Eine Skala statt frei gewählter Zahlen: dadurch stimmen die Ränder zwischen
|
|
/// Bildschirmen überein, ohne dass man sie einzeln nachmisst.
|
|
public enum FlixySpacing {
|
|
public static let tight: CGFloat = 4
|
|
public static let snug: CGFloat = 8
|
|
public static let regular: CGFloat = 12
|
|
public static let loose: CGFloat = 16
|
|
public static let section: CGFloat = 24
|
|
/// Der seitliche Rand des Inhalts zum Bildschirmrand.
|
|
public static let screenMargin: CGFloat = 16
|
|
}
|
|
|
|
public enum FlixyRadius {
|
|
public static let card: CGFloat = 8
|
|
public static let sheet: CGFloat = 16
|
|
public static let control: CGFloat = 10
|
|
}
|
|
|
|
/// Die Seitenverhältnisse, in denen Plex seine Bilder liefert.
|
|
///
|
|
/// An einer Stelle, weil ein falscher Wert nicht auffällt, sondern nur
|
|
/// beschneidet: ein 16:9-Hintergrundbild in einem 3:4-Rahmen verliert links
|
|
/// und rechts je ein Viertel, und man sieht dem Ergebnis nicht an, dass etwas
|
|
/// fehlt.
|
|
public enum FlixyAspectRatio {
|
|
/// Kinoplakate im Hochformat.
|
|
public static let poster: CGFloat = 2.0 / 3.0
|
|
/// Szenenbilder und Hintergrundbilder.
|
|
public static let landscape: CGFloat = 16.0 / 9.0
|
|
/// Der Aufmacher auf der Startseite — dasselbe wie `landscape`, weil Plex
|
|
/// dafür `art` liefert.
|
|
public static let hero: CGFloat = landscape
|
|
/// Sendersymbole. Breiter als hoch, weil Senderlogos Schriftzüge sind —
|
|
/// quadratisch beschnitten fehlt der halbe Name.
|
|
public static let channelLogo: CGFloat = 5.0 / 3.0
|
|
}
|