stub in grid feed card wireframe

This commit is contained in:
Satindar Dhillon 2022-03-01 10:07:50 -08:00
parent 0a9d06efb1
commit e8873ad5f4
2 changed files with 65 additions and 35 deletions

View file

@ -39,18 +39,19 @@ struct GridCardNavigationLink: View {
@ObservedObject var viewModel: HomeFeedViewModel
var body: some View {
NavigationLink(
destination: LinkItemDetailView(viewModel: LinkItemDetailViewModel(item: item)),
tag: item,
selection: $selectedLinkItem
) {
EmptyView()
ZStack {
NavigationLink(
destination: LinkItemDetailView(viewModel: LinkItemDetailViewModel(item: item)),
tag: item,
selection: $selectedLinkItem
) {
GridCard(item: item)
}
// .opacity(0)
// .buttonStyle(PlainButtonStyle())
.onAppear {
viewModel.itemAppeared(item: item, searchQuery: searchQuery, dataService: dataService)
}
}
.opacity(0)
.buttonStyle(PlainButtonStyle())
.onAppear {
viewModel.itemAppeared(item: item, searchQuery: searchQuery, dataService: dataService)
}
GridCard(item: item)
}
}

View file

@ -57,42 +57,71 @@ public struct GridCard: View {
}
public var body: some View {
HStack(alignment: .top, spacing: 6) {
VStack(alignment: .leading, spacing: 6) {
Text(item.title)
.font(.appSubheadline)
.foregroundColor(.appGrayTextContrast)
.lineLimit(2)
.frame(maxWidth: .infinity, alignment: .leading)
VStack(alignment: .leading, spacing: 16) {
// Progress Bar
ProgressView(value: Double.random(in: 0 ... 1))
.foregroundColor(.appYellow48)
.frame(maxWidth: .infinity, alignment: .leading)
if let author = item.author {
Text("By \(author)")
.font(.appCaption)
.foregroundColor(.appGrayText)
// Title, Subtitle, Menu Button
VStack(alignment: .leading, spacing: 6) {
HStack {
Text(item.title)
.font(.appSubheadline)
.foregroundColor(.appGrayTextContrast)
.lineLimit(1)
Spacer()
Button(
action: { print("grid button tapped") },
label: { Image.profile }
)
}
if let publisherURL = item.publisherHostname {
Text(publisherURL)
.font(.appCaption)
.foregroundColor(.appGrayText)
.underline()
.lineLimit(1)
HStack {
if let author = item.author {
Text("by \(author)")
.font(.appCaption)
.foregroundColor(.appGrayText)
.lineLimit(1)
}
if let publisherURL = item.publisherHostname {
Text(publisherURL)
.font(.appCaption)
.foregroundColor(.appGrayText)
.underline()
.lineLimit(1)
}
Spacer()
}
}
.frame(maxWidth: .infinity)
.multilineTextAlignment(.leading)
.padding(0)
.frame(height: 40)
// Description, Image
HStack {
Text(item.description ?? "No description")
.font(.appSubheadline)
.foregroundColor(.appGrayTextContrast)
.lineLimit(nil)
Spacer()
Group {
if let imageURL = item.imageURL {
AsyncImage(url: imageURL, isResizable: true)
.aspectRatio(1, contentMode: .fill)
.frame(width: 80, height: 80)
.frame(width: 135, height: 90)
.cornerRadius(6)
}
}
.frame(height: 140)
// Labels
HStack {
Text("Label 1")
Text("Label 2")
Spacer()
}
}
.frame(maxWidth: .infinity, minHeight: 100, idealHeight: 100, maxHeight: 100)
}
}