Skip to content

Commit 31958f6

Browse files
luizrrodriguesluizrrodrigues
authored
Merge pull request #5152 from topcoder-platform/tco-header-dropdown
Tco header dropdown
2 parents 12f2125 + 44f42d4 commit 31958f6

File tree

7 files changed

+209
-19
lines changed

7 files changed

+209
-19
lines changed

‎src/assets/themes/tco/TCO20.svg

+36
Loading

‎src/shared/components/buttons/themed/tc.scss

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
text-decoration: none !important;
88
text-transform: uppercase !important;
99
margin: 0 !important;
10+
white-space: nowrap !important;
1011
}
1112

1213
@mixin primary-green {
@@ -107,6 +108,7 @@
107108
text-decoration: none !important;
108109
text-transform: uppercase !important;
109110
margin: 0 !important;
111+
white-space: nowrap !important;
110112
}
111113

112114
@mixin secondary-gray {
@@ -133,6 +135,7 @@
133135
font-weight: 700 !important;
134136
text-transform: uppercase !important;
135137
margin: 0 !important;
138+
white-space: nowrap !important;
136139
}
137140

138141
@mixin warn-red {

‎src/shared/components/tc-communities/Header/index.jsx

+10-8
Original file line numberDiff line numberDiff line change
@@ -244,14 +244,16 @@ function Header(props) {
244244
<div className={theme.logos}>
245245
{renderedLogos}
246246
</div>
247-
248-
<div className={theme.challengeDropdown}>
249-
<Dropdown
250-
options={communitySelector}
251-
value="-1"
252-
/>
253-
</div>
254-
247+
{
248+
!_.startsWith(communityId, 'tco') ? (
249+
<div className={theme.challengeDropdown}>
250+
<Dropdown
251+
options={communitySelector}
252+
value="-1"
253+
/>
254+
</div>
255+
) : null
256+
}
255257
</div>
256258
<div className={theme.userWrapMobile}>
257259
{profile && (

‎src/shared/containers/tc-communities/tco20/Header.jsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/** TCO20 special header */
2+
3+
import PT from 'prop-types';
4+
import React from 'react';
5+
import ContentfulMenu from 'components/Contentful/Menu';
6+
import { Link, config } from 'topcoder-react-utils';
7+
import { connect } from 'react-redux';
8+
import { Avatar } from 'topcoder-react-ui-kit';
9+
import MediaQuery from 'react-responsive';
10+
import { getCurrentUrl } from 'utils/url';
11+
import TCO20Logo from 'assets/themes/tco/TCO20.svg';
12+
import defaultStyle from './header.scss';
13+
14+
function TCO20Header(props) {
15+
const { base, meta, auth } = props;
16+
const profileHTML = () => (
17+
<div className={defaultStyle.profile}>
18+
{
19+
auth && auth.profile ? (
20+
<React.Fragment>
21+
<Link to={`${base}/members/${auth.profile.handle}`} className={defaultStyle.userMenuHandle}>
22+
{auth.profile.handle}
23+
</Link>
24+
<Avatar url={auth.profile.photoURL} />
25+
</React.Fragment>
26+
) : (
27+
<React.Fragment>
28+
<a href={`${config.URL.AUTH}/member?utm_source=TCO20site&retUrl=${getCurrentUrl()}`} className={defaultStyle.loginLink}>LOGIN</a>
29+
<a href={`${config.URL.AUTH}/member/registration?utm_source=TCO20site&retUrl=${getCurrentUrl()}`} className={defaultStyle.signUpLink}>SIGN UP</a>
30+
</React.Fragment>
31+
)
32+
}
33+
</div>
34+
);
35+
return (
36+
<div className={defaultStyle.topHeader}>
37+
<div className={defaultStyle.logoWrapp}>
38+
<Link to={base} className={defaultStyle.headerLogo}>
39+
<TCO20Logo />
40+
</Link>
41+
<MediaQuery maxWidth={768}>
42+
{
43+
profileHTML()
44+
}
45+
</MediaQuery>
46+
</div>
47+
{
48+
meta.menuItems ? (
49+
<ContentfulMenu
50+
id={meta.menuItems[0].navigationMenu}
51+
spaceName={meta.menuItems[0].spaceName}
52+
environment={meta.menuItems[0].environment}
53+
baseUrl={base}
54+
/>
55+
) : null
56+
}
57+
<MediaQuery minWidth={769}>
58+
{
59+
profileHTML()
60+
}
61+
</MediaQuery>
62+
</div>
63+
);
64+
}
65+
66+
TCO20Header.defaultProps = {
67+
base: '',
68+
auth: null,
69+
};
70+
71+
TCO20Header.propTypes = {
72+
base: PT.string,
73+
meta: PT.shape().isRequired,
74+
auth: PT.shape(),
75+
};
76+
77+
function mapStateToProps(state) {
78+
return {
79+
auth: state.auth,
80+
};
81+
}
82+
83+
export default connect(mapStateToProps)(TCO20Header);

‎src/shared/containers/tc-communities/tco20/header.scss

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@import '~styles/mixins';
2+
@import 'components/buttons/themed/tc.scss';
3+
4+
.topHeader {
5+
display: flex;
6+
align-items: center;
7+
background-color: $tc-black;
8+
9+
@include xs-to-sm {
10+
flex-direction: column;
11+
padding-top: 15px;
12+
}
13+
14+
.logoWrapp {
15+
display: flex;
16+
justify-content: space-between;
17+
18+
@include xs-to-sm {
19+
width: 100%;
20+
}
21+
22+
.headerLogo {
23+
svg {
24+
max-height: 28px;
25+
26+
@include xs-to-sm {
27+
margin-left: -35px;
28+
}
29+
}
30+
}
31+
}
32+
33+
.profile {
34+
margin-right: 26px;
35+
display: flex;
36+
37+
.userMenuHandle {
38+
color: #fff;
39+
font-size: 14px;
40+
font-weight: 700;
41+
line-height: 30px;
42+
white-space: nowrap;
43+
font-family: Roboto, sans-serif;
44+
margin-right: 12px;
45+
}
46+
47+
.loginLink {
48+
text-decoration: none;
49+
color: #888894;
50+
font-family: Roboto, sans-serif;
51+
font-size: 13px;
52+
font-weight: bold;
53+
line-height: 30px;
54+
margin-right: 30px;
55+
}
56+
57+
.signUpLink {
58+
@include primary-borderless;
59+
@include sm;
60+
61+
&:hover {
62+
@include primary-borderless;
63+
}
64+
}
65+
}
66+
}

‎src/shared/routes/Communities/TCO20/Routes.jsx

+2-11
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,15 @@ import PT from 'prop-types';
77
import React from 'react';
88
import { Route, Switch } from 'react-router-dom';
99
import ContentfulRoute from 'components/Contentful/Route';
10-
import ContentfulMenu from 'components/Contentful/Menu';
1110
import Viewport from 'components/Contentful/Viewport';
1211
import Profile from 'routes/Profile';
1312
import ProfileStats from 'routes/ProfileStats';
13+
import TCO20Header from 'containers/tc-communities/tco20/Header';
1414

1515
export default function TCO20({ base, meta }) {
1616
return (
1717
<div>
18-
{
19-
meta.menuItems ? (
20-
<ContentfulMenu
21-
id={meta.menuItems[0].navigationMenu}
22-
spaceName={meta.menuItems[0].spaceName}
23-
environment={meta.menuItems[0].environment}
24-
baseUrl={base}
25-
/>
26-
) : null
27-
}
18+
<TCO20Header base={base} meta={meta} />
2819
<Switch>
2920
<Route
3021
render={props => <Profile {...props} meta={meta} />}

‎src/shared/utils/url.js

+9
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ import _ from 'lodash';
88
import qs from 'qs';
99
import { isomorphy } from 'topcoder-react-utils';
1010
import { BUCKETS } from 'utils/challenge-listing/buckets';
11+
12+
/**
13+
* Get current URL
14+
*/
15+
export function getCurrentUrl() {
16+
if (isomorphy.isServerSide()) return null;
17+
return window.location.href;
18+
}
19+
1120
/**
1221
* Get current URL hash parameters as object
1322
*/

0 commit comments

Comments
 (0)