From df85e25836d65d957b1dc33f039a1a77aa1f6c60 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 3 Aug 2021 11:16:36 +0300 Subject: [PATCH 1/7] init updates --- .../components/Contentful/Article/Article.jsx | 22 ++++++++++++++++ .../Contentful/Article/themes/default.scss | 25 +++++++++++++++++-- 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index c9078713ea..4cf9ea8a03 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -13,6 +13,7 @@ import markdown from 'utils/markdown'; import ContentfulLoader from 'containers/ContentfulLoader'; import LoadingIndicator from 'components/LoadingIndicator'; import YouTubeVideo from 'components/YouTubeVideo'; +import Viewport from 'components/Contentful/Viewport'; import moment from 'moment'; import localStorage from 'localStorage'; import { Helmet } from 'react-helmet'; @@ -123,6 +124,8 @@ export default class Article extends React.Component { }, ).substring(0, CONTENT_PREVIEW_LENGTH); + console.log('article fields', fields); + return ( @@ -197,6 +200,13 @@ export default class Article extends React.Component {

categories & Tags

{/* Tags */}
+ { + _.map(fields.contentCategory, cat => ( +
+ {cat.fields.name} +
+ )) + } { _.map(fields.tags, tag => (
@@ -219,6 +229,18 @@ export default class Article extends React.Component {
+ { + fields.leftSidebarContent && ( +
+ +
+ ) + }
{/* Content */}
diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index 9078820319..bd7eddc4b3 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -149,6 +149,19 @@ letter-spacing: 0.4px; line-height: 15px; text-align: left; + + .catLink { + font-weight: 500; + } + } + } + + .leftSidebarContent { + margin-top: 23px; + + @include xs-to-sm { + margin-top: 0; + margin-bottom: 40px; } } @@ -480,7 +493,7 @@ background-color: #555; border-radius: 10px; width: 413px; - height: 457px; + min-height: 477px; display: flex; flex-direction: column; @@ -496,6 +509,10 @@ } } + @media screen and (max-width: 413px) { + width: auto; + } + .recommendedImage { width: 413px; height: 200px; @@ -503,6 +520,10 @@ border-top-right-radius: 10px; background-size: cover; background-position: 0 center; + + @media screen and (max-width: 413px) { + width: auto; + } } .recommendedImageBottomShape { @@ -511,7 +532,7 @@ background-repeat: no-repeat; background-size: cover; margin-top: -40px; - background-position: 0 -184px; + background-position: bottom; transform: scaleY(-1); } From 0556567b57fa682ee4f1091bd8253f97917207e6 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 4 Aug 2021 10:03:47 +0300 Subject: [PATCH 2/7] random ads and banner update --- .../components/Contentful/Article/Article.jsx | 82 ++++++----- .../Contentful/Article/themes/default.scss | 131 +++++++++++++----- 2 files changed, 142 insertions(+), 71 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 4cf9ea8a03..21b223aa17 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -34,6 +34,11 @@ const htmlToText = require('html-to-text'); const CONTENT_PREVIEW_LENGTH = 110; // Votes local storage key const LOCAL_STORAGE_KEY = 'VENBcnRpY2xlVm90ZXM='; +// def banner image +const DEFAULT_BANNER_IMAGE = 'https://images.ctfassets.net/piwi0eufbb2g/7v2hlDsVep7FWufHw0lXpQ/2505e61a880e68fab4e80cd0e8ec1814/0C37CB5E-B253-4804-8935-78E64E67589E.png'; +// random ads banner - left sidebar +const RANDOM_BANNERS = ['6G8mjiTC1mzeSQ2YoUG1gB', '1DnDD02xX1liHfSTf5Vsn8', 'HQZ3mN0rR92CbNTkKTHJ5', '1OLoX8ZsvjAnn4TdGbZESD', '77jn01UGoQe2gqA7x0coQD']; +const RANDOM_BANNER = RANDOM_BANNERS[_.random(0, 4)]; export default class Article extends React.Component { componentDidMount() { @@ -124,8 +129,6 @@ export default class Article extends React.Component { }, ).substring(0, CONTENT_PREVIEW_LENGTH); - console.log('article fields', fields); - return ( @@ -134,24 +137,35 @@ export default class Article extends React.Component { - - + + {/* Banner */} - { - fields.featuredImage ? ( -
- - - - - - - - +
+
+
+

{moment(fields.creationDate).format('MMMM D, YYYY')}

+

{fields.title}

- ) : null - } +
+ { + fields.featuredImage ? ( + + + + + + + + + ) : ( + Thrive - default banner + ) + } +
+
+ Thrive banner shape +
DURATION {fields.readTime}
-

categories & Tags

- {/* Tags */} +

categories

+ {/* Cats */}
{ _.map(fields.contentCategory, cat => ( @@ -207,6 +221,11 @@ export default class Article extends React.Component {
)) } +
+
+

Tags

+ {/* Tags */} +
{ _.map(fields.tags, tag => (
@@ -229,25 +248,18 @@ export default class Article extends React.Component {
- { - fields.leftSidebarContent && ( -
- -
- ) - } +
+ +
{/* Content */}
-
-

{moment(fields.creationDate).format('MMMM D, YYYY')}

-

{fields.title}

-
{ fields.type === 'Video' && fields.contentUrl ? ( diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index bd7eddc4b3..96f1765b99 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -16,7 +16,7 @@ .contentContainer, .contentContainerWithBanner { max-width: $screen-lg; - margin: 70px auto 90px auto; + margin: 0 auto 90px auto; width: 100%; display: flex; @@ -25,6 +25,11 @@ margin: 30px auto; } + @media screen and (max-width: 1280px) and (min-width: 768px) { + padding-left: 15px; + padding-right: 15px; + } + .contentLeftBar { max-width: 164px; @@ -342,34 +347,6 @@ color: #8231a9; } } - - .articleContentTop { - display: flex; - flex-direction: column; - - .articleDate { - color: #2a2a2a; - font-family: Roboto, sans-serif; - font-size: 12px; - font-weight: 700; - letter-spacing: 1px; - line-height: 16px; - text-align: left; - margin: 0; - } - - .articleTitle { - color: #2a2a2a; - font-family: BarlowCondensed, sans-serif; - font-size: 60px; - font-weight: 500; - line-height: 58px; - text-align: left; - margin-bottom: 28px; - text-transform: uppercase; - margin-top: 8px; - } - } } .actionContainer { @@ -434,17 +411,91 @@ .bannerContainer { margin: auto; - max-width: 1024px; width: 100%; + background-color: #e9e9e9; + flex-direction: column; - @include xs-to-md { - padding: 0 15px; + @include xs-to-sm { + margin-bottom: 200px; } - .site-header-background { - width: 100%; - height: calc(100vw * (9 / 16)); - max-height: 565px; + @media screen and (min-width: 1024px) and (max-width: 1440px) { + margin-bottom: 50px; + } + + .bannerInner { + display: flex; + max-width: 1280px; + margin: auto; + align-items: center; + padding: 75px 0 45px; + + @include xs-to-sm { + flex-direction: column; + padding: 45px 15px 90px; + } + + @media screen and (max-width: 1280px) and (min-width: 768px) { + padding-left: 15px; + padding-right: 15px; + } + + .bannerInnerLeft { + display: flex; + flex-direction: column; + flex: 2; + margin-right: 130px; + + @include xs-to-sm { + margin-right: 0; + } + + .articleDate { + color: #2a2a2a; + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 700; + letter-spacing: 1px; + line-height: 16px; + text-align: left; + margin: 0; + } + + .articleTitle { + color: #2a2a2a; + font-family: BarlowCondensed, sans-serif; + font-size: 60px; + font-weight: 500; + line-height: 58px; + text-align: left; + margin-bottom: 28px; + text-transform: uppercase; + margin-top: 8px; + } + } + + .bannerInnerRight { + position: relative; + width: 445px; + z-index: 1; + + @include xs-to-sm { + width: 100%; + max-width: 445px; + } + + .site-header-background { + width: 100%; + height: 355px; + position: absolute; + top: -116px; + + @include xs-to-sm { + height: auto; + top: 0; + } + } + } } } @@ -489,6 +540,10 @@ align-items: center; } + @include xs-to-sm { + padding: 0 15px; + } + .recommendedCard { background-color: #555; border-radius: 10px; @@ -546,6 +601,10 @@ text-transform: uppercase; margin-top: 36px 40px 7px 40px; padding: 36px 46px 7px 46px; + + @include xs-to-sm { + padding-top: 10px; + } } .recommendedCardContent { From d1e864b86b0ba6206aaaff4364d10e9847f37f4c Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 6 Aug 2021 09:36:58 +0300 Subject: [PATCH 3/7] banner image shape --- .../components/Contentful/Article/Article.jsx | 17 +++--- .../Contentful/Article/themes/default.scss | 52 ++++++++++++++++++- 2 files changed, 59 insertions(+), 10 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 21b223aa17..36fd9ff8da 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ /* eslint-disable react/no-unused-state */ /** * The core article rendering. @@ -141,7 +142,7 @@ export default class Article extends React.Component { {/* Banner */} -
+

{moment(fields.creationDate).format('MMMM D, YYYY')}

@@ -150,14 +151,14 @@ export default class Article extends React.Component {
{ fields.featuredImage ? ( - - - - +
+ + + - - - + +
+
) : ( Thrive - default banner ) diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index 96f1765b99..c398c019e0 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -192,6 +192,10 @@ text-transform: uppercase; } + > *:first-child { + margin-top: 0; + } + @include gui-kit-headers; p { @@ -409,7 +413,8 @@ margin-top: 0; } -.bannerContainer { +.bannerContainer, +.bannerContainerDefaultImage { margin: auto; width: 100%; background-color: #e9e9e9; @@ -423,6 +428,10 @@ margin-bottom: 50px; } + @media screen and (max-width: 425px) { + margin-bottom: 300px; + } + .bannerInner { display: flex; max-width: 1280px; @@ -488,17 +497,56 @@ width: 100%; height: 355px; position: absolute; - top: -116px; + top: -95px; @include xs-to-sm { height: auto; top: 0; } + + .bannerSvg { + position: absolute; + width: 0; + height: 0; + + /* stylelint-disable */ + > clipPath { + transform: translate(445px, 0) scaleX(-1); + + @media screen and (max-width: 425px) and (min-width: 375px) { + transform: translate(380px, 0) scaleX(-1); + } + + @media screen and (max-width: 375px) and (min-width: 320px) { + transform: translate(330px, 0) scaleX(-1); + } + + @media screen and (max-width: 320px) { + transform: translate(275px, 0) scaleX(-1); + } + } + /* stylelint-enable */ + } + + .bannerClippedImageHolder { + width: 100%; + height: 355px; + background-size: cover; + background-position: center center; + -webkit-clip-path: url(#thrive-banner-clip-path); + clip-path: url(#thrive-banner-clip-path); + } } } } } +.bannerContainerDefaultImage { + @media screen and (max-width: 425px) { + margin-bottom: 180px; + } +} + .recommendedContainer { margin-top: 65px; background-color: #f4f4f4; From 219a581f2f63f4e7190cd62d652d4c079eae29fd Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 6 Aug 2021 09:45:10 +0300 Subject: [PATCH 4/7] ci: on QA --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index cd05ec2a41..bb5a93a408 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -356,7 +356,7 @@ workflows: filters: branches: only: - - new-leaderboards-theme + - thrive-article-page # This is beta env for production soft releases - "build-prod-beta": context : org-global From c0f46de1132556995155c6c4f7df433bbf0e28d2 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 6 Aug 2021 13:02:21 +0300 Subject: [PATCH 5/7] safari banner shape bug --- src/shared/components/Contentful/Article/themes/default.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index c398c019e0..7b0ad94b58 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -539,6 +539,10 @@ } } } + + .bannerBottShape { + width: 100%; + } } .bannerContainerDefaultImage { From 24e44d4b78ddc2b443e571191d5d7f1b9f622329 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 10 Aug 2021 16:46:59 +0300 Subject: [PATCH 6/7] fixes banner bot shape - safri --- .../components/Contentful/Article/themes/default.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index 7b0ad94b58..12bd7f8b18 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -419,6 +419,7 @@ width: 100%; background-color: #e9e9e9; flex-direction: column; + overflow: hidden; @include xs-to-sm { margin-bottom: 200px; @@ -541,7 +542,10 @@ } .bannerBottShape { - width: 100%; + width: calc(100% + 4px); + position: relative; + left: -2px; + bottom: -1px; } } From 26fdd9bf433f49ab44090717ab511ab630aaedd9 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 11 Aug 2021 08:31:26 +0300 Subject: [PATCH 7/7] qa fixes --- .../components/Contentful/Article/Article.jsx | 162 +++++++++--------- .../Contentful/Article/themes/default.scss | 9 +- 2 files changed, 89 insertions(+), 82 deletions(-) diff --git a/src/shared/components/Contentful/Article/Article.jsx b/src/shared/components/Contentful/Article/Article.jsx index 36fd9ff8da..93dbeaca03 100644 --- a/src/shared/components/Contentful/Article/Article.jsx +++ b/src/shared/components/Contentful/Article/Article.jsx @@ -141,15 +141,16 @@ export default class Article extends React.Component { - {/* Banner */} -
-
-
-

{moment(fields.creationDate).format('MMMM D, YYYY')}

-

{fields.title}

-
-
- { +
+ {/* Banner */} +
+
+
+

{moment(fields.creationDate).format('MMMM D, YYYY')}

+

{fields.title}

+
+
+ { fields.featuredImage ? (
@@ -163,19 +164,19 @@ export default class Article extends React.Component { Thrive - default banner ) } +
+ Thrive banner shape
- Thrive banner shape -
-
-
- {/* Authors */} -
- { +
+
+ {/* Authors */} +
+ { _.map(fields.contentAuthor, author => (
{ @@ -207,89 +208,89 @@ export default class Article extends React.Component {
)) } -
-
-

DURATION

- {fields.readTime} -
-

categories

- {/* Cats */} -
- { +
+
+

DURATION

+ {fields.readTime} +
+

categories

+ {/* Cats */} +
+ { _.map(fields.contentCategory, cat => (
{cat.fields.name}
)) } -
-
-

Tags

- {/* Tags */} -
- { +
+
+

Tags

+ {/* Tags */} +
+ { _.map(fields.tags, tag => (
{tag}
)) } +
+
+

share

+ +
+
+ +
-
-

share

- -
-
- -
-
- {/* Content */} -
- - { + {/* Content */} +
+ + { fields.type === 'Video' && fields.contentUrl ? ( ) : null } - {/* Voting */} -
-
-
this.updateVote('up')} onKeyPress={() => this.updateVote('up')}> - -
- - { + {/* Voting */} +
+
+
this.updateVote('up')} onKeyPress={() => this.updateVote('up')}> + +
+ + { upvotes } - -
-
-
this.updateVote('down')} onKeyPress={() => this.updateVote('down')}> - + +
+
+
this.updateVote('down')} onKeyPress={() => this.updateVote('down')}> + +
+ {downvotes}
- {downvotes}
-
- {/* Recommended */} - { + {/* Recommended */} + { fields.recommended ? (
@@ -366,6 +367,7 @@ export default class Article extends React.Component {
) : null } +
); } diff --git a/src/shared/components/Contentful/Article/themes/default.scss b/src/shared/components/Contentful/Article/themes/default.scss index 12bd7f8b18..d5ad74af45 100644 --- a/src/shared/components/Contentful/Article/themes/default.scss +++ b/src/shared/components/Contentful/Article/themes/default.scss @@ -1,6 +1,11 @@ @import "~styles/mixins"; @import "~components/Contentful/default"; +.wrapper { + overflow-x: hidden; + flex-direction: column; +} + .shareButtons { margin-top: 10px; @@ -419,7 +424,7 @@ width: 100%; background-color: #e9e9e9; flex-direction: column; - overflow: hidden; + overflow: visible; @include xs-to-sm { margin-bottom: 200px; @@ -545,7 +550,7 @@ width: calc(100% + 4px); position: relative; left: -2px; - bottom: -1px; + bottom: -10px; } }