From 2f0158de8d346671de3859b0f2818ea6ef8e0266 Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Wed, 9 Mar 2022 20:53:57 -0800 Subject: [PATCH 1/8] split ios and mac implementations of primary layout --- .../App/Views/LinkItemDetailView.swift | 1 + .../App/Views/PrimaryContentView.swift | 53 ++++++++++++------- 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/apple/OmnivoreKit/Sources/App/Views/LinkItemDetailView.swift b/apple/OmnivoreKit/Sources/App/Views/LinkItemDetailView.swift index 36b19523f..0d0234d29 100644 --- a/apple/OmnivoreKit/Sources/App/Views/LinkItemDetailView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/LinkItemDetailView.swift @@ -186,6 +186,7 @@ struct LinkItemDetailView: View { } } + @available(macOS 12.0, *) @available(iOS 15.0, *) var navBar: some View { HStack(alignment: .center) { diff --git a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift index f8ca2f10d..1320cfc07 100644 --- a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift @@ -4,40 +4,53 @@ import SwiftUI import Views public struct PrimaryContentView: View { + let categories = [ + PrimaryContentCategory.feed, + PrimaryContentCategory.profile + ] + public var body: some View { #if os(iOS) if UIDevice.isIPad { - regularView + splitView } else { HomeView() } #elseif os(macOS) - regularView + splitView #endif } - // ipad and mac view container - private var regularView: some View { - let categories = [ - PrimaryContentCategory.feed, - PrimaryContentCategory.profile - ] + #if os(macOS) + private var splitView: some View { + NavigationView { + // The first column is the sidebar. + PrimaryContentSidebar(categories: categories) + .navigationTitle("Categories") - return NavigationView { - // The first column is the sidebar. - PrimaryContentSidebar(categories: categories) - .navigationTitle("Categories") + // Second column is the Primary Nav Stack + PrimaryContentCategory.feed.destinationView - // Second column is the Primary Nav Stack - PrimaryContentCategory.feed.destinationView - - // Add a third column for macOS only - #if os(macOS) + // Third column is the detail view Text("Select a link from the feed") - #endif + } + .accentColor(.appGrayTextContrast) } - .accentColor(.appGrayTextContrast) - } + #endif + + #if os(iOS) + private var splitView: some View { + NavigationView { + // The first column is the sidebar. + PrimaryContentSidebar(categories: categories) + .navigationTitle("Categories") + + // Second column is the Primary Nav Stack + PrimaryContentCategory.feed.destinationView + } + .accentColor(.appGrayTextContrast) + } + #endif } struct PrimaryContentSidebar: View { From 8003e0af23090f2a675a4e49d513771596eb355b Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Wed, 9 Mar 2022 21:47:40 -0800 Subject: [PATCH 2/8] update split view controller behavior for ipad --- .../App/Views/Home/HomeFeedViewIOS.swift | 81 ++++++++++--------- .../Sources/App/Views/Home/HomeView.swift | 4 +- .../App/Views/PrimaryContentView.swift | 7 +- 3 files changed, 50 insertions(+), 42 deletions(-) diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift index 04a07ba01..bf44c0e8d 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift @@ -289,7 +289,8 @@ import Views @ObservedObject var viewModel: HomeFeedViewModel - private let columns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2) + private let twoColumns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2) + private let oneColumn = [GridItem(.flexible(), spacing: 20)] func contextMenuActionHandler(item: FeedItem, action: GridCardAction) { switch action { @@ -303,51 +304,53 @@ import Views var body: some View { ScrollView { - LazyVGrid(columns: columns, spacing: 20) { - ForEach(viewModel.items, id: \.renderID) { item in - let link = GridCardNavigationLink( - item: item, - searchQuery: searchQuery, - actionHandler: { contextMenuActionHandler(item: item, action: $0) }, - selectedLinkItem: $selectedLinkItem, - isContextMenuOpen: $isContextMenuOpen, - viewModel: viewModel - ) - if #available(iOS 15.0, *) { - link - .alert("Are you sure?", isPresented: $confirmationShown) { - Button("Remove Link", role: .destructive) { - if let itemToRemove = itemToRemove { - withAnimation { - viewModel.removeLink(dataService: dataService, linkId: itemToRemove.id) + GeometryReader { geo in + LazyVGrid(columns: geo.size.width < 500 ? oneColumn : twoColumns, spacing: 20) { + ForEach(viewModel.items, id: \.renderID) { item in + let link = GridCardNavigationLink( + item: item, + searchQuery: searchQuery, + actionHandler: { contextMenuActionHandler(item: item, action: $0) }, + selectedLinkItem: $selectedLinkItem, + isContextMenuOpen: $isContextMenuOpen, + viewModel: viewModel + ) + if #available(iOS 15.0, *) { + link + .alert("Are you sure?", isPresented: $confirmationShown) { + Button("Remove Link", role: .destructive) { + if let itemToRemove = itemToRemove { + withAnimation { + viewModel.removeLink(dataService: dataService, linkId: itemToRemove.id) + } } + self.itemToRemove = nil } - self.itemToRemove = nil + Button("Cancel", role: .cancel) { self.itemToRemove = nil } } - Button("Cancel", role: .cancel) { self.itemToRemove = nil } - } - } else { - link + } else { + link + } } } - } - .padding() - .background( - GeometryReader { - Color(.systemGroupedBackground).preference( - key: ScrollViewOffsetPreferenceKey.self, - value: $0.frame(in: .global).origin.y - ) + .padding() + .background( + GeometryReader { + Color(.systemGroupedBackground).preference( + key: ScrollViewOffsetPreferenceKey.self, + value: $0.frame(in: .global).origin.y + ) + } + ) + .onPreferenceChange(ScrollViewOffsetPreferenceKey.self) { offset in + if !viewModel.isLoading, offset > 240 { + viewModel.loadItems(dataService: dataService, searchQuery: searchQuery, isRefresh: true) + } } - ) - .onPreferenceChange(ScrollViewOffsetPreferenceKey.self) { offset in - if !viewModel.isLoading, offset > 240 { - viewModel.loadItems(dataService: dataService, searchQuery: searchQuery, isRefresh: true) - } - } - if viewModel.items.isEmpty, viewModel.isLoading { - LoadingSection() + if viewModel.items.isEmpty, viewModel.isLoading { + LoadingSection() + } } } .onAppear { diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift b/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift index 62181c412..2be7ba9a5 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift @@ -24,8 +24,8 @@ struct HomeView: View { } .accentColor(.appGrayTextContrast) } else { - GeometryReader { geo in - HomeFeedContainerView(isCompact: geo.size.width < 500, viewModel: viewModel) + GeometryReader { _ in + HomeFeedContainerView(isCompact: UIDevice.isIPhone, viewModel: viewModel) } } #elseif os(macOS) diff --git a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift index 1320cfc07..1bea072f8 100644 --- a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift @@ -43,12 +43,17 @@ public struct PrimaryContentView: View { NavigationView { // The first column is the sidebar. PrimaryContentSidebar(categories: categories) - .navigationTitle("Categories") + .navigationTitle("") + .navigationBarTitleDisplayMode(.inline) // Second column is the Primary Nav Stack PrimaryContentCategory.feed.destinationView } .accentColor(.appGrayTextContrast) + .introspectSplitViewController { + $0.preferredSplitBehavior = .tile + $0.preferredPrimaryColumnWidth = 200 + } } #endif } From 589e217b2881954fc4eb07b32b618bc4ef8db959 Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Thu, 10 Mar 2022 09:40:16 -0800 Subject: [PATCH 3/8] remove geometry reader from grid view --- .../App/Views/Home/HomeFeedViewIOS.swift | 81 +++++++++---------- 1 file changed, 39 insertions(+), 42 deletions(-) diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift index bf44c0e8d..04a07ba01 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift @@ -289,8 +289,7 @@ import Views @ObservedObject var viewModel: HomeFeedViewModel - private let twoColumns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2) - private let oneColumn = [GridItem(.flexible(), spacing: 20)] + private let columns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2) func contextMenuActionHandler(item: FeedItem, action: GridCardAction) { switch action { @@ -304,53 +303,51 @@ import Views var body: some View { ScrollView { - GeometryReader { geo in - LazyVGrid(columns: geo.size.width < 500 ? oneColumn : twoColumns, spacing: 20) { - ForEach(viewModel.items, id: \.renderID) { item in - let link = GridCardNavigationLink( - item: item, - searchQuery: searchQuery, - actionHandler: { contextMenuActionHandler(item: item, action: $0) }, - selectedLinkItem: $selectedLinkItem, - isContextMenuOpen: $isContextMenuOpen, - viewModel: viewModel - ) - if #available(iOS 15.0, *) { - link - .alert("Are you sure?", isPresented: $confirmationShown) { - Button("Remove Link", role: .destructive) { - if let itemToRemove = itemToRemove { - withAnimation { - viewModel.removeLink(dataService: dataService, linkId: itemToRemove.id) - } + LazyVGrid(columns: columns, spacing: 20) { + ForEach(viewModel.items, id: \.renderID) { item in + let link = GridCardNavigationLink( + item: item, + searchQuery: searchQuery, + actionHandler: { contextMenuActionHandler(item: item, action: $0) }, + selectedLinkItem: $selectedLinkItem, + isContextMenuOpen: $isContextMenuOpen, + viewModel: viewModel + ) + if #available(iOS 15.0, *) { + link + .alert("Are you sure?", isPresented: $confirmationShown) { + Button("Remove Link", role: .destructive) { + if let itemToRemove = itemToRemove { + withAnimation { + viewModel.removeLink(dataService: dataService, linkId: itemToRemove.id) } - self.itemToRemove = nil } - Button("Cancel", role: .cancel) { self.itemToRemove = nil } + self.itemToRemove = nil } - } else { - link - } + Button("Cancel", role: .cancel) { self.itemToRemove = nil } + } + } else { + link } } - .padding() - .background( - GeometryReader { - Color(.systemGroupedBackground).preference( - key: ScrollViewOffsetPreferenceKey.self, - value: $0.frame(in: .global).origin.y - ) - } - ) - .onPreferenceChange(ScrollViewOffsetPreferenceKey.self) { offset in - if !viewModel.isLoading, offset > 240 { - viewModel.loadItems(dataService: dataService, searchQuery: searchQuery, isRefresh: true) - } + } + .padding() + .background( + GeometryReader { + Color(.systemGroupedBackground).preference( + key: ScrollViewOffsetPreferenceKey.self, + value: $0.frame(in: .global).origin.y + ) } + ) + .onPreferenceChange(ScrollViewOffsetPreferenceKey.self) { offset in + if !viewModel.isLoading, offset > 240 { + viewModel.loadItems(dataService: dataService, searchQuery: searchQuery, isRefresh: true) + } + } - if viewModel.items.isEmpty, viewModel.isLoading { - LoadingSection() - } + if viewModel.items.isEmpty, viewModel.isLoading { + LoadingSection() } } .onAppear { From 0e9d896d917d854e5264246b8119a79c4c754a2a Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 10 Mar 2022 10:05:04 -0800 Subject: [PATCH 4/8] Use the smaller dots three image in grid cards --- .../Sources/Views/FeedItem/GridCard.swift | 3 ++- .../OmnivoreKit/Sources/Views/Images/Images.swift | 1 + .../_dots-three.imageset/Contents.json | 15 +++++++++++++++ .../_dots-three.imageset/dots-three.svg | 8 ++++++++ 4 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/Contents.json create mode 100644 apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/dots-three.svg diff --git a/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift b/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift index 17f1c1c49..cb58bd770 100644 --- a/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift +++ b/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift @@ -91,8 +91,9 @@ public struct GridCard: View { Menu( content: { contextMenuView }, - label: { Image.profile } + label: { Image.dotsThree } ) + .frame(width: 16, height: 16, alignment: .center) .onTapGesture { isContextMenuOpen = true } } diff --git a/apple/OmnivoreKit/Sources/Views/Images/Images.swift b/apple/OmnivoreKit/Sources/Views/Images/Images.swift index e612a4afa..9fbd99fe2 100644 --- a/apple/OmnivoreKit/Sources/Views/Images/Images.swift +++ b/apple/OmnivoreKit/Sources/Views/Images/Images.swift @@ -17,4 +17,5 @@ public extension Image { static var profileTab: Image { Image("_profileTab", bundle: .module) } static var profile: Image { Image("_profile", bundle: .module) } static var profileTabSelected: Image { Image("_profileTabSelected", bundle: .module) } + static var dotsThree: Image { Image("_dots-three", bundle: .module) } } diff --git a/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/Contents.json b/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/Contents.json new file mode 100644 index 000000000..aa1900a0f --- /dev/null +++ b/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/Contents.json @@ -0,0 +1,15 @@ +{ + "images" : [ + { + "filename" : "dots-three.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "template-rendering-intent" : "template" + } +} diff --git a/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/dots-three.svg b/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/dots-three.svg new file mode 100644 index 000000000..f4fd68b87 --- /dev/null +++ b/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/dots-three.svg @@ -0,0 +1,8 @@ + + + + + + + + From 7ea237316dd39fbc89225742a00a8250bba2f56a Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Thu, 10 Mar 2022 11:27:38 -0800 Subject: [PATCH 5/8] disable split view panel visibility gesture --- apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift index 1bea072f8..6134bb0a8 100644 --- a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift @@ -53,6 +53,10 @@ public struct PrimaryContentView: View { .introspectSplitViewController { $0.preferredSplitBehavior = .tile $0.preferredPrimaryColumnWidth = 200 + if #available(iOS 14.5, *) { + $0.presentsWithGesture = false + $0.displayModeButtonVisibility = .always + } } } #endif From 89694ca3d22c9d8a60f482f905b5ae07928d17e2 Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Thu, 10 Mar 2022 11:57:03 -0800 Subject: [PATCH 6/8] constrain grid card image size to 1/3 of card width --- .../App/Views/PrimaryContentView.swift | 2 -- .../Sources/Views/FeedItem/GridCard.swift | 26 ++++++++++--------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift index 6134bb0a8..a77048444 100644 --- a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift @@ -43,8 +43,6 @@ public struct PrimaryContentView: View { NavigationView { // The first column is the sidebar. PrimaryContentSidebar(categories: categories) - .navigationTitle("") - .navigationBarTitleDisplayMode(.inline) // Second column is the Primary Nav Stack PrimaryContentCategory.feed.destinationView diff --git a/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift b/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift index cb58bd770..7304fdbfa 100644 --- a/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift +++ b/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift @@ -121,20 +121,22 @@ public struct GridCard: View { .padding(.horizontal) // Link description and image - HStack(alignment: .top) { - Text(item.description ?? item.title) - .font(.appFootnote) - .foregroundColor(.appGrayTextContrast) - .lineLimit(nil) - .multilineTextAlignment(.leading) + GeometryReader { geo in + HStack(alignment: .top) { + Text(item.description ?? item.title) + .font(.appFootnote) + .foregroundColor(.appGrayTextContrast) + .lineLimit(nil) + .multilineTextAlignment(.leading) - Spacer() + Spacer() - if let imageURL = item.imageURL { - AsyncImage(url: imageURL, isResizable: true) - .aspectRatio(1, contentMode: .fill) - .frame(width: 135, height: 90) - .cornerRadius(3) + 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)) + .cornerRadius(3) + } } } .frame(height: 95) From 5d3e12e1ce6234e2a221d7620efa31844f3a094b Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Thu, 10 Mar 2022 14:04:59 -0800 Subject: [PATCH 7/8] make grid card sizing adaptive --- .../Components/FeedCardNavigationLink.swift | 1 + .../Sources/Views/FeedItem/GridCard.swift | 175 +++++++++--------- 2 files changed, 89 insertions(+), 87 deletions(-) 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 } + } } } From 4e2c8e5d4061a378c188d9afc607085591f99090 Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Thu, 10 Mar 2022 14:21:25 -0800 Subject: [PATCH 8/8] lower aspect ratio for grid card --- .../App/Views/Home/Components/FeedCardNavigationLink.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift b/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift index 49ef8dd79..f9c45cc71 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift @@ -66,7 +66,7 @@ struct GridCardNavigationLink: View { viewModel.itemAppeared(item: item, searchQuery: searchQuery, dataService: dataService) } } - .aspectRatio(2.2, contentMode: .fill) + .aspectRatio(2.1, contentMode: .fill) .scaleEffect(scale) } }