Skip to content

Commit 5cc6759

Browse files
nickspbernardodiasckararade
authored
"Version-5.2.0" release (#520)
* Make TwoColumnsLayout sidebar collapsible (#503) * Make TwoColumnsLayout sidebar collapsible * Updates for code review * Updates for code review * Design adjustment * Update mobile breakpoint * Build app * Remove resize event listener * Remove unused logic * Build app Co-authored-by: Nick Plekhanov <[email protected]> # Conflicts: # lib/all.js # lib/all.js.map # lib/editor.js # lib/editor.js.map # lib/registration.js # lib/registration.js.map * Adjust profile UI components for mobile version (#504) * Adjust profile UI components for mobile version * Update UI components responsiveness * Updates for code review * Adjustments for mobile version # Conflicts: # lib/all.js # lib/all.js.map # lib/registration.js.map * Add custom error message for legacy devices (#516) * add 'update browser' parsed message for RequestAPI and URLSearchParams error in older browsers * fix lint error * build after fix lint error * update the way the custom message is applied for legacy device errors * Build app * add a new error type identified for IOS safari Co-authored-by: Nick Plekhanov <[email protected]> # Conflicts: # lib/all.js # lib/all.js.map * Update deps # Conflicts: # lib/all.js.map # lib/registration.js.map # package-lock.json * Build app Co-authored-by: Bernardo Dias <[email protected]> Co-authored-by: Carlos Almeida <[email protected]>
1 parent e38b4a6 commit 5cc6759

19 files changed

+348
-74
lines changed

‎lib/all.js

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/all.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/editor.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/editor.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/fonts.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/registration.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/registration.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ui/ActivityLogsDisplay.js

+2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const cx = {
2323
item: cmz(`
2424
display: flex
2525
margin-bottom: 0.6rem
26+
flex-wrap: wrap
2627
`),
2728

2829
date: cmz(`
@@ -37,6 +38,7 @@ const cx = {
3738
flex: 1
3839
word-break: break-word
3940
margin-right: 2rem
41+
min-width: 300px
4042
`),
4143

4244
user: cmz(`

‎src/components/ui/ApplicantProfileContentDisplay.js

+30-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React, { PureComponent } from 'react'
44

5-
import theme from '../../styles/theme'
5+
import theme, { breakpoints } from '../../styles/theme'
66
import typo from '../../styles/typo'
77

88
import type { Element } from 'react'
@@ -13,14 +13,29 @@ const cx = {
1313
root: cmz(
1414
typo.regularText,
1515
`
16-
padding: 50px 60px 20px 60px
17-
display: flex
18-
flex-wrap: wrap
16+
& {
17+
padding: 10px
18+
display: flex
19+
flex-wrap: wrap
20+
}
21+
22+
@media screen and (min-width: ${breakpoints.sm}) {
23+
& {
24+
padding: 20px
25+
}
26+
}
27+
28+
@media screen and (min-width: ${breakpoints.md}) {
29+
& {
30+
padding: 50px 60px 20px 60px
31+
}
32+
}
1933
`
2034
),
2135

2236
rootForm: cmz(`
2337
width: 100%
38+
margin: 0
2439
`),
2540

2641
shortDetailsContainer: cmz(`
@@ -89,18 +104,26 @@ const cx = {
89104
& {
90105
display: flex
91106
margin-bottom: 20px
107+
flex-wrap: wrap
92108
}
93109
94110
&:last-of-type {
95111
margin-bottom: 0
96112
}
97113
`),
98114

99-
labelInput: cmz(`
115+
portfolioLabel: cmz(`
100116
text-transform: capitalize
101117
margin-right: 15px
102118
color: ${theme.typoLabel}
103119
font-size: 1.0625rem
120+
min-width: 200px
121+
margin-bottom: 0.4rem
122+
`),
123+
124+
portfolioValue: cmz(`
125+
flex: 1
126+
min-width: 300px
104127
`),
105128

106129
sectionHeaderPortfolio: cmz(`
@@ -150,8 +173,8 @@ class ApplicantProfileContentDisplay extends PureComponent<Props, void> {
150173
</div>
151174
{Object.keys(portfolio).map(item => (
152175
<div key={`profile-top-portfolio-${item}`} className={cx.rowInput}>
153-
<span className={cx.labelInput}>{portfolio[item].label}:</span>
154-
{portfolio[item].value}
176+
<span className={cx.portfolioLabel}>{portfolio[item].label}:</span>
177+
<span className={cx.portfolioValue}>{portfolio[item].value}</span>
155178
</div>
156179
))}
157180
</div>

‎src/components/ui/ApplicantTopProfileDisplay.js

+43-29
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@ import React, { PureComponent } from 'react'
55

66
import StatusMarker from './StatusMarker'
77

8-
import theme from '../../styles/theme'
8+
import theme, { breakpoints } from '../../styles/theme'
99
import typo from '../../styles/typo'
1010

1111
import type { ApplicantStatusType } from './StatusMarker'
1212

1313
const cmz = require('cmz')
1414

15-
const MEDIA_QUERY_BREAKPOINT = 1400
16-
1715
const cx = {
1816
container: cmz(
1917
typo.regularText,
@@ -27,7 +25,7 @@ const cx = {
2725
border-bottom: 1px solid ${theme.lineSilver2}
2826
}
2927
30-
@media screen and (max-width: ${MEDIA_QUERY_BREAKPOINT}px) {
28+
@media screen and (max-width: ${breakpoints.xl}) {
3129
& {
3230
grid-template-columns: 100%
3331
grid-template-areas: "name" "video" "fields"
@@ -43,31 +41,25 @@ const cx = {
4341

4442
video: cmz(`
4543
& {
46-
grid-area: video
47-
margin-right: 55px
48-
align-items: left
44+
margin: 0 auto
45+
padding: 0 10px 20px
46+
width: 100%
47+
align-items: flex-start
48+
display: flex
49+
flex-direction: column
50+
box-sizing: border-box
4951
}
5052
51-
@media screen and (max-width: ${MEDIA_QUERY_BREAKPOINT}px) {
53+
@media screen and (min-width: ${breakpoints.md}) {
5254
& {
53-
margin: 0 auto
54-
padding-bottom: 20px
55-
width: 100%
5655
align-items: center
57-
display: flex
58-
flex-direction: column
56+
padding: 0 0 20px
5957
}
6058
}
61-
`),
6259
63-
addToList: cmz(`
64-
& {
65-
display: flex
66-
}
67-
68-
@media screen and (max-width: ${MEDIA_QUERY_BREAKPOINT}px) {
60+
@media screen and (min-width: ${breakpoints.xl}) {
6961
& {
70-
justify-content: center
62+
grid-area: video
7163
}
7264
}
7365
`),
@@ -89,7 +81,8 @@ const cx = {
8981
}
9082
9183
& > div:first-child {
92-
margin-left: 20px
84+
margin: 0 10px
85+
width: 100%
9386
}
9487
`),
9588

@@ -98,19 +91,40 @@ const cx = {
9891
`),
9992

10093
activityHeader: cmz(`
101-
margin-left: 20px
102-
margin-bottom: 12px
94+
& {
95+
margin: 0 10px 12px
96+
}
97+
98+
@media screen and (min-width: ${breakpoints.md}) {
99+
& {
100+
margin: 0 20px 12px
101+
}
102+
}
103103
`),
104104

105105
row: cmz(`
106-
display: flex
107-
margin-left: 20px
108-
padding-bottom: 1rem
106+
& {
107+
display: flex
108+
flex-wrap: wrap
109+
margin-left: 10px
110+
padding-bottom: 1rem
111+
}
112+
113+
@media screen and (min-width: ${breakpoints.md}) {
114+
& {
115+
margin-left: 20px
116+
}
117+
}
109118
`),
110119

111120
label: cmz(`
112121
color: ${theme.typoLabel}
113122
min-width: 200px
123+
margin-bottom: 0.4rem
124+
`),
125+
126+
value: cmz(`
127+
min-width: 300px
114128
`)
115129
}
116130

@@ -154,7 +168,7 @@ class ApplicantTopProfileDisplay extends PureComponent<Props, void> {
154168
<section className={cx.video} data-testid='xpui-applicantTopProfile-videoPreview'>
155169
{videoPreview}
156170

157-
<div className={cx.addToList} data-testid='xpui-applicantTopProfile-addToList'>
171+
<div data-testid='xpui-applicantTopProfile-addToList'>
158172
{addToList}
159173
</div>
160174
</section>
@@ -182,7 +196,7 @@ class ApplicantTopProfileDisplay extends PureComponent<Props, void> {
182196
title={sections[section].title}
183197
>
184198
<div className={cx.label}>{sections[section].label}:</div>
185-
{sections[section].value}
199+
<div className={cx.value}>{sections[section].value}</div>
186200
</div>
187201
))}
188202
</section>

‎src/components/ui/ApplicantTopProfileDisplay.stories.js

+27-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,37 @@ import { storiesOf } from '@storybook/react'
33

44
import ApplicantTopProfileDisplay from './ApplicantTopProfileDisplay'
55

6+
const SampleElement = ({ children }) => (
7+
<div style={{ padding: '10px', border: '1px dotted red' }}>
8+
{children}
9+
</div>
10+
)
11+
612
storiesOf('UI Components|ApplicantTopProfileDisplay', module)
713
.add('basic usage', () => (
8-
<ApplicantTopProfileDisplay />
14+
<ApplicantTopProfileDisplay
15+
videoPreview={<SampleElement>videoPreview</SampleElement>}
16+
addToList={<SampleElement>addToList</SampleElement>}
17+
fullName={<SampleElement>fullName</SampleElement>}
18+
applicantStatusSelector={<SampleElement>applicantStatusSelector</SampleElement>}
19+
baseImported={<SampleElement>baseImported</SampleElement>}
20+
activityHeaderBar={<SampleElement>activityHeaderBar</SampleElement>}
21+
sections={{
22+
something: {
23+
title: 'something title',
24+
label: 'something label',
25+
value: <SampleElement>something</SampleElement>
26+
},
27+
somethingelse: {
28+
title: 'something title',
29+
label: 'something label',
30+
value: <SampleElement>somethingelse</SampleElement>
31+
}
32+
}}
33+
/>
934
))
1035

1136
storiesOf('UI Components|ApplicantTopProfileDisplay/Debug', module)
12-
.add('missing props (does component explode?)', () => (
37+
.add('missing props', () => (
1338
<ApplicantTopProfileDisplay />
1439
))

‎src/components/ui/ErrorBox.js

+6
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React, { PureComponent } from 'react'
44

55
import elem from '../../utils/elem'
6+
import { getOlderBrowserErrorKey } from '../../utils/helpers'
67

78
import theme, { breakpoints } from '../../styles/theme'
89
import typo from '../../styles/typo'
@@ -63,6 +64,11 @@ class ErrorBox extends PureComponent<Props> {
6364
const keys = Object.keys(errors)
6465
if (!keys.length) { return <div /> }
6566

67+
const olderBrowserErrorKey = getOlderBrowserErrorKey(errors)
68+
if (olderBrowserErrorKey) {
69+
this.props.errors[olderBrowserErrorKey] = 'Please update your browser to the latest version.'
70+
}
71+
6672
return Root(
6773
List(
6874
keys.map(this.renderErrorItem)

‎src/components/ui/ErrorBox.stories.js

+37
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,40 @@ storiesOf('Core Components|ErrorBox/Debug', module)
2828
.add('missing props', () => (
2929
<ErrorBox />
3030
))
31+
32+
storiesOf('Core Components|ErrorBox/Debug/Custom error message for legacy devices', module)
33+
.add('error \'TypeError: invalid \'instanceof\' operand y.Request\'', () => (
34+
<ErrorBox
35+
errors={{
36+
name: `TypeError: invalid 'instanceof' operand y.Request`
37+
}}
38+
/>
39+
))
40+
.add('error \'TypeError: Expecting a function in instanceof check, but got undefined\'', () => (
41+
<ErrorBox
42+
errors={{
43+
anyKey: `TypeError: Expecting a function in instanceof check, but got undefined`
44+
}}
45+
/>
46+
))
47+
.add('error \'TypeError: y.Request is not a function. (evaluating \'t instanceof y.Request\')\'', () => (
48+
<ErrorBox
49+
errors={{
50+
1234: `TypeError: y.Request is not a function. (evaluating 't instanceof y.Request')`
51+
}}
52+
/>
53+
))
54+
.add('error \'TypeError: undefined is not a valid argument for \'instanceof\' (evaluating \'t instanceof y.Request\')\'', () => (
55+
<ErrorBox
56+
errors={{
57+
asdf1234: `TypeError: undefined is not a valid argument for 'instanceof' (evaluating 't instanceof y.Request')`
58+
}}
59+
/>
60+
))
61+
.add('error \'ReferenceError: URLSearchParams is not defined\'', () => (
62+
<ErrorBox
63+
errors={{
64+
asdf1234: `ReferenceError: URLSearchParams is not defined`
65+
}}
66+
/>
67+
))

‎src/components/ui/MetaGroup.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ const cx = {
1010
layout: cmz(`
1111
position: relative
1212
display: flex
13+
flex-wrap: wrap
1314
`),
1415

1516
mainBodyColumn: cmz(`
1617
box-sizing: border-box
1718
flex: 1
18-
min-width: 60%
1919
`),
2020

2121
secondaryColumns: cmz(`

‎src/components/ui/ProfileHeaderLinks.js

-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ const cx = {
1616
flex-wrap: wrap
1717
width: 100%
1818
margin: 0
19-
z-index: 3
2019
`),
2120

2221
normal: cmz(`

0 commit comments

Comments
 (0)