Skip to content

Commit 409f779

Browse files
binh-dam-ibigroupbinh-dam-ibigroup
authored
Merge pull request #712 from opentripplanner/route-viewer-viz-tweaks
Route viewer visual tweaks
2 parents 20ca3fa + 29ef26f commit 409f779

File tree

3 files changed

+73
-75
lines changed

3 files changed

+73
-75
lines changed

‎__tests__/components/viewers/__snapshots__/stop-viewer.js.snap‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1327,16 +1327,16 @@ exports[`components > viewers > stop viewer should render countdown times after
13271327
}
13281328
}
13291329
>
1330-
<styled.section
1330+
<styled.span
13311331
color="333333"
13321332
>
1333-
<section
1334-
className="sc-fmlJrY fflxRz"
1333+
<span
1334+
className="sc-fmlJrY bUSHCh"
13351335
color="333333"
13361336
>
13371337
20
1338-
</section>
1339-
</styled.section>
1338+
</span>
1339+
</styled.span>
13401340
</DefaultRouteRenderer>
13411341
</strong>
13421342
<FormattedMessage
@@ -4141,16 +4141,16 @@ exports[`components > viewers > stop viewer should render countdown times for st
41414141
}
41424142
}
41434143
>
4144-
<styled.section
4144+
<styled.span
41454145
color="333333"
41464146
>
4147-
<section
4148-
className="sc-fmlJrY fflxRz"
4147+
<span
4148+
className="sc-fmlJrY bUSHCh"
41494149
color="333333"
41504150
>
41514151
20
4152-
</section>
4153-
</styled.section>
4152+
</span>
4153+
</styled.span>
41544154
</DefaultRouteRenderer>
41554155
</strong>
41564156
<FormattedMessage
@@ -6475,16 +6475,16 @@ exports[`components > viewers > stop viewer should render times after midnight w
64756475
}
64766476
}
64776477
>
6478-
<styled.section
6478+
<styled.span
64796479
color="333333"
64806480
>
6481-
<section
6482-
className="sc-fmlJrY fflxRz"
6481+
<span
6482+
className="sc-fmlJrY bUSHCh"
64836483
color="333333"
64846484
>
64856485
20
6486-
</section>
6487-
</styled.section>
6486+
</span>
6487+
</styled.span>
64886488
</DefaultRouteRenderer>
64896489
</strong>
64906490
<FormattedMessage
@@ -10245,16 +10245,16 @@ exports[`components > viewers > stop viewer should render with OTP transit index
1024510245
}
1024610246
}
1024710247
>
10248-
<styled.section
10248+
<styled.span
1024910249
color="333333"
1025010250
>
10251-
<section
10252-
className="sc-fmlJrY fflxRz"
10251+
<span
10252+
className="sc-fmlJrY bUSHCh"
1025310253
color="333333"
1025410254
>
1025510255
20
10256-
</section>
10257-
</styled.section>
10256+
</span>
10257+
</styled.span>
1025810258
</DefaultRouteRenderer>
1025910259
</strong>
1026010260
<FormattedMessage
@@ -11469,16 +11469,16 @@ exports[`components > viewers > stop viewer should render with OTP transit index
1146911469
}
1147011470
}
1147111471
>
11472-
<styled.section
11472+
<styled.span
1147311473
color="333333"
1147411474
>
11475-
<section
11476-
className="sc-fmlJrY fflxRz"
11475+
<span
11476+
className="sc-fmlJrY bUSHCh"
1147711477
color="333333"
1147811478
>
1147911479
36
11480-
</section>
11481-
</styled.section>
11480+
</span>
11481+
</styled.span>
1148211482
</DefaultRouteRenderer>
1148311483
</strong>
1148411484
<FormattedMessage
@@ -12693,16 +12693,16 @@ exports[`components > viewers > stop viewer should render with OTP transit index
1269312693
}
1269412694
}
1269512695
>
12696-
<styled.section
12696+
<styled.span
1269712697
color="333333"
1269812698
>
12699-
<section
12700-
className="sc-fmlJrY fflxRz"
12699+
<span
12700+
className="sc-fmlJrY bUSHCh"
1270112701
color="333333"
1270212702
>
1270312703
94
12704-
</section>
12705-
</styled.section>
12704+
</span>
12705+
</styled.span>
1270612706
</DefaultRouteRenderer>
1270712707
</strong>
1270812708
<FormattedMessage
@@ -14025,16 +14025,16 @@ exports[`components > viewers > stop viewer should render with OTP transit index
1402514025
}
1402614026
}
1402714027
>
14028-
<styled.section
14028+
<styled.span
1402914029
color="333333"
1403014030
>
14031-
<section
14032-
className="sc-fmlJrY fflxRz"
14031+
<span
14032+
className="sc-fmlJrY bUSHCh"
1403314033
color="333333"
1403414034
>
1403514035
94
14036-
</section>
14037-
</styled.section>
14036+
</span>
14037+
</styled.span>
1403814038
</DefaultRouteRenderer>
1403914039
</strong>
1404014040
<FormattedMessage
@@ -18821,16 +18821,16 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
1882118821
}
1882218822
}
1882318823
>
18824-
<styled.section
18824+
<styled.span
1882518825
color="333333"
1882618826
>
18827-
<section
18828-
className="sc-fmlJrY fflxRz"
18827+
<span
18828+
className="sc-fmlJrY bUSHCh"
1882918829
color="333333"
1883018830
>
1883118831
20
18832-
</section>
18833-
</styled.section>
18832+
</span>
18833+
</styled.span>
1883418834
</DefaultRouteRenderer>
1883518835
</strong>
1883618836
<FormattedMessage

‎lib/components/narrative/metro/default-route-renderer.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,21 @@ import { Leg } from '@opentripplanner/types'
22
import React from 'react'
33
import styled from 'styled-components'
44

5-
// TODO: This should not be a section, but using div/span
6-
// doesn't allow us to style it from within the RouteBlock
7-
const Block = styled.section<{ color: string }>`
5+
const Block = styled.span<{ color: string }>`
86
background: #${(props) => props.color}1A;
9-
padding: 3px 7px;
10-
border-top: 5px solid #${(props) => props.color};
117
border-radius: 5px;
12-
text-align: center;
8+
border-top: 5px solid #${(props) => props.color};
139
display: inline-block;
14-
max-width: 12vw;
10+
margin-top: -2px;
11+
padding: 3px 7px;
12+
13+
/* Below is for route names that are too long: cut-off and show ellipsis. */
14+
max-width: 150px;
15+
overflow: hidden;
16+
text-overflow: ellipsis;
17+
/* (Change the vertical alignment when changing the overflow attribute.) */
18+
vertical-align: middle;
19+
white-space: nowrap;
1520
`
1621

1722
type RouteRendererProps = {

‎lib/components/viewers/RouteRow.js‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// TODO: Typescript, which doesn't make sense to do in this file until common types are established
22
/* eslint-disable react/prop-types */
3-
import { Button, Label } from 'react-bootstrap'
3+
import { Button } from 'react-bootstrap'
44
import AnimateHeight from 'react-animate-height'
55
import React, { PureComponent } from 'react'
66
import styled from 'styled-components'
@@ -24,41 +24,36 @@ export const RouteRowButton = styled(Button)`
2424
align-items: center;
2525
display: flex;
2626
padding: 6px;
27-
transition: all ease-in-out 0.1s;
2827
width: 100%;
2928
`
3029

31-
export const RouteRowElement = styled.span``
32-
3330
export const OperatorImg = styled.img`
3431
height: 25px;
3532
margin-right: 8px;
3633
`
3734

3835
export const ModeIconElement = styled.span`
39-
display: inline-block;
4036
height: 22px;
41-
vertical-align: bottom;
4237
`
4338

44-
const RouteNameElement = styled(Label)`
45-
background-color: transparent;
46-
color: inherit;
47-
flex: 0 1 auto;
39+
const RouteNameElement = styled.span`
40+
flex-shrink: 0;
4841
font-size: 16px;
4942
font-weight: 400;
5043
margin-left: 8px;
51-
margin-top: 2px;
52-
overflow: hidden;
53-
text-overflow: ellipsis;
5444
`
5545
const RouteLongNameElement = styled.span`
5646
font-size: 16px;
57-
margin-left: 5px;
5847
font-weight: 500;
48+
/*
49+
Top margin is same as border-top-width+margin-top of the default route renderer,
50+
so that the baseline of the route short name aligns with that
51+
of the route long name.
52+
*/
53+
margin: 2px 0 0 15px;
5954
`
6055

61-
const SimpleRouteRenderer = styled.h2`
56+
const SimpleRouteRenderer = styled.span`
6257
font-size: 18px;
6358
margin: 0;
6459
padding: 0;
@@ -154,19 +149,17 @@ export class RouteRow extends PureComponent {
154149
onMouseEnter={this._onFocusOrEnter}
155150
onTouchStart={this._onFocusOrEnter}
156151
>
157-
<RouteRowElement>
158-
{operator && operator.logo && (
159-
<OperatorImg
160-
alt={intl.formatMessage(
161-
{
162-
id: 'components.RouteRow.operatorLogoAltText'
163-
},
164-
{ operatorName: operator.name }
165-
)}
166-
src={operator.logo}
167-
/>
168-
)}
169-
</RouteRowElement>
152+
{operator && operator.logo && (
153+
<OperatorImg
154+
alt={intl.formatMessage(
155+
{
156+
id: 'components.RouteRow.operatorLogoAltText'
157+
},
158+
{ operatorName: operator.name }
159+
)}
160+
src={operator.logo}
161+
/>
162+
)}
170163
{route.mode && (
171164
<ModeIconElement>
172165
<ModeIcon

0 commit comments

Comments
 (0)