From ce8075afede884b9ff67e310f5fceaf63ff78351 Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Tue, 1 Mar 2022 13:12:56 -0800 Subject: [PATCH] update styling for grid item cards --- .../Components/FeedCardNavigationLink.swift | 11 ++- .../App/Views/Home/HomeFeedViewIOS.swift | 6 +- .../Sources/App/Views/Home/HomeView.swift | 4 +- .../Sources/Views/HomeFeedCardView.swift | 83 +++++++++++++++---- 4 files changed, 85 insertions(+), 19 deletions(-) diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift b/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift index 22296c679..52c4e83b0 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift @@ -12,6 +12,7 @@ struct FeedCardNavigationLink: View { @Binding var selectedLinkItem: FeedItem? @ObservedObject var viewModel: HomeFeedViewModel + var body: some View { NavigationLink( destination: LinkItemDetailView(viewModel: LinkItemDetailViewModel(item: item)), @@ -38,6 +39,7 @@ struct GridCardNavigationLink: View { @Binding var selectedLinkItem: FeedItem? @ObservedObject var viewModel: HomeFeedViewModel + var body: some View { ZStack { NavigationLink( @@ -47,11 +49,16 @@ struct GridCardNavigationLink: View { ) { GridCard(item: item) } -// .opacity(0) -// .buttonStyle(PlainButtonStyle()) +// .buttonStyle(FlatLinkStyle()) .onAppear { viewModel.itemAppeared(item: item, searchQuery: searchQuery, dataService: dataService) } } } } + +struct FlatLinkStyle: ButtonStyle { + func makeBody(configuration: Configuration) -> some View { + configuration.label + } +} diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift index c5034c443..926e55535 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift @@ -239,9 +239,11 @@ import Views @ObservedObject var viewModel: HomeFeedViewModel + private let columns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2) + var body: some View { ScrollView { - LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 20) { + LazyVGrid(columns: columns, spacing: 20) { ForEach(viewModel.items) { item in let link = GridCardNavigationLink( item: item, @@ -276,6 +278,8 @@ import Views } } } + .padding() + .background(Color(.systemGroupedBackground)) if viewModel.isLoading { LoadingSection() diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift b/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift index 0a49242b4..62181c412 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift @@ -24,7 +24,9 @@ struct HomeView: View { } .accentColor(.appGrayTextContrast) } else { - HomeFeedContainerView(isCompact: false, viewModel: viewModel) + GeometryReader { geo in + HomeFeedContainerView(isCompact: geo.size.width < 500, viewModel: viewModel) + } } #elseif os(macOS) HomeFeedView(viewModel: viewModel) diff --git a/apple/OmnivoreKit/Sources/Views/HomeFeedCardView.swift b/apple/OmnivoreKit/Sources/Views/HomeFeedCardView.swift index d0674fa62..4bb50bf8b 100644 --- a/apple/OmnivoreKit/Sources/Views/HomeFeedCardView.swift +++ b/apple/OmnivoreKit/Sources/Views/HomeFeedCardView.swift @@ -59,15 +59,20 @@ public struct GridCard: View { public var body: some View { VStack(alignment: .leading, spacing: 16) { // Progress Bar - ProgressView(value: Double.random(in: 0 ... 1)) - .foregroundColor(.appYellow48) - .frame(maxWidth: .infinity, alignment: .leading) + if #available(iOS 15.0, *) { + ProgressView(value: Double.random(in: 0 ... 1)) + .tint(.appYellow48) + .frame(maxWidth: .infinity, alignment: .leading) + } else { + ProgressView(value: Double.random(in: 0 ... 1)) + .frame(maxWidth: .infinity, alignment: .leading) + } // Title, Subtitle, Menu Button - VStack(alignment: .leading, spacing: 6) { + VStack(alignment: .leading, spacing: 4) { HStack { Text(item.title) - .font(.appSubheadline) + .font(.appHeadline) .foregroundColor(.appGrayTextContrast) .lineLimit(1) Spacer() @@ -80,14 +85,14 @@ public struct GridCard: View { HStack { if let author = item.author { Text("by \(author)") - .font(.appCaption) + .font(.appCaptionTwo) .foregroundColor(.appGrayText) .lineLimit(1) } if let publisherURL = item.publisherHostname { Text(publisherURL) - .font(.appCaption) + .font(.appCaptionTwo) .foregroundColor(.appGrayText) .underline() .lineLimit(1) @@ -96,14 +101,16 @@ public struct GridCard: View { Spacer() } } - .frame(height: 40) + .frame(height: 30) + .padding(.horizontal) // Description, Image - HStack { - Text(item.description ?? "No description") - .font(.appSubheadline) + HStack(alignment: .top) { + Text(item.description ?? item.title) + .font(.appFootnote) .foregroundColor(.appGrayTextContrast) .lineLimit(nil) + .multilineTextAlignment(.leading) Spacer() @@ -111,17 +118,63 @@ public struct GridCard: View { AsyncImage(url: imageURL, isResizable: true) .aspectRatio(1, contentMode: .fill) .frame(width: 135, height: 90) - .cornerRadius(6) + .cornerRadius(3) } } - .frame(height: 140) + .frame(height: 95) + .padding(.horizontal) // Labels HStack { - Text("Label 1") - Text("Label 2") + if Bool.random() { + TextChip(text: "label", color: .red) + TextChip(text: "longer label", color: .blue) + } Spacer() } + .frame(height: 30) + .padding(.horizontal) + .padding(.bottom, 8) } + .background(Color(.secondarySystemGroupedBackground)) + .cornerRadius(6) + } +} + +struct TextChipdep: View { + let text: String + let color: Color + + var body: some View { + Capsule() + .fill(color.opacity(0.3)) + .border(color.opacity(0.7), width: 3) + .overlay( + Text(text) + .font(.appFootnote) + .foregroundColor(color) + .padding() + ) + } +} + +struct TextChip: View { + let text: String + let color: Color + let cornerRadius = 20.0 + + var body: some View { + Text(text) + .padding(.horizontal, 10) + .padding(.vertical, 5) + .font(.appFootnote) + .foregroundColor(color) + .lineLimit(1) + .background(color.opacity(0.1)) + .cornerRadius(cornerRadius) + .overlay( + RoundedRectangle(cornerRadius: cornerRadius) + .stroke(color.opacity(0.3), lineWidth: 1) + ) } }