Avatar Photo
\ No newline at end of file
diff --git a/src/assets/images/icon-facebook.svg b/src/assets/images/icon-facebook.svg
new file mode 100644
index 0000000000..ec2593813f
--- /dev/null
+++ b/src/assets/images/icon-facebook.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/src/assets/images/icon-linkedIn.svg b/src/assets/images/icon-linkedIn.svg
new file mode 100644
index 0000000000..d7fbf67eaa
--- /dev/null
+++ b/src/assets/images/icon-linkedIn.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/src/assets/images/icon-twitter.svg b/src/assets/images/icon-twitter.svg
new file mode 100644
index 0000000000..d11f28d598
--- /dev/null
+++ b/src/assets/images/icon-twitter.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
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 @@
+
+
\ No newline at end of file
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/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx
index 809f7c909c..150d213290 100644
--- a/src/shared/components/Contentful/Article/Article.jsx
+++ b/src/shared/components/Contentful/Article/Article.jsx
@@ -15,13 +15,14 @@ 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 ShareSocial from 'components/challenge-detail/Specification/SideBar/ShareSocial';
+import { config, Link, isomorphy } from 'topcoder-react-utils';
+import qs from 'qs';
// 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';
+import IconFacebook from 'assets/images/icon-facebook.svg';
+import IconTwitter from 'assets/images/icon-twitter.svg';
+import IconLinkedIn from 'assets/images/icon-linkedIn.svg';
const htmlToText = require('html-to-text');
@@ -105,20 +106,31 @@ export default class Article extends React.Component {
spaceName, environment, preview,
};
const { upvotes, downvotes } = this.state || {};
+ let shareUrl;
+ if (isomorphy.isClientSide()) {
+ shareUrl = encodeURIComponent(window.location.href);
+ }
return (
{/* Banner */}
-
- {
- fields.featuredImage ? (
-
- ) : null
- }
-
@@ -139,9 +151,7 @@ export default class Article extends React.Component {
)}
renderPlaceholder={LoadingIndicator}
/>
- ) : (
-
- )
+ ) : null
}
@@ -169,14 +179,24 @@ export default class Article extends React.Component {
{
_.map(fields.tags, tag => (
))
}
share
-
+
{/* Content */}
@@ -250,9 +270,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 +298,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..5b9b4b32a6 100644
--- a/src/shared/components/Contentful/Article/themes/default.scss
+++ b/src/shared/components/Contentful/Article/themes/default.scss
@@ -1,23 +1,22 @@
@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;
+.shareButtons {
+ margin-top: 10px;
- @include xs-to-sm {
- height: 60px;
- margin-top: -60px;
+ a {
+ margin-right: 5px;
+
+ &:last-child {
+ margin-right: 0;
+ }
}
}
-.contentContainer {
+.contentContainer,
+.contentContainerWithBanner {
max-width: $screen-lg;
- margin: 90px auto;
+ margin: 70px auto 90px auto;
width: 100%;
display: flex;
@@ -67,13 +66,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 +415,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}
)
}
-