Skip to content

Commit 1bd274a

Browse files
minORCminORC
committed
DBC22-7069: Added missing route options on desktop
1 parent 39270b4 commit 1bd274a

9 files changed

Lines changed: 136 additions & 45 deletions

File tree

‎src/frontend/src/Components/routing/RouteSearch.jsx‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { memoize } from 'proxy-memoize'
77
import { useSearchParams } from "react-router-dom";
88

99
// Internal imports
10-
import { getRoutes, shortenToOneDecimal } from '../data/routes';
10+
import { compareRoutes, getRoutes, shortenToOneDecimal } from '../data/routes';
1111
import {
1212
clearSearchedRoutes,
1313
clearSelectedRoute,
@@ -189,6 +189,12 @@ const RouteSearch = forwardRef((props, ref) => {
189189
dispatch(updateSearchLocationTo([]));
190190
}
191191

192+
const selectRouteOption = (route) => {
193+
if (!compareRoutes(route, selectedRoute)) {
194+
dispatch(updateSelectedRoute(route));
195+
}
196+
}
197+
192198
// Rendering
193199
return (
194200
<div ref={ref} className='routing routing-outer-container'>
@@ -246,6 +252,31 @@ const RouteSearch = forwardRef((props, ref) => {
246252
) : (
247253
hasLocation &&
248254
<div className="route-search-actions-container">
255+
{searchedRoutes && searchedRoutes.length > 0 &&
256+
<div className="route-alt-options">
257+
{searchedRoutes.map((route, index) => {
258+
const isSelected = compareRoutes(route, selectedRoute);
259+
const routeLabel = route.criteria === 'fastest' ? 'A' : 'B';
260+
const roundedDistance = Math.round(route.distance);
261+
262+
return (
263+
<button
264+
key={index}
265+
type="button"
266+
className={`route-alt-option${isSelected ? ' selected' : ''}`}
267+
onClick={() => selectRouteOption(route)}
268+
aria-label={`Route ${routeLabel}, ${roundedDistance} kilometers`}
269+
aria-pressed={isSelected}>
270+
{searchedRoutes.length > 1 &&
271+
<span className="route-alt-option__label">{routeLabel}</span>
272+
}
273+
<span className="route-alt-option__distance">{roundedDistance} km</span>
274+
</button>
275+
);
276+
})}
277+
</div>
278+
}
279+
249280
<div className="route-search-actions">
250281
{validSearch &&
251282
<button type="button" className="route-search-link" onClick={() => swapHandler()}>

‎src/frontend/src/Components/routing/RouteSearch.scss‎

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,86 @@
3939
.route-search-actions {
4040
display: flex;
4141
gap: 1rem;
42-
padding-top: 0.75rem;
4342
justify-content: flex-end;
43+
margin-left: auto;
44+
flex-shrink: 0;
4445
}
4546

4647
.route-search-actions-container {
47-
max-height: 8rem;
48-
overflow: hidden;
49-
opacity: 1;
50-
visibility: visible;
51-
transform: translateY(0);
52-
transition: max-height 0.4s ease, opacity 0.35s ease, padding 0.4s ease, margin 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
48+
display: flex;
49+
align-items: center;
50+
justify-content: space-between;
51+
gap: 0.75rem;
52+
padding: 0.75rem 4px 6px;
53+
overflow: visible;
54+
}
55+
56+
.route-alt-options {
57+
display: flex;
58+
align-items: center;
59+
gap: 0.5rem;
60+
flex-wrap: wrap;
61+
min-width: 0;
62+
}
63+
64+
.route-alt-option {
65+
display: flex;
66+
align-items: center;
67+
padding: 4px 8px;
68+
border-radius: 4px;
69+
border: 1px solid $Grey40;
70+
background-color: $White;
71+
color: $Grey80;
72+
font-size: 0.75rem;
73+
cursor: pointer;
74+
75+
&__label {
76+
border-radius: 50%;
77+
width: 18px;
78+
height: 18px;
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
font-size: 0.6875rem;
83+
font-weight: 700;
84+
margin-right: 6px;
85+
background-color: $White;
86+
color: $Grey80;
87+
border: 1px solid $Grey80;
88+
flex-shrink: 0;
89+
}
90+
91+
&__distance {
92+
font-weight: 700;
93+
white-space: nowrap;
94+
}
95+
96+
&.selected {
97+
background-color: $Blue10;
98+
border-color: $Focus;
99+
color: $Focus;
100+
101+
.route-alt-option__label {
102+
color: $Focus;
103+
border-color: $Focus;
104+
background-color: $Blue10;
105+
}
106+
}
107+
108+
&:not(.selected):hover {
109+
background-color: $Distance-label-hover;
110+
border-color: $Distance-label-hover;
111+
color: $White;
112+
113+
.route-alt-option__label {
114+
border-color: $BC-Blue;
115+
}
116+
}
117+
118+
&:focus {
119+
outline: 2px solid $Focus;
120+
outline-offset: 2px;
121+
}
53122
}
54123

55124
.route-search-link, .route-clear-link {

‎src/frontend/src/Components/shared/header/Header.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ export default function Header({ isMaintenance }) {
246246
}, [listHeaderHidden]);
247247

248248
useEffect(() => {
249-
if (!isListPage) {
249+
if (!isListPage || !smallScreen) {
250250
setListHeaderHidden(false);
251251
return;
252252
}
@@ -288,7 +288,7 @@ export default function Header({ isMaintenance }) {
288288
main.removeEventListener('scroll', onScroll);
289289
setListHeaderHidden(false);
290290
};
291-
}, [isListPage, location.pathname]);
291+
}, [isListPage, location.pathname, smallScreen]);
292292

293293
useEffect(() => {
294294
const handleClickOutside = (event) => {

‎src/frontend/src/Components/shared/header/Header.scss‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -655,26 +655,26 @@
655655
}
656656

657657
body.list-header-hidden {
658-
.navbar .container .header-left,
659-
.navbar .container .header .searched-route-container .route-search-actions-container,
660-
.routing .routing-container .route-search-actions-container {
661-
max-height: 0;
662-
opacity: 0;
663-
visibility: hidden;
664-
padding-top: 0;
665-
padding-bottom: 0;
666-
margin-top: 0;
667-
margin-bottom: 0;
668-
overflow: hidden;
669-
pointer-events: none;
670-
transform: translateY(-100%);
671-
}
672-
673-
@media (prefers-reduced-motion: reduce) {
658+
@media (max-width: 575px) {
674659
.navbar .container .header-left,
675-
.navbar .container .header .searched-route-container .route-search-actions-container,
676-
.routing .routing-container .route-search-actions-container {
677-
transition: none;
660+
.navbar .container .header .searched-route-container .route-search-actions-container {
661+
max-height: 0;
662+
opacity: 0;
663+
visibility: hidden;
664+
padding-top: 0;
665+
padding-bottom: 0;
666+
margin-top: 0;
667+
margin-bottom: 0;
668+
overflow: hidden;
669+
pointer-events: none;
670+
transform: translateY(-100%);
671+
}
672+
673+
@media (prefers-reduced-motion: reduce) {
674+
.navbar .container .header-left,
675+
.navbar .container .header .searched-route-container .route-search-actions-container {
676+
transition: none;
677+
}
678678
}
679679
}
680680
}

‎src/frontend/src/Components/shared/header/UserNavigation.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ export default function UserNavigation({ isNavbarExpanded, onCollapseNavbar }) {
229229
const getSigninBtn = () => {
230230
return (
231231
<a
232-
className="btn btn-primary"
232+
className="btn btn-outline-primary"
233233
id="signin-btn"
234234
alt="Sign in button"
235235
onClick={() => {

‎src/frontend/src/Components/shared/header/UserNavigation.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -135,15 +135,6 @@
135135
}
136136
}
137137

138-
#user-menu {
139-
border: 1px solid #323130;
140-
background: $BC-Blue;
141-
color: $White;
142-
&:hover {
143-
background: $BtnHover-Primary;
144-
}
145-
}
146-
147138
// User menu
148139
#user-menu-header {
149140
display: flex;

‎src/frontend/src/pages/CamerasListPage.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@
9898
position: initial;
9999

100100
@media (min-width: 1096px) {
101-
width: 310px;
102-
min-width: 310px;
101+
width: 360px;
102+
min-width: 360px;
103103
position: sticky;
104104
}
105105
}

‎src/frontend/src/pages/ContainerSidePanel.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
@media (min-width: 992px) {
2222
position: sticky;
2323
top: 1rem;
24-
width: 310px;
25-
min-width: 310px;
24+
width: 360px;
25+
min-width: 360px;
2626
}
2727

2828
.routing {

‎src/frontend/src/pages/EventsListPage.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@
7171
position: initial;
7272

7373
@media (min-width: 1200px) {
74-
width: 310px;
75-
min-width: 310px;
74+
width: 360px;
75+
min-width: 360px;
7676
position: sticky;
7777
}
7878
}

0 commit comments

Comments
 (0)