Skip to content

Commit 26fdd9b

Browse files
kkartunovkkartunov
committed
qa fixes
1 parent 24e44d4 commit 26fdd9b

File tree

2 files changed

+89
-82
lines changed

2 files changed

+89
-82
lines changed

‎src/shared/components/Contentful/Article/Article.jsx

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -141,15 +141,16 @@ export default class Article extends React.Component {
141141
<meta name="image" property="og:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : DEFAULT_BANNER_IMAGE} />
142142
<meta name="twitter:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : DEFAULT_BANNER_IMAGE} />
143143
</Helmet>
144-
{/* Banner */}
145-
<div className={fields.featuredImage ? theme.bannerContainer : theme.bannerContainerDefaultImage}>
146-
<div className={theme.bannerInner}>
147-
<div className={theme.bannerInnerLeft}>
148-
<h4 className={theme.articleDate}>{moment(fields.creationDate).format('MMMM D, YYYY')}</h4>
149-
<h1 className={theme.articleTitle}>{fields.title}</h1>
150-
</div>
151-
<div className={theme.bannerInnerRight}>
152-
{
144+
<div className={theme.wrapper}>
145+
{/* Banner */}
146+
<div className={fields.featuredImage ? theme.bannerContainer : theme.bannerContainerDefaultImage}>
147+
<div className={theme.bannerInner}>
148+
<div className={theme.bannerInnerLeft}>
149+
<h4 className={theme.articleDate}>{moment(fields.creationDate).format('MMMM D, YYYY')}</h4>
150+
<h1 className={theme.articleTitle}>{fields.title}</h1>
151+
</div>
152+
<div className={theme.bannerInnerRight}>
153+
{
153154
fields.featuredImage ? (
154155
<div className={theme['site-header-background']}>
155156
<svg className={theme.bannerSvg}>
@@ -163,19 +164,19 @@ export default class Article extends React.Component {
163164
<img src={DEFAULT_BANNER_IMAGE} alt="Thrive - default banner" className={theme['site-header-background']} />
164165
)
165166
}
167+
</div>
166168
</div>
169+
<img src="https://images.ctfassets.net/piwi0eufbb2g/3StLyQh5ne1Lk9H7C1oVxv/52f17a02122212052e44585d3e79fcf7/29320408-E820-48E1-B0FD-539EAC296910.svg" alt="Thrive banner shape" className={theme.bannerBottShape} />
167170
</div>
168-
<img src="https://images.ctfassets.net/piwi0eufbb2g/3StLyQh5ne1Lk9H7C1oVxv/52f17a02122212052e44585d3e79fcf7/29320408-E820-48E1-B0FD-539EAC296910.svg" alt="Thrive banner shape" className={theme.bannerBottShape} />
169-
</div>
170-
<div
171-
className={fields.featuredImage
172-
? theme.contentContainerWithBanner : theme.contentContainer}
173-
style={fixStyle(fields.extraStylesForContainer)}
174-
>
175-
<div className={theme.contentLeftBar}>
176-
{/* Authors */}
177-
<div className={theme.authorContainer}>
178-
{
171+
<div
172+
className={fields.featuredImage
173+
? theme.contentContainerWithBanner : theme.contentContainer}
174+
style={fixStyle(fields.extraStylesForContainer)}
175+
>
176+
<div className={theme.contentLeftBar}>
177+
{/* Authors */}
178+
<div className={theme.authorContainer}>
179+
{
179180
_.map(fields.contentAuthor, author => (
180181
<div key={author.sys.id} className={theme.authorWrapper}>
181182
{
@@ -207,89 +208,89 @@ export default class Article extends React.Component {
207208
</div>
208209
))
209210
}
210-
</div>
211-
<div className={theme.separator} />
212-
<h3 className={theme.label}>DURATION</h3>
213-
<span className={theme.duration}>{fields.readTime}</span>
214-
<div className={theme.separator} />
215-
<h3 className={theme.label}>categories</h3>
216-
{/* Cats */}
217-
<div className={theme.tagContainer}>
218-
{
211+
</div>
212+
<div className={theme.separator} />
213+
<h3 className={theme.label}>DURATION</h3>
214+
<span className={theme.duration}>{fields.readTime}</span>
215+
<div className={theme.separator} />
216+
<h3 className={theme.label}>categories</h3>
217+
{/* Cats */}
218+
<div className={theme.tagContainer}>
219+
{
219220
_.map(fields.contentCategory, cat => (
220221
<div className={theme.tagItem} key={cat.sys.id} title={`Search for articles in ${cat.fields.trackParent}:${cat.fields.name} category`}>
221222
<Link to={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_TRACKS_PATH}?${qs.stringify({ track: cat.fields.trackParent, tax: cat.fields.name })}`} key={`${cat.sys.id}`} className={theme.catLink}>{cat.fields.name}</Link>
222223
</div>
223224
))
224225
}
225-
</div>
226-
<div className={theme.separator} />
227-
<h3 className={theme.label}>Tags</h3>
228-
{/* Tags */}
229-
<div className={theme.tagContainer}>
230-
{
226+
</div>
227+
<div className={theme.separator} />
228+
<h3 className={theme.label}>Tags</h3>
229+
{/* Tags */}
230+
<div className={theme.tagContainer}>
231+
{
231232
_.map(fields.tags, tag => (
232233
<div className={theme.tagItem} key={tag} title={`Search for articles labelled as ${tag}`}>
233234
<Link to={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_SEARCH_PATH}?${qs.stringify({ tags: tag })}`} key={`${tag}`}>{tag}</Link>
234235
</div>
235236
))
236237
}
238+
</div>
239+
<div className={theme.separator} />
240+
<h3 className={theme.label}>share</h3>
241+
<div className={theme.shareButtons}>
242+
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">
243+
<IconLinkedIn />
244+
</a>
245+
<a href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&src=share_button`} target="_blank" rel="noopener noreferrer">
246+
<IconFacebook />
247+
</a>
248+
<a href={`https://twitter.com/intent/tweet?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">
249+
<IconTwitter />
250+
</a>
251+
</div>
252+
<div className={theme.mobileSeparator} />
253+
<div className={theme.leftSidebarContent}>
254+
<Viewport
255+
id={fields.leftSidebarContent
256+
? fields.leftSidebarContent.sys.id : RANDOM_BANNER}
257+
preview={preview}
258+
spaceName={spaceName}
259+
environment={environment}
260+
/>
261+
</div>
237262
</div>
238-
<div className={theme.separator} />
239-
<h3 className={theme.label}>share</h3>
240-
<div className={theme.shareButtons}>
241-
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">
242-
<IconLinkedIn />
243-
</a>
244-
<a href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&src=share_button`} target="_blank" rel="noopener noreferrer">
245-
<IconFacebook />
246-
</a>
247-
<a href={`https://twitter.com/intent/tweet?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">
248-
<IconTwitter />
249-
</a>
250-
</div>
251-
<div className={theme.mobileSeparator} />
252-
<div className={theme.leftSidebarContent}>
253-
<Viewport
254-
id={fields.leftSidebarContent
255-
? fields.leftSidebarContent.sys.id : RANDOM_BANNER}
256-
preview={preview}
257-
spaceName={spaceName}
258-
environment={environment}
259-
/>
260-
</div>
261-
</div>
262-
{/* Content */}
263-
<div className={theme.articleContent}>
264-
<MarkdownRenderer markdown={fields.content} {...contentfulConfig} />
265-
{
263+
{/* Content */}
264+
<div className={theme.articleContent}>
265+
<MarkdownRenderer markdown={fields.content} {...contentfulConfig} />
266+
{
266267
fields.type === 'Video' && fields.contentUrl ? (
267268
<YouTubeVideo src={fields.contentUrl} />
268269
) : null
269270
}
270-
{/* Voting */}
271-
<div className={theme.actionContainer}>
272-
<div className={theme.action}>
273-
<div tabIndex={0} role="button" className={theme.circleGreenIcon} onClick={() => this.updateVote('up')} onKeyPress={() => this.updateVote('up')}>
274-
<GestureIcon />
275-
</div>
276-
<span>
277-
{
271+
{/* Voting */}
272+
<div className={theme.actionContainer}>
273+
<div className={theme.action}>
274+
<div tabIndex={0} role="button" className={theme.circleGreenIcon} onClick={() => this.updateVote('up')} onKeyPress={() => this.updateVote('up')}>
275+
<GestureIcon />
276+
</div>
277+
<span>
278+
{
278279
upvotes
279280
}
280-
</span>
281-
</div>
282-
<div className={theme.action}>
283-
<div tabIndex={0} role="button" className={theme.circleRedIcon} onClick={() => this.updateVote('down')} onKeyPress={() => this.updateVote('down')}>
284-
<GestureIcon />
281+
</span>
282+
</div>
283+
<div className={theme.action}>
284+
<div tabIndex={0} role="button" className={theme.circleRedIcon} onClick={() => this.updateVote('down')} onKeyPress={() => this.updateVote('down')}>
285+
<GestureIcon />
286+
</div>
287+
<span>{downvotes}</span>
285288
</div>
286-
<span>{downvotes}</span>
287289
</div>
288290
</div>
289291
</div>
290-
</div>
291-
{/* Recommended */}
292-
{
292+
{/* Recommended */}
293+
{
293294
fields.recommended ? (
294295
<div className={theme.recommendedContainer}>
295296
<div className={theme.recommendedTopShape} />
@@ -366,6 +367,7 @@ export default class Article extends React.Component {
366367
</div>
367368
) : null
368369
}
370+
</div>
369371
</React.Fragment>
370372
);
371373
}

‎src/shared/components/Contentful/Article/themes/default.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
@import "~styles/mixins";
22
@import "~components/Contentful/default";
33

4+
.wrapper {
5+
overflow-x: hidden;
6+
flex-direction: column;
7+
}
8+
49
.shareButtons {
510
margin-top: 10px;
611

@@ -419,7 +424,7 @@
419424
width: 100%;
420425
background-color: #e9e9e9;
421426
flex-direction: column;
422-
overflow: hidden;
427+
overflow: visible;
423428

424429
@include xs-to-sm {
425430
margin-bottom: 200px;
@@ -545,7 +550,7 @@
545550
width: calc(100% + 4px);
546551
position: relative;
547552
left: -2px;
548-
bottom: -1px;
553+
bottom: -10px;
549554
}
550555
}
551556

0 commit comments

Comments
 (0)