diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift b/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift index fc530d3f1..49ef8dd79 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift @@ -66,6 +66,7 @@ struct GridCardNavigationLink: View { viewModel.itemAppeared(item: item, searchQuery: searchQuery, dataService: dataService) } } + .aspectRatio(2.2, contentMode: .fill) .scaleEffect(scale) } } diff --git a/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift b/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift index 7304fdbfa..4fcb7bfea 100644 --- a/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift +++ b/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift @@ -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 } + } } }