Skip to content

Commit d99af68

Browse files
elvinasvamoore108
elvinasv
and
amoore108
authored
WS-2411: Fix Brand header logo position for long brands (#13842)
* fix: brand logo on smaller screens * refactor: remove unused props --------- Co-authored-by: Aaron Moore <[email protected]>
1 parent a8887fe commit d99af68

File tree

7 files changed

+155
-110
lines changed

7 files changed

+155
-110
lines changed

‎src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,14 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
304304
min-height: 2.75rem;
305305
width: 100%;
306306
padding: 0 0.5rem;
307+
display: -webkit-box;
308+
display: -webkit-flex;
309+
display: -ms-flexbox;
310+
display: flex;
311+
-webkit-align-items: stretch;
312+
-webkit-box-align: stretch;
313+
-ms-flex-align: stretch;
314+
align-items: stretch;
307315
position: relative;
308316
z-index: 1;
309317
}
@@ -339,8 +347,9 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
339347
}
340348
341349
.emotion-20 {
342-
min-height: inherit;
343-
height: 100%;
350+
-webkit-flex: 1;
351+
-ms-flex: 1;
352+
flex: 1;
344353
position: relative;
345354
display: -webkit-box;
346355
display: -webkit-flex;
@@ -359,12 +368,8 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
359368
flex-wrap: wrap;
360369
max-width: 63rem;
361370
margin: 0 auto;
362-
}
363-
364-
@media (max-width: 14.9375rem) {
365-
.emotion-20 {
366-
display: block;
367-
}
371+
-webkit-column-gap: 0.25rem;
372+
column-gap: 0.25rem;
368373
}
369374
370375
.emotion-22 {
@@ -404,6 +409,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
404409
color: #FFFFFF;
405410
fill: currentColor;
406411
height: 1.25rem;
412+
max-width: 100%;
407413
}
408414
409415
@media (min-width: 25rem) {
@@ -892,6 +898,14 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
892898
min-height: 2.75rem;
893899
width: 100%;
894900
padding: 0 0.5rem;
901+
display: -webkit-box;
902+
display: -webkit-flex;
903+
display: -ms-flexbox;
904+
display: flex;
905+
-webkit-align-items: stretch;
906+
-webkit-box-align: stretch;
907+
-ms-flex-align: stretch;
908+
align-items: stretch;
895909
position: relative;
896910
z-index: 1;
897911
}

