Skip to content

Commit

Permalink
fix: Move scrolling to encompass entire stop page (#583)
Browse files Browse the repository at this point in the history
  • Loading branch information
@EmmaSimon
EmmaSimon authored Dec 12, 2024
1 parent 39d705c commit 4fe4cf7
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 78 deletions.
2 changes: 1 addition & 1 deletion iosApp/iosApp/Localizable.xcstrings
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8722,7 +8722,7 @@
}
},
"Waiting to depart" : {
"comment" : "Label for a vehicle stopped at a terminal station waiting to start a trip. For example: Waiting to depart Alewife",
"comment" : "Label for a vehicle stopped at a terminal station waiting to start a trip.\nFor example: Waiting to depart Alewife",
"localizations" : {
"es" : {
"stringUnit" : {
Expand Down
4 changes: 1 addition & 3 deletions iosApp/iosApp/Pages/StopDetails/StopDetailsFilteredDepartureDetails.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,7 @@ struct StopDetailsFilteredDepartureDetails: View {
.fill(Color.halo)
.frame(height: 2)
.frame(maxWidth: .infinity)
// This unscrollable scroll view is necessary to prevent the sheet from messing up the layout
// of the contents and cutting off the header when not in large detent.
ScrollView([], showsIndicators: false) {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 16) {
ScrollViewReader { view in
DirectionPicker(
Expand Down
145 changes: 71 additions & 74 deletions iosApp/iosApp/Pages/StopDetails/TripStops.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,87 +79,84 @@ struct TripStops: View {
}

var body: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .center, spacing: 0) {
if let splitStops, let target {
if !splitStops.collapsedStops.isEmpty, let stopsAway {
DisclosureGroup(
isExpanded: $stopsExpanded,
content: {
VStack(alignment: .center, spacing: 0) {
if let splitStops, let target {
if !splitStops.collapsedStops.isEmpty, let stopsAway {
DisclosureGroup(
isExpanded: $stopsExpanded,
content: {
VStack(spacing: 0) {
HaloSeparator().overlay(alignment: .leading) {
// Lil 1x4 pt route color bar to maintain an
// unbroken route color line over the separator
ColoredRouteLine(routeAccents.color).padding(.leading, 42)
}
stopList(list: splitStops.collapsedStops)
}
},
label: {
HStack(spacing: 0) {
VStack(spacing: 0) {
HaloSeparator().overlay(alignment: .leading) {
// Lil 1x4 pt route color bar to maintain an
// unbroken route color line over the separator
ColoredRouteLine(routeAccents.color).padding(.leading, 42)
if stopsExpanded {
ColoredRouteLine(routeAccents.color)
} else {
routeLineTwist
}
stopList(list: splitStops.collapsedStops)
}
},
label: {
HStack(spacing: 0) {
VStack(spacing: 0) {
if stopsExpanded {
ColoredRouteLine(routeAccents.color)
} else {
routeLineTwist
}
}
.transition(.opacity.animation(.easeInOut(duration: 0.2)))
.frame(minWidth: 24)
.transition(.opacity.animation(.easeInOut(duration: 0.2)))
.frame(minWidth: 24)

Text(
"\(stopsAway, specifier: "%ld") stops away",
comment: "How many stops away the vehicle is from the target stop"
)
.foregroundStyle(Color.text)
.padding(.leading, 16)
Spacer()
}.frame(maxWidth: .infinity, minHeight: 56)
}
)
.disclosureGroupStyle(.tripDetails)
.accessibilityElement()
.accessibilityAddTraits(.isHeader)
.accessibilityHeading(.h2)
.accessibilityLabel(Text(
"\(routeTypeText) is \(stopsAway, specifier: "%ld") stops away from \(target.stop.name)",
comment: """
VoiceOver label for how many stops away a vehicle is from a stop,
ex 'bus is 4 stops away from Harvard'
"""
))
.accessibilityHint(Text(
"List remaining stops",
comment: """
VoiceOver hint explaining what happens when 'x stops away'
is selected (open an accordion listing those stops)
"""
))
}
TripStopRow(
stop: target,
now: now.toKotlinInstant(),
onTapLink: onTapLink,
routeAccents: routeAccents,
targeted: true
Text(
"\(stopsAway, specifier: "%ld") stops away",
comment: "How many stops away the vehicle is from the target stop"
)
.foregroundStyle(Color.text)
.padding(.leading, 16)
Spacer()
}.frame(maxWidth: .infinity, minHeight: 56)
}
)
.background(Color.fill3)
stopList(list: splitStops.followingStops)
} else {
stopList(list: stops.stops)
.disclosureGroupStyle(.tripDetails)
.accessibilityElement()
.accessibilityAddTraits(.isHeader)
.accessibilityHeading(.h2)
.accessibilityLabel(Text(
"\(routeTypeText) is \(stopsAway, specifier: "%ld") stops away from \(target.stop.name)",
comment: """
VoiceOver label for how many stops away a vehicle is from a stop,
ex 'bus is 4 stops away from Harvard'
"""
))
.accessibilityHint(Text(
"List remaining stops",
comment: """
VoiceOver hint explaining what happens when 'x stops away'
is selected (open an accordion listing those stops)
"""
))
}
TripStopRow(
stop: target,
now: now.toKotlinInstant(),
onTapLink: onTapLink,
routeAccents: routeAccents,
targeted: true
)
.background(Color.fill3)
stopList(list: splitStops.followingStops)
} else {
stopList(list: stops.stops)
}
.padding(.top, vehicleShown ? 56 : 0)
.overlay(alignment: .topLeading) {
ColoredRouteLine(routeAccents.color).frame(maxHeight: vehicleShown ? 56 : 0).padding(.leading, 42)
}
.background(Color.fill2)
.scrollBounceBehavior(.basedOnSize, axes: [.vertical])
.clipShape(RoundedRectangle(cornerRadius: 8))
.padding(1)
.overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.halo, lineWidth: 2))
.padding(.horizontal, 10)
.padding(.bottom, 48)
}
.padding(.top, vehicleShown ? 56 : 0)
.overlay(alignment: .topLeading) {
ColoredRouteLine(routeAccents.color).frame(maxHeight: vehicleShown ? 56 : 0).padding(.leading, 42)
}
.background(Color.fill2)
.clipShape(RoundedRectangle(cornerRadius: 8))
.padding(1)
.overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.halo, lineWidth: 2))
.padding(.horizontal, 10)
.padding(.bottom, 48)
}
}

0 comments on commit 4fe4cf7

Please sign in to comment.