prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make grid card sizing adaptive

Browse source
This commit is contained in:
Satindar Dhillon 2022-03-10 14:04:59 -08:00
parent 89694ca3d2
commit 5d3e12e1ce
2 changed files with 89 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift
View file

@ -66,6 +66,7 @@ struct GridCardNavigationLink: View {
viewModel.itemAppeared(item: item, searchQuery: searchQuery, dataService: dataService)
}
}
.aspectRatio(2.2, contentMode: .fill)
.scaleEffect(scale)
}
}

175
apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift
View file

@ -59,111 +59,112 @@ public struct GridCard: View {
}
public var body: some View {
VStack(alignment: .leading, spacing: 16) {
// Progress Bar
Group {
// Remove os check when dropping macOS 11
#if os(iOS)
if #available(iOS 15.0, *) {
ProgressView(value: min(abs(item.readingProgress) / 100, 1))
.tint(.appYellow48)
.frame(maxWidth: .infinity, alignment: .leading)
} else {
GeometryReader { geo in
VStack(alignment: .leading, spacing: 16) {
// Progress Bar
Group {
// Remove os check when dropping macOS 11
#if os(iOS)
if #available(iOS 15.0, *) {
ProgressView(value: min(abs(item.readingProgress) / 100, 1))
.tint(.appYellow48)
.frame(maxWidth: .infinity, alignment: .leading)
} else {
ProgressView(value: max(abs(item.readingProgress) / 100, 1))
.frame(maxWidth: .infinity, alignment: .leading)
}
#else
ProgressView(value: max(abs(item.readingProgress) / 100, 1))
.frame(maxWidth: .infinity, alignment: .leading)
}
#else
ProgressView(value: max(abs(item.readingProgress) / 100, 1))
.frame(maxWidth: .infinity, alignment: .leading)
#endif
}
.onTapGesture { tapHandler() }
// Title, Subtitle, Menu Button
VStack(alignment: .leading, spacing: 4) {
HStack {
Text(item.title)
.font(.appHeadline)
.foregroundColor(.appGrayTextContrast)
.lineLimit(1)
.onTapGesture { tapHandler() }
Spacer()
Menu(
content: { contextMenuView },
label: { Image.dotsThree }
)
.frame(width: 16, height: 16, alignment: .center)
.onTapGesture { isContextMenuOpen = true }
}
HStack {
if let author = item.author {
Text("by \(author)")
.font(.appCaptionTwo)
.foregroundColor(.appGrayText)
.lineLimit(1)
}
if let publisherURL = item.publisherHostname {
Text(publisherURL)
.font(.appCaptionTwo)
.foregroundColor(.appGrayText)
.underline()
.lineLimit(1)
}
Spacer()
#endif
}
.onTapGesture { tapHandler() }
}
.frame(height: 30)
.padding(.horizontal)
// Link description and image
GeometryReader { geo in
// Title, Subtitle, Menu Button
VStack(alignment: .leading, spacing: 4) {
HStack {
Text(item.title)
.font(.appHeadline)
.foregroundColor(.appGrayTextContrast)
.lineLimit(1)
.onTapGesture { tapHandler() }
Spacer()
Menu(
content: { contextMenuView },
label: { Image.dotsThree }
)
.frame(width: 16, height: 16, alignment: .center)
.onTapGesture { isContextMenuOpen = true }
}
HStack {
if let author = item.author {
Text("by \(author)")
.font(.appCaptionTwo)
.foregroundColor(.appGrayText)
.lineLimit(1)
}
if let publisherURL = item.publisherHostname {
Text(publisherURL)
.font(.appCaptionTwo)
.foregroundColor(.appGrayText)
.underline()
.lineLimit(1)
}
Spacer()
}
.onTapGesture { tapHandler() }
}
.frame(height: 30)
.padding(.horizontal)
// Link description and image
HStack(alignment: .top) {
Text(item.description ?? item.title)
.font(.appFootnote)
.font(.appSubheadline)
.foregroundColor(.appGrayTextContrast)
.lineLimit(nil)
.multilineTextAlignment(.leading)
.frame(height: (geo.size.width * 2) / 9, alignment: .top)
Spacer()
if let imageURL = item.imageURL {
AsyncImage(url: imageURL, isResizable: true)
.aspectRatio(1, contentMode: .fill)
.frame(width: min(geo.size.width / 3, 135), height: min((geo.size.width * 2) / 9, 90))
.aspectRatio(contentMode: .fill)
.frame(width: geo.size.width / 3, height: (geo.size.width * 2) / 9)
.cornerRadius(3)
}
}
}
.frame(height: 95)
.padding(.horizontal)
.onTapGesture { tapHandler() }
// Category Labels
if FeatureFlag.showFeedItemTags {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
TextChip(text: "label", color: .red)
TextChip(text: "longer label", color: .blue)
Spacer()
}
.frame(height: 30)
.padding(.horizontal)
.padding(.bottom, 8)
}
} else {
Spacer(minLength: 8)
}
}
.background(
Color.secondarySystemGroupedBackground
.padding(.horizontal)
.padding(.bottom, 5)
.onTapGesture { tapHandler() }
)
.cornerRadius(6)
.contextMenu { contextMenuView }
// Category Labels
if FeatureFlag.showFeedItemTags {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
TextChip(text: "label", color: .red)
TextChip(text: "longer label", color: .blue)
Spacer()
}
.frame(height: 30)
.padding(.horizontal)
.padding(.bottom, 8)
}
} else {
Spacer(minLength: 8)
}
}
.background(
Color.secondarySystemGroupedBackground
.onTapGesture { tapHandler() }
)
.cornerRadius(6)
.contextMenu { contextMenuView }
}
}
}