From 6919d84cc9830da8719df4ef7810feb8a7a9e676 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 21 Jul 2020 09:56:48 +0300 Subject: [PATCH 01/15] Implements #4542 --- src/assets/images/minimal-down.svg | 23 +++ .../Contentful/ContentBlock/themes/TCO20.scss | 135 +---------------- .../Contentful/Dropdown/DropdownItem.jsx | 68 +++++++++ .../Contentful/Dropdown/default.scss | 29 ++-- .../components/Contentful/Dropdown/index.jsx | 12 +- .../components/Contentful/Dropdown/item.scss | 59 ++++++++ .../components/Contentful/_default.scss | 136 ++++++++++++++++++ 7 files changed, 307 insertions(+), 155 deletions(-) create mode 100644 src/assets/images/minimal-down.svg create mode 100644 src/shared/components/Contentful/Dropdown/DropdownItem.jsx create mode 100644 src/shared/components/Contentful/Dropdown/item.scss diff --git a/src/assets/images/minimal-down.svg b/src/assets/images/minimal-down.svg new file mode 100644 index 0000000000..8a053c8f1e --- /dev/null +++ b/src/assets/images/minimal-down.svg @@ -0,0 +1,23 @@ + + + + C1A13778-3A8D-495F-8743-807086A83EFB + Created with sketchtool. + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/components/Contentful/ContentBlock/themes/TCO20.scss b/src/shared/components/Contentful/ContentBlock/themes/TCO20.scss index e6b4a5a3e7..c54525c0c5 100644 --- a/src/shared/components/Contentful/ContentBlock/themes/TCO20.scss +++ b/src/shared/components/Contentful/ContentBlock/themes/TCO20.scss @@ -51,140 +51,7 @@ strong a { } @include gui-kit-headers; - - a { - @include roboto-regular; - - font-size: 16px; - line-height: 24px; - color: #0d61bf; - text-decoration: underline; - - &:hover { - text-decoration: none; - color: #0d61bf; - } - - &:visited { - color: #8231a9; - } - } - - p { - @include tc-body-md; - - color: $tco-black; - font-size: 16px; - line-height: 26px; - margin-bottom: 20px; - margin-top: 0; - - strong { - @include roboto-medium; - - line-height: 20px; - text-align: left; - font-weight: 600; - } - } - - table { - margin-bottom: 20px; - - th { - @include roboto-regular; - - color: #2a2a2a; - font-size: 15px; - font-weight: bold; - line-height: 18px; - text-align: left; - text-transform: uppercase; - padding: 18px 10px 14px 0; - - @include md-to-xl { - white-space: nowrap; - } - - &:first-child { - padding-left: 10px; - } - } - - td { - @include roboto-regular; - - font-size: 15px; - line-height: 25px; - text-align: left; - color: $tc-gray-80; - border-top: 1px solid #d4d4d4; - border-bottom: 1px solid #d4d4d4; - padding: 20px 50px 20px 0; - min-height: 51px; - - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } - } - } - - ul, - ol { - @include tc-body-md; - - padding-left: 20px; - margin-bottom: 20px; - - @include roboto-regular; - - color: $tc-black; - - li p { - margin-bottom: 0; - } - } - - ul { - list-style-type: disc; - } - - ol { - list-style-type: decimal; - } - - img { - max-width: 100%; - border-radius: 6px; - } - - code { - @include roboto-mono-regular; - - color: #2a2a2a; - line-height: 1.5; - white-space: pre; - } - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sup { - top: -0.5em; - } - - sub { - bottom: -0.25em; - } + @include gui-kit-content; } .image { diff --git a/src/shared/components/Contentful/Dropdown/DropdownItem.jsx b/src/shared/components/Contentful/Dropdown/DropdownItem.jsx new file mode 100644 index 0000000000..1c7d36cee9 --- /dev/null +++ b/src/shared/components/Contentful/Dropdown/DropdownItem.jsx @@ -0,0 +1,68 @@ +/** + * Question and Answer Component + */ +/* eslint-disable react/no-danger */ +import React from 'react'; +import PT from 'prop-types'; +import MarkdownRenderer from 'components/MarkdownRenderer'; + +import './item.scss'; + +class DropdownItem extends React.Component { + constructor(props) { + super(props); + this.state = { + isActive: props.isActive, + }; + } + + toggleActive() { + const { isActive } = this.state; + this.setState({ + isActive: !isActive, + }); + } + + render() { + const { data } = this.props; + const { isActive } = this.state; + return ( +
+
(e.key === 'Enter' ? null : null)} + styleName={isActive ? 'question active' : 'question'} + onClick={() => this.toggleActive()} + > +
+ {data.fields.title} +
+
+
+
+ +
+
+ ); + } +} + +DropdownItem.defaultProps = { + preview: false, + spaceName: null, + environment: null, + isActive: false, +}; + +DropdownItem.propTypes = { + data: PT.shape().isRequired, + isActive: PT.bool, + preview: PT.bool, + spaceName: PT.string, + environment: PT.string, +}; + +export default DropdownItem; diff --git a/src/shared/components/Contentful/Dropdown/default.scss b/src/shared/components/Contentful/Dropdown/default.scss index 3be8c346bb..9022565a91 100644 --- a/src/shared/components/Contentful/Dropdown/default.scss +++ b/src/shared/components/Contentful/Dropdown/default.scss @@ -1,27 +1,18 @@ @import "~styles/mixins"; -.contentWrapper { - display: flex; - margin: 0 auto; - max-width: $screen-md; - padding: 15px; - color: black; +.container { + padding: 0; @include xs-to-sm { - flex-direction: column; + padding: 0 15px; } } -.container { - align-content: center; - background: white; - padding: 10px 0; - - &:nth-child(even) .contentWrapper { - flex-direction: row-reverse; - - @include xs-to-sm { - flex-direction: column; - } - } +.contentWrapper { + display: flex; + margin: 0 auto; + max-width: $screen-md; + color: black; + flex-direction: column; + border-top: 1px solid #d4d4d4; } diff --git a/src/shared/components/Contentful/Dropdown/index.jsx b/src/shared/components/Contentful/Dropdown/index.jsx index 95d9ea6c5a..92d6505fec 100644 --- a/src/shared/components/Contentful/Dropdown/index.jsx +++ b/src/shared/components/Contentful/Dropdown/index.jsx @@ -7,8 +7,8 @@ import ContentfulLoader from 'containers/ContentfulLoader'; import LoadingIndicator from 'components/LoadingIndicator'; import PT from 'prop-types'; import React from 'react'; -import FAQ from 'components/TrackHomePages/HowToCompetePage/FAQ'; import { fixStyle } from 'utils/contentful'; +import DropdownItem from './DropdownItem'; import defaultTheme from './default.scss'; @@ -27,7 +27,15 @@ function DropdownItemsLoader(props) { spaceName={spaceName} environment={environment} render={data => ( - item) }} hashLink="" /> + _.map(data.entries.items, item => ( + + )) )} renderPlaceholder={LoadingIndicator} /> diff --git a/src/shared/components/Contentful/Dropdown/item.scss b/src/shared/components/Contentful/Dropdown/item.scss new file mode 100644 index 0000000000..7cd898b901 --- /dev/null +++ b/src/shared/components/Contentful/Dropdown/item.scss @@ -0,0 +1,59 @@ +@import "~styles/mixins"; +@import "~components/Contentful/default"; + +.container { + width: 100%; +} + +.question { + display: flex; + align-items: center; + justify-content: space-between; + height: 82px; + outline: none; + cursor: pointer; + border-bottom: 1px solid #d4d4d4; + + &.active { + border-bottom: none; + } +} + +.answer { + @include gui-kit-content; + @include gui-kit-headers; + + display: none; + padding: 5px 70px 24px 0; + color: #2a2a2a; + + &.active { + display: block; + border-bottom: 1px solid #d4d4d4; + } +} + +.text { + color: #2a2a2a; + font-family: BarlowCondensed, sans-serif; + font-size: 31px; + letter-spacing: 0.2px; + text-transform: uppercase; + font-weight: 500; + + @include xs-to-sm { + max-width: 350px; + } +} + +.toggle-arrow { + background-image: url(assets/images/minimal-down.svg); + background-repeat: no-repeat; + align-self: right; + width: 24px; + height: 13px; + + &.active { + transform: scale(1, -1); + } +} diff --git a/src/shared/components/Contentful/_default.scss b/src/shared/components/Contentful/_default.scss index d16a03c0fe..7ceaa11767 100644 --- a/src/shared/components/Contentful/_default.scss +++ b/src/shared/components/Contentful/_default.scss @@ -161,3 +161,139 @@ } } } + +@mixin gui-kit-content { + a { + @include roboto-regular; + + font-size: 16px; + line-height: 24px; + color: #0d61bf; + text-decoration: underline; + + &:hover { + text-decoration: none; + color: #0d61bf; + } + + &:visited { + color: #8231a9; + } + } + + p { + @include tc-body-md; + + color: $tco-black; + font-size: 16px; + line-height: 26px; + margin-bottom: 20px; + margin-top: 0; + + strong { + @include roboto-medium; + + line-height: 20px; + text-align: left; + font-weight: 600; + } + } + + table { + margin-bottom: 20px; + + th { + @include roboto-regular; + + color: #2a2a2a; + font-size: 15px; + font-weight: bold; + line-height: 18px; + text-align: left; + text-transform: uppercase; + padding: 18px 10px 14px 0; + + @include md-to-xl { + white-space: nowrap; + } + + &:first-child { + padding-left: 10px; + } + } + + td { + @include roboto-regular; + + font-size: 15px; + line-height: 25px; + text-align: left; + color: $tc-gray-80; + border-top: 1px solid #d4d4d4; + border-bottom: 1px solid #d4d4d4; + padding: 20px 50px 20px 0; + min-height: 51px; + + &:first-child { + padding-left: 10px; + } + + &:last-child { + padding-right: 10px; + } + } + } + + ul, + ol { + @include tc-body-md; + + padding-left: 20px; + margin-bottom: 20px; + + @include roboto-regular; + + color: $tc-black; + + li p { + margin-bottom: 0; + } + } + + ul { + list-style-type: disc; + } + + ol { + list-style-type: decimal; + } + + img { + max-width: 100%; + border-radius: 6px; + } + + code { + @include roboto-mono-regular; + + color: #2a2a2a; + line-height: 1.5; + white-space: pre; + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sup { + top: -0.5em; + } + + sub { + bottom: -0.25em; + } +} From 3c9415270e0cf299119f0a88f425d66a1f5aa21b Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 21 Jul 2020 15:32:10 +0300 Subject: [PATCH 02/15] Fix #4662 --- src/shared/actions/leaderboard.js | 6 +++- .../ChallengeHistoryModal/index.jsx | 28 ++++++++++--------- .../Leaderboard/LeaderboardTable/index.jsx | 17 ++++++----- .../Leaderboard/PodiumSpot/index.jsx | 19 +++++++------ 4 files changed, 41 insertions(+), 29 deletions(-) diff --git a/src/shared/actions/leaderboard.js b/src/shared/actions/leaderboard.js index 5fbc73a665..e1216d3301 100644 --- a/src/shared/actions/leaderboard.js +++ b/src/shared/actions/leaderboard.js @@ -42,7 +42,11 @@ async function getTcoHistoryChallengesDone(url, competitor) { const res = await fetch(url) .then(response => response.json()) .then(jsonResponse => ({ - challenges: _.filter(jsonResponse, challenge => challenge.userid === competitor.userid), + challenges: _.filter(jsonResponse, challenge => ( + challenge['tco_leaderboard.user_id'] + ? (challenge['tco_leaderboard.user_id'] === competitor['tco_leaderboard.user_id']) + : (challenge.userid === competitor.userid) + )), })); return res; } diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx index 883ebf67ad..6793da87a5 100644 --- a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx +++ b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx @@ -31,6 +31,8 @@ class ChallengeHistoryModal extends Component { } = this.props; const { sortParam } = this.state; const challengesOrdered = _.orderBy(challenges, [sortParam.field], [sortParam.order]); + const placeLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.placement' : 'place'; + const pointsLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.tco_points' : 'points'; return ( @@ -57,8 +59,8 @@ class ChallengeHistoryModal extends Component { @@ -86,8 +88,8 @@ class ChallengeHistoryModal extends Component { @@ -112,19 +114,19 @@ class ChallengeHistoryModal extends Component { { challengesOrdered.map(challenge => ( - + - - {challenge.challenge_name || challenge.challenge_id} + + {challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id} { !isCopilot ? ( - {challenge.place} + {challenge['tco_leaderboard.placement'] || challenge.place} ) : null } - {challenge.points} + {challenge['tco_leaderboard.tco_points'] || challenge.points} )) diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index 2f969a9ce4..d961f8be88 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -63,6 +63,9 @@ export default function LeaderboardTable(props) { photoUrl = `${config.CDN.PUBLIC}/avatar/${ encodeURIComponent(photoUrl)}?size=40`; } + if (competitor['member_profile_basic.photo_url']) { + photoUrl = competitor['member_profile_basic.photo_url']; + } return ( {competitor.rank} @@ -83,18 +86,18 @@ export default function LeaderboardTable(props) { styleName={`${stylesName}.handle-link`} onClick={() => onUsernameClick(competitor)} > - {competitor.handle} + {competitor['member_profile_basic.handle'] || competitor.handle}
) : ( - - {competitor.handle} + + {competitor['member_profile_basic.handle'] || competitor.handle} ) }
{competitor.fulfillment && ({competitor.fulfillment} fulfillment)} - {competitor.points} points - {competitor.challengecount} challenges + {competitor['tco_leaderboard.tco_points'] || competitor.points} points + {competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} challenges
{ @@ -102,8 +105,8 @@ export default function LeaderboardTable(props) { {competitor.fulfillment} ) : null } - {competitor.challengecount} - {formatPoints(competitor.points)} + {competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} + {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)} { isTopGear ? ( {competitor.wins} diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index 8a357fb00b..18b824c21c 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -104,6 +104,9 @@ export default function PodiumSpot(props) { photoUrl = `${config.CDN.PUBLIC}/avatar/${ encodeURIComponent(photoUrl)}?size=160`; } + if (competitor['member_profile_basic.photo_url']) { + photoUrl = competitor['member_profile_basic.photo_url']; + } let rootStyle = `${stylesName}.PodiumSpot`; if (PODIUM_ITEM_MODIFIER[competitor.rank]) rootStyle += ` ${stylesName}.PodiumSpot--${PODIUM_ITEM_MODIFIER[competitor.rank]}`; @@ -127,15 +130,15 @@ export default function PodiumSpot(props) { styleName={`${stylesName}.handle-link`} onClick={() => onUsernameClick(competitor)} > - {competitor.handle} + {competitor['member_profile_basic.handle'] || competitor.handle} ) : ( - {competitor.handle} + {competitor['member_profile_basic.handle'] || competitor.handle} ) } @@ -152,15 +155,15 @@ export default function PodiumSpot(props) { styleName={`${stylesName}.handle-link`} onClick={() => onUsernameClick(competitor)} > - {competitor.handle} + {competitor['member_profile_basic.handle'] || competitor.handle} ) : ( - {competitor.handle} + {competitor['member_profile_basic.handle'] || competitor.handle} ) } @@ -176,11 +179,11 @@ export default function PodiumSpot(props) { ) : null }
- {competitor.challengecount} + {competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} challenges
- {formatPoints(competitor.points)} + {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)} points
{ From 3a0a234a1c2139d3b3a133e395d5bfd998f38985 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 21 Jul 2020 16:36:03 +0300 Subject: [PATCH 03/15] Implement #4665 --- .../components/MarkdownRenderer/index.jsx | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/shared/components/MarkdownRenderer/index.jsx b/src/shared/components/MarkdownRenderer/index.jsx index 195049e907..06aa09768a 100644 --- a/src/shared/components/MarkdownRenderer/index.jsx +++ b/src/shared/components/MarkdownRenderer/index.jsx @@ -5,12 +5,14 @@ * * Support for additional components can be added to the above file. */ +import _ from 'lodash'; import PT from 'prop-types'; import React, { Fragment } from 'react'; +import { connect } from 'react-redux'; import md from 'utils/markdown'; -export default class MarkdownRenderer extends React.Component { +class MarkdownRenderer extends React.Component { constructor(props) { super(props); this.state = { @@ -31,10 +33,17 @@ export default class MarkdownRenderer extends React.Component { } renderElements(markdown) { - const { preview, spaceName, environment } = this.props; + const { + preview, + spaceName, + environment, + profile, + } = this.props; if (markdown) { + const compiled = _.template(markdown, { variable: 'profile' }); + const interpolated = compiled(profile); this.setState({ - elements: md(markdown, { preview, spaceName, environment }), + elements: md(interpolated, { preview, spaceName, environment }), }); } } @@ -58,6 +67,7 @@ MarkdownRenderer.defaultProps = { preview: false, spaceName: null, environment: null, + profile: {}, }; MarkdownRenderer.propTypes = { @@ -65,4 +75,16 @@ MarkdownRenderer.propTypes = { preview: PT.bool, spaceName: PT.string, environment: PT.string, + profile: PT.shape(), }; + +function mapStateToProps(state) { + const profile = state.auth && state.auth.profile ? { ...state.auth.profile } : {}; + return { profile }; +} + +const MarkdownRendererContainer = connect( + mapStateToProps, +)(MarkdownRenderer); + +export default MarkdownRendererContainer; From 53b89c00e5b6e35afb079b2cf46581ddba6a8d74 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 22 Jul 2020 12:14:38 +0300 Subject: [PATCH 04/15] #4662 fixed avatar urls --- src/shared/components/Leaderboard/LeaderboardTable/index.jsx | 5 +---- src/shared/components/Leaderboard/PodiumSpot/index.jsx | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index d961f8be88..e3d754b935 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -58,14 +58,11 @@ export default function LeaderboardTable(props) { const stylesName = THEME[themeName]; const renderTableRows = comps => ( comps.map((competitor) => { - let photoUrl = competitor.avatar; + let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar; if (photoUrl) { photoUrl = `${config.CDN.PUBLIC}/avatar/${ encodeURIComponent(photoUrl)}?size=40`; } - if (competitor['member_profile_basic.photo_url']) { - photoUrl = competitor['member_profile_basic.photo_url']; - } return ( {competitor.rank} diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index 18b824c21c..63bb5cd733 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -99,14 +99,11 @@ export default function PodiumSpot(props) { } = props; const stylesName = THEME[themeName]; - let photoUrl = competitor.avatar; + let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar; if (photoUrl) { photoUrl = `${config.CDN.PUBLIC}/avatar/${ encodeURIComponent(photoUrl)}?size=160`; } - if (competitor['member_profile_basic.photo_url']) { - photoUrl = competitor['member_profile_basic.photo_url']; - } let rootStyle = `${stylesName}.PodiumSpot`; if (PODIUM_ITEM_MODIFIER[competitor.rank]) rootStyle += ` ${stylesName}.PodiumSpot--${PODIUM_ITEM_MODIFIER[competitor.rank]}`; From cad5866921416c5cd1d45725ddf1f702a7090b20 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 23 Jul 2020 09:52:23 +0300 Subject: [PATCH 05/15] ci: feature-contentful on dev --- .circleci/config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index f73a20e51d..5b0ff4a40b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -231,6 +231,7 @@ workflows: branches: only: - develop + - feature-contentful # This is alternate dev env for parallel testing - "build-test": context : org-global From 9b298b1d43a34ffe795b26938c62af6ae72c248b Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 23 Jul 2020 10:46:50 +0300 Subject: [PATCH 06/15] #4655 fix --- .../Contentful/ContentBlock/themes/TCO19.scss | 136 +----------------- .../components/Contentful/_default.scss | 12 +- 2 files changed, 7 insertions(+), 141 deletions(-) diff --git a/src/shared/components/Contentful/ContentBlock/themes/TCO19.scss b/src/shared/components/Contentful/ContentBlock/themes/TCO19.scss index 6dd6d736f7..737dff7cca 100644 --- a/src/shared/components/Contentful/ContentBlock/themes/TCO19.scss +++ b/src/shared/components/Contentful/ContentBlock/themes/TCO19.scss @@ -52,141 +52,7 @@ strong a { } @include gui-kit-headers; - - p { - @include tc-body-md; - - color: $tco-black; - font-size: 16px; - line-height: 26px; - margin-bottom: 20px; - margin-top: 0; - - strong { - @include roboto-medium; - - line-height: 20px; - text-align: left; - font-weight: 600; - margin-bottom: 20px; - } - } - - table { - margin-bottom: 20px; - - th { - @include roboto-regular; - - color: #2a2a2a; - font-size: 15px; - font-weight: bold; - line-height: 18px; - text-align: left; - text-transform: uppercase; - padding: 18px 10px 14px 0; - - @include md-to-xl { - white-space: nowrap; - } - - &:first-child { - padding-left: 10px; - } - } - - td { - @include roboto-regular; - - font-size: 15px; - line-height: 25px; - text-align: left; - color: $tc-gray-80; - border-top: 1px solid #d4d4d4; - border-bottom: 1px solid #d4d4d4; - padding: 20px 50px 20px 0; - min-height: 51px; - - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } - } - } - - ul, - ol { - @include tc-body-md; - - padding-left: 20px; - margin-bottom: 20px; - - @include roboto-regular; - - color: $tc-black; - - li p { - margin-bottom: 0; - } - } - - ul { - list-style-type: disc; - } - - ol { - list-style-type: decimal; - } - - img { - max-width: 100%; - border-radius: 6px; - } - - code { - @include roboto-mono-regular; - - color: #2a2a2a; - line-height: 1.5; - white-space: pre; - } - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sup { - top: -0.5em; - } - - sub { - bottom: -0.25em; - } - - a { - @include roboto-regular; - - font-size: 16px; - line-height: 24px; - color: #0d61bf; - text-decoration: underline; - - &:hover { - text-decoration: none; - color: #0d61bf; - } - - &:visited { - color: #8231a9; - } - } + @include gui-kit-content; } .image { diff --git a/src/shared/components/Contentful/_default.scss b/src/shared/components/Contentful/_default.scss index 7ceaa11767..1ac4ad838a 100644 --- a/src/shared/components/Contentful/_default.scss +++ b/src/shared/components/Contentful/_default.scss @@ -206,7 +206,7 @@ @include roboto-regular; color: #2a2a2a; - font-size: 15px; + font-size: 16px; font-weight: bold; line-height: 18px; text-align: left; @@ -225,14 +225,14 @@ td { @include roboto-regular; - font-size: 15px; - line-height: 25px; + font-size: 16px; + line-height: 26px; text-align: left; - color: $tc-gray-80; + color: #2a2a2a; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; - padding: 20px 50px 20px 0; - min-height: 51px; + padding: 18px 50px 18px 0; + max-height: 63px; &:first-child { padding-left: 10px; From 678f6e1c4c3b3f54347f3d0fc4c42c174c42417f Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 24 Jul 2020 12:54:07 +0300 Subject: [PATCH 07/15] Default avatar for #4662 --- .../__snapshots__/LeaderboardTable.jsx.snap | 56 ++++++------------- .../__snapshots__/PodiumSpot.jsx.snap | 28 +++------- src/assets/images/default-avatar-photo.svg | 1 + .../Leaderboard/LeaderboardTable/index.jsx | 18 ++++-- .../LeaderboardTable/themes/tco20.scss | 5 ++ .../Leaderboard/PodiumSpot/index.jsx | 17 ++++-- 6 files changed, 53 insertions(+), 72 deletions(-) create mode 100644 src/assets/images/default-avatar-photo.svg diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap index 8427f7e0c1..5ebefb6402 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap @@ -44,16 +44,10 @@ exports[`Matches shallow shapshot 1`] = ` - @@ -97,16 +91,10 @@ exports[`Matches shallow shapshot 1`] = ` - @@ -150,16 +138,10 @@ exports[`Matches shallow shapshot 1`] = ` - @@ -203,16 +185,10 @@ exports[`Matches shallow shapshot 1`] = ` - diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap index 9a000a3094..7d868e9f5a 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap @@ -7,16 +7,10 @@ exports[`Matches shallow shapshot 1`] = ` -
-
Avatar Photo \ No newline at end of file diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index e3d754b935..33c49b62e9 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -28,6 +28,8 @@ import PT from 'prop-types'; import { Avatar } from 'topcoder-react-ui-kit'; import { config } from 'topcoder-react-utils'; import _ from 'lodash'; +import DefaultAvatar from 'assets/images/default-avatar-photo.svg'; + import avatarStyles from '../avatarStyles.scss'; import defaultStyles from './themes/styles.scss'; // eslint-disable-line @@ -68,12 +70,16 @@ export default function LeaderboardTable(props) { {competitor.rank} - + { + photoUrl ? ( + + ) : + } diff --git a/src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss b/src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss index fe4938c6b1..a77a4a8e4a 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss +++ b/src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss @@ -118,6 +118,11 @@ $table-bg-hover: #f5f5f5; height: 40px; width: 40px; overflow: hidden; + + svg { + border: 3px solid rgba(0, 0, 0, 0.05); + border-radius: 50%; + } } .col-handle { diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index 63bb5cd733..72fc4869d8 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -29,6 +29,7 @@ import PT from 'prop-types'; import { Avatar } from 'topcoder-react-ui-kit'; import { config } from 'topcoder-react-utils'; import _ from 'lodash'; +import DefaultAvatar from 'assets/images/default-avatar-photo.svg'; import avatarStyles from '../avatarStyles.scss'; import defaultStyles from './themes/styles.scss'; // eslint-disable-line @@ -110,12 +111,16 @@ export default function PodiumSpot(props) { return (
- + { + photoUrl ? ( + + ) : + }
{DISPLAY_RANKING[competitor.rank]}
 { From 94c6cad57e0cd7206c2b1d3bf7a1ae3ac2012c2b Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 27 Jul 2020 15:25:58 +0300 Subject: [PATCH 08/15] Updates #4679 --- .../__snapshots__/TracksTree.jsx.snap | 6 +-- .../components/Contentful/Article/Article.jsx | 42 ++++++++-------- .../Contentful/Article/themes/default.scss | 48 +++++++++---------- .../Contentful/ArticleCard/ArticleCard.jsx | 34 ++++++------- .../ArticleCard/themes/article_small.scss | 16 +++---- .../Contentful/TracksTree/TracksTree.jsx | 4 +- .../containers/EDU/partials/TrackCards.jsx | 2 +- .../EDU/partials/TrackInfoInner.jsx | 8 ++-- 8 files changed, 80 insertions(+), 80 deletions(-) diff --git a/__tests__/shared/components/Contentful/TracksTree/__snapshots__/TracksTree.jsx.snap b/__tests__/shared/components/Contentful/TracksTree/__snapshots__/TracksTree.jsx.snap index aef9be4a86..fdf7c365ff 100644 --- a/__tests__/shared/components/Contentful/TracksTree/__snapshots__/TracksTree.jsx.snap +++ b/__tests__/shared/components/Contentful/TracksTree/__snapshots__/TracksTree.jsx.snap @@ -4,10 +4,10 @@ exports[`Matches shallow shapshot 1`] = ` `; diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 809f7c909c..f204fe9487 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -15,11 +15,10 @@ import LoadingIndicator from 'components/LoadingIndicator'; import YouTubeVideo from 'components/YouTubeVideo'; import moment from 'moment'; import localStorage from 'localStorage'; -import { config } from 'topcoder-react-utils'; +import { config, Link } from 'topcoder-react-utils'; import ShareSocial from 'components/challenge-detail/Specification/SideBar/ShareSocial'; // SVGs and assets import GestureIcon from 'assets/images/icon-gesture.svg'; -import UserDefault from 'assets/images/ico-user-default.svg'; import ReadMoreArrow from 'assets/images/read-more-arrow.svg'; import qs from 'qs'; @@ -109,16 +108,23 @@ export default class Article extends React.Component { return ( {/* Banner */} -
- { - fields.featuredImage ? ( -
- ) : null - } -
-
+ { + fields.featuredImage ? ( +
+ + + + + + + + +
+ ) : null + }
@@ -139,9 +145,7 @@ export default class Article extends React.Component { )} renderPlaceholder={LoadingIndicator} /> - ) : ( - - ) + ) : null }
@@ -169,7 +173,7 @@ export default class Article extends React.Component { { _.map(fields.tags, tag => (
- {tag} + {tag}
)) } @@ -250,9 +254,9 @@ export default class Article extends React.Component { {subData.entries.items[rec.sys.id].fields.title} ) : ( - + {subData.entries.items[rec.sys.id].fields.title} - + ) } @@ -278,9 +282,9 @@ export default class Article extends React.Component { Read More ) : ( - + Read More - + ) }
diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index b823211fca..b42d117f2d 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -1,23 +1,10 @@ @import "~styles/mixins"; @import "~components/Contentful/default"; -.bannerBottomShape { - background-image: url(assets/images/wave.svg); - height: 120px; - background-repeat: no-repeat; - background-size: cover; - margin-top: -120px; - position: relative; - - @include xs-to-sm { - height: 60px; - margin-top: -60px; - } -} - -.contentContainer { +.contentContainer, +.contentContainerWithBanner { max-width: $screen-lg; - margin: 90px auto; + margin: 70px auto 90px auto; width: 100%; display: flex; @@ -67,13 +54,18 @@ } .name { - @include roboto-regular; + @include roboto-bold; margin-right: 6px; + color: #2a2a2a; + font-size: 14px; } .handle { - @include roboto-bold; + @include roboto-regular; + + color: #2a2a2a; + font-size: 14px; } } } @@ -411,17 +403,21 @@ } } +.contentContainerWithBanner { + margin-top: 0; +} + .bannerContainer { - background-image: linear-gradient(0deg, #06d6a0 0%, #63f963 100%); - position: relative; - min-height: 600px; + margin: auto; + max-width: 1024px; + width: 100%; - .featuredImage { - background-repeat: no-repeat; - background-size: cover; - background-position: center center; + @include xs-to-md { + padding: 0 15px; + } + + .site-header-background { width: 100%; - min-height: 600px; } } diff --git a/src/shared/components/Contentful/ArticleCard/ArticleCard.jsx b/src/shared/components/Contentful/ArticleCard/ArticleCard.jsx index d50230a139..38e99630a3 100644 --- a/src/shared/components/Contentful/ArticleCard/ArticleCard.jsx +++ b/src/shared/components/Contentful/ArticleCard/ArticleCard.jsx @@ -10,7 +10,7 @@ import { logger } from 'topcoder-react-lib'; import PT from 'prop-types'; import React from 'react'; import { themr } from 'react-css-super-themr'; -import { config } from 'topcoder-react-utils'; +import { config, Link } from 'topcoder-react-utils'; import markdown from 'utils/markdown'; import ReactDOMServer from 'react-dom/server'; // SVG assets @@ -29,7 +29,7 @@ const FORMAT = 'MMM DD, YYYY'; // date/time format for 'Forum post' cards is different from others const FORUM_POST_FORMAT = 'MMM DD, YYYY [at] h:mm A'; // max length for the title of the 'Article small' cards -const ART_SMALL_TITLE_MAX_LENGTH = 29; +const ART_SMALL_TITLE_MAX_LENGTH = 60; // Article large card 'breakpoint' const ARTICLE_LARGE_BREAKPOINT = 473; // character length for the content preview @@ -185,7 +185,7 @@ class ArticleCard extends React.Component { className={theme.tag} title={`Search for articles labelled as ${tag}`} > - {tag} + {tag} )) /* eslint-enable react/no-array-index-key */ @@ -195,13 +195,13 @@ class ArticleCard extends React.Component {

{article.readTime}

- {title} - +

{content}

@@ -226,14 +226,14 @@ class ArticleCard extends React.Component {
) } - {author.tcHandle} - +
)) ) : null @@ -253,13 +253,13 @@ class ArticleCard extends React.Component { {themeName === 'Article large' ?  .  : null} { contentAuthor && contentAuthor.length > 0 ? ( - {contentAuthor[0].name} - + ) : null }

@@ -290,13 +290,13 @@ class ArticleCard extends React.Component { }
) : ( - Read More - + ) }
diff --git a/src/shared/components/Contentful/ArticleCard/themes/article_small.scss b/src/shared/components/Contentful/ArticleCard/themes/article_small.scss index 7037ddff2d..b750b8ad1d 100644 --- a/src/shared/components/Contentful/ArticleCard/themes/article_small.scss +++ b/src/shared/components/Contentful/ArticleCard/themes/article_small.scss @@ -26,6 +26,9 @@ .main { flex-grow: 1; padding: 0 20px; + display: flex; + flex-direction: column; + justify-content: space-around; } .playIconContainer { @@ -68,15 +71,9 @@ color: #2a2a2a; font-family: 'Barlow', Helvetica, Arial, sans-serif; font-weight: 600; - font-size: 20px; - line-height: 22px; + font-size: 16px; + line-height: 20px; text-transform: uppercase; - letter-spacing: 0.3px; - - @include xs-to-sm { - font-size: 21px; - line-height: 23px; - } } .contentPreview { @@ -85,6 +82,9 @@ .infoContainer { margin: 11px 0 15px; + flex: 1; + display: flex; + align-items: flex-end; } .articleInfo { diff --git a/src/shared/components/Contentful/TracksTree/TracksTree.jsx b/src/shared/components/Contentful/TracksTree/TracksTree.jsx index 28039955bf..3e780482d2 100644 --- a/src/shared/components/Contentful/TracksTree/TracksTree.jsx +++ b/src/shared/components/Contentful/TracksTree/TracksTree.jsx @@ -6,7 +6,7 @@ import _ from 'lodash'; import PT from 'prop-types'; import React, { Component } from 'react'; import { themr } from 'react-css-super-themr'; -import { config } from 'topcoder-react-utils'; +import { config, Link } from 'topcoder-react-utils'; import IconArrowUpBig from 'assets/images/tc-edu/icon-arrow-up-big.svg'; import defaultTheme from './themes/default.scss'; @@ -57,7 +57,7 @@ export class TracksTreeInner extends Component { const selectedTrack = _.find(list, { id: expandedTrack }); return (
- THRIVE + THRIVE {!isShowFullList && selectedTrack && (