‎src/app/legacy/containers/Brand/__snapshots__/index.test.jsx.snap‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@ exports[`BrandContainer should render correctly 1`] = `
66
min-height: 2.75rem;
77
width: 100%;
88
padding: 0 0.5rem;
9+
display: -webkit-box;
10+
display: -webkit-flex;
11+
display: -ms-flexbox;
12+
display: flex;
13+
-webkit-align-items: stretch;
14+
-webkit-box-align: stretch;
15+
-ms-flex-align: stretch;
16+
align-items: stretch;
917
position: relative;
1018
z-index: 1;
1119
}
@@ -41,8 +49,9 @@ exports[`BrandContainer should render correctly 1`] = `
4149
}
4250
4351
.emotion-3 {
44-
min-height: inherit;
45-
height: 100%;
52+
-webkit-flex: 1;
53+
-ms-flex: 1;
54+
flex: 1;
4655
position: relative;
4756
display: -webkit-box;
4857
display: -webkit-flex;
@@ -61,12 +70,8 @@ exports[`BrandContainer should render correctly 1`] = `
6170
flex-wrap: wrap;
6271
max-width: 63rem;
6372
margin: 0 auto;
64-
}
65-
66-
@media (max-width: 14.9375rem) {
67-
.emotion-3 {
68-
display: block;
69-
}
73+
-webkit-column-gap: 0.25rem;
74+
column-gap: 0.25rem;
7075
}
7176
7277
.emotion-5 {
@@ -106,6 +111,7 @@ exports[`BrandContainer should render correctly 1`] = `
106111
color: #FFFFFF;
107112
fill: currentColor;
108113
height: 1.25rem;
114+
max-width: 100%;
109115
}
110116
111117
@media (min-width: 25rem) {

‎src/app/legacy/containers/Brand/index.jsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,6 @@ const BrandContainer = ({
4141
const svgRatio = brandSVG && brandSVG.ratio;
4242
const minWidth = svgRatio * svgMinHeight;
4343
const maxWidth = svgRatio * svgMaxHeight;
44-
const longBrands = [
45-
'afaanoromoo',
46-
'azeri',
47-
'kyrgyz',
48-
'russian',
49-
'serbian',
50-
'ws',
51-
];
5244

5345
const brandPath = getBrandPath(service, variant);
5446

@@ -63,7 +55,6 @@ const BrandContainer = ({
6355
url={brandPath}
6456
skipLink={skipLink}
6557
scriptLink={scriptLink}
66-
isLongBrand={longBrands.includes(service)}
6758
ref={brandRef}
6859
{...props}
6960
>

‎src/app/legacy/containers/Footer/__snapshots__/index.test.jsx.snap‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@ exports[`FooterContainer snapshots should render correctly 1`] = `
3535
min-height: 2.75rem;
3636
width: 100%;
3737
padding: 0 0.5rem;
38+
display: -webkit-box;
39+
display: -webkit-flex;
40+
display: -ms-flexbox;
41+
display: flex;
42+
-webkit-align-items: stretch;
43+
-webkit-box-align: stretch;
44+
-ms-flex-align: stretch;
45+
align-items: stretch;
3846
position: relative;
3947
z-index: 1;
4048
}
@@ -70,8 +78,9 @@ exports[`FooterContainer snapshots should render correctly 1`] = `
7078
}
7179
7280
.emotion-5 {
73-
min-height: inherit;
74-
height: 100%;
81+
-webkit-flex: 1;
82+
-ms-flex: 1;
83+
flex: 1;
7584
position: relative;
7685
display: -webkit-box;
7786
display: -webkit-flex;
@@ -90,12 +99,8 @@ exports[`FooterContainer snapshots should render correctly 1`] = `
9099
flex-wrap: wrap;
91100
max-width: 63rem;
92101
margin: 0 auto;
93-
}
94-
95-
@media (max-width: 14.9375rem) {
96-
.emotion-5 {
97-
display: block;
98-
}
102+
-webkit-column-gap: 0.25rem;
103+
column-gap: 0.25rem;
99104
}
100105
101106
.emotion-7 {
@@ -135,6 +140,7 @@ exports[`FooterContainer snapshots should render correctly 1`] = `
135140
color: #FFFFFF;
136141
fill: currentColor;
137142
height: 1.25rem;
143+
max-width: 100%;
138144
}
139145
140146
@media (min-width: 25rem) {

‎src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap‎

Lines changed: 56 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,14 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
289289
min-height: 2.75rem;
290290
width: 100%;
291291
padding: 0 0.5rem;
292+
display: -webkit-box;
293+
display: -webkit-flex;
294+
display: -ms-flexbox;
295+
display: flex;
296+
-webkit-align-items: stretch;
297+
-webkit-box-align: stretch;
298+
-ms-flex-align: stretch;
299+
align-items: stretch;
292300
position: relative;
293301
z-index: 1;
294302
}
@@ -324,8 +332,9 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
324332
}
325333
326334
.emotion-19 {
327-
min-height: inherit;
328-
height: 100%;
335+
-webkit-flex: 1;
336+
-ms-flex: 1;
337+
flex: 1;
329338
position: relative;
330339
display: -webkit-box;
331340
display: -webkit-flex;
@@ -344,12 +353,8 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
344353
flex-wrap: wrap;
345354
max-width: 63rem;
346355
margin: 0 auto;
347-
}
348-
349-
@media (max-width: 14.9375rem) {
350-
.emotion-19 {
351-
display: block;
352-
}
356+
-webkit-column-gap: 0.25rem;
357+
column-gap: 0.25rem;
353358
}
354359
355360
.emotion-21 {
@@ -389,6 +394,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
389394
color: #FFFFFF;
390395
fill: currentColor;
391396
height: 1.25rem;
397+
max-width: 100%;
392398
}
393399
394400
@media (min-width: 25rem) {
@@ -1618,6 +1624,14 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
16181624
min-height: 2.75rem;
16191625
width: 100%;
16201626
padding: 0 0.5rem;
1627+
display: -webkit-box;
1628+
display: -webkit-flex;
1629+
display: -ms-flexbox;
1630+
display: flex;
1631+
-webkit-align-items: stretch;
1632+
-webkit-box-align: stretch;
1633+
-ms-flex-align: stretch;
1634+
align-items: stretch;
16211635
position: relative;
16221636
z-index: 1;
16231637
}
@@ -1653,8 +1667,9 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
16531667
}
16541668
16551669
.emotion-19 {
1656-
min-height: inherit;
1657-
height: 100%;
1670+
-webkit-flex: 1;
1671+
-ms-flex: 1;
1672+
flex: 1;
16581673
position: relative;
16591674
display: -webkit-box;
16601675
display: -webkit-flex;
@@ -1673,12 +1688,8 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
16731688
flex-wrap: wrap;
16741689
max-width: 63rem;
16751690
margin: 0 auto;
1676-
}
1677-
1678-
@media (max-width: 14.9375rem) {
1679-
.emotion-19 {
1680-
display: block;
1681-
}
1691+
-webkit-column-gap: 0.25rem;
1692+
column-gap: 0.25rem;
16821693
}
16831694
16841695
.emotion-21 {
@@ -1718,6 +1729,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
17181729
color: #FFFFFF;
17191730
fill: currentColor;
17201731
height: 1.25rem;
1732+
max-width: 100%;
17211733
}
17221734
17231735
@media (min-width: 25rem) {
@@ -2947,6 +2959,14 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
29472959
min-height: 2.75rem;
29482960
width: 100%;
29492961
padding: 0 0.5rem;
2962+
display: -webkit-box;
2963+
display: -webkit-flex;
2964+
display: -ms-flexbox;
2965+
display: flex;
2966+
-webkit-align-items: stretch;
2967+
-webkit-box-align: stretch;
2968+
-ms-flex-align: stretch;
2969+
align-items: stretch;
29502970
position: relative;
29512971
z-index: 1;
29522972
}
@@ -2982,8 +3002,9 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
29823002
}
29833003
29843004
.emotion-19 {
2985-
min-height: inherit;
2986-
height: 100%;
3005+
-webkit-flex: 1;
3006+
-ms-flex: 1;
3007+
flex: 1;
29873008
position: relative;
29883009
display: -webkit-box;
29893010
display: -webkit-flex;
@@ -3002,12 +3023,8 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
30023023
flex-wrap: wrap;
30033024
max-width: 63rem;
30043025
margin: 0 auto;
3005-
}
3006-
3007-
@media (max-width: 14.9375rem) {
3008-
.emotion-19 {
3009-
display: block;
3010-
}
3026+
-webkit-column-gap: 0.25rem;
3027+
column-gap: 0.25rem;
30113028
}
30123029
30133030
.emotion-21 {
@@ -3047,6 +3064,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
30473064
color: #FFFFFF;
30483065
fill: currentColor;
30493066
height: 1.25rem;
3067+
max-width: 100%;
30503068
}
30513069
30523070
@media (min-width: 25rem) {
@@ -4276,6 +4294,14 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
42764294
min-height: 2.75rem;
42774295
width: 100%;
42784296
padding: 0 0.5rem;
4297+
display: -webkit-box;
4298+
display: -webkit-flex;
4299+
display: -ms-flexbox;
4300+
display: flex;
4301+
-webkit-align-items: stretch;
4302+
-webkit-box-align: stretch;
4303+
-ms-flex-align: stretch;
4304+
align-items: stretch;
42794305
position: relative;
42804306
z-index: 1;
42814307
}
@@ -4311,8 +4337,9 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
43114337
}
43124338
43134339
.emotion-19 {
4314-
min-height: inherit;
4315-
height: 100%;
4340+
-webkit-flex: 1;
4341+
-ms-flex: 1;
4342+
flex: 1;
43164343
position: relative;
43174344
display: -webkit-box;
43184345
display: -webkit-flex;
@@ -4331,12 +4358,8 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
43314358
flex-wrap: wrap;
43324359
max-width: 63rem;
43334360
margin: 0 auto;
4334-
}
4335-
4336-
@media (max-width: 14.9375rem) {
4337-
.emotion-19 {
4338-
display: block;
4339-
}
4361+
-webkit-column-gap: 0.25rem;
4362+
column-gap: 0.25rem;
43404363
}
43414364
43424365
.emotion-21 {
@@ -4376,6 +4399,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
43764399
color: #FFFFFF;
43774400
fill: currentColor;
43784401
height: 1.25rem;
4402+
max-width: 100%;
43794403
}
43804404
43814405
@media (min-width: 25rem) {

0 commit comments

Comments
 (0)