The 160 pt grid minimum packed five small cards per iPad row. iOS columns now use a 280 pt minimum (one full-width card on iPhone portrait, 3–4 generous cards on iPad) and the card content scales with it: 56 pt icon, title3 name, taller padding. macOS keeps its compact 180–240 pt cards. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -160,12 +160,13 @@ struct ContentView: View {
|
||||
}
|
||||
|
||||
/// macOS caps card width (a huge window shouldn't yield huge cards); on iOS the
|
||||
/// columns FILL the width so the cards stay edge-aligned with the title and bars.
|
||||
/// columns FILL the width so the cards stay edge-aligned with the title and bars —
|
||||
/// sized touch-first: one column on iPhone portrait, 3–4 generous cards on iPad.
|
||||
private var gridColumns: [GridItem] {
|
||||
#if os(macOS)
|
||||
[GridItem(.adaptive(minimum: 180, maximum: 240), spacing: 16)]
|
||||
#else
|
||||
[GridItem(.adaptive(minimum: 160), spacing: 16)]
|
||||
[GridItem(.adaptive(minimum: 280), spacing: 16)]
|
||||
#endif
|
||||
}
|
||||
|
||||
@@ -203,23 +204,34 @@ struct ContentView: View {
|
||||
|
||||
private func hostCard(_ host: StoredHost) -> some View {
|
||||
let isConnecting = model.phase == .connecting && model.activeHost?.id == host.id
|
||||
#if os(iOS)
|
||||
let iconSize: CGFloat = 56
|
||||
let iconBox: CGFloat = 76
|
||||
let cardPadding: CGFloat = 28
|
||||
let nameFont = Font.title3.weight(.semibold)
|
||||
#else
|
||||
let iconSize: CGFloat = 42
|
||||
let iconBox: CGFloat = 56
|
||||
let cardPadding: CGFloat = 18
|
||||
let nameFont = Font.headline
|
||||
#endif
|
||||
return Button {
|
||||
connect(host)
|
||||
} label: {
|
||||
VStack(spacing: 10) {
|
||||
ZStack {
|
||||
Image(systemName: "play.display")
|
||||
.font(.system(size: 42, weight: .light))
|
||||
.font(.system(size: iconSize, weight: .light))
|
||||
.foregroundStyle(.tint)
|
||||
.opacity(isConnecting ? 0.3 : 1)
|
||||
if isConnecting {
|
||||
ProgressView()
|
||||
}
|
||||
}
|
||||
.frame(height: 56)
|
||||
.frame(height: iconBox)
|
||||
VStack(spacing: 2) {
|
||||
Text(host.displayName)
|
||||
.font(.headline)
|
||||
.font(nameFont)
|
||||
.lineLimit(1)
|
||||
HStack(spacing: 4) {
|
||||
if host.pinnedSHA256 != nil {
|
||||
@@ -235,7 +247,7 @@ struct ContentView: View {
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 18)
|
||||
.padding(.vertical, cardPadding)
|
||||
.padding(.horizontal, 12)
|
||||
.background(.regularMaterial, in: RoundedRectangle(cornerRadius: 14))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user