Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

NJ/Fix: New image dimension #2150

Merged
7 commits merged into from
Sep 29, 2021
Merged

NJ/Fix: New image dimension #2150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cc07aa1
NNew design images fixes
njazuli-deriv Sep 27, 2021
5e3a9c0
change max width for featured post
njazuli-deriv Sep 28, 2021
dea03b4
remove tag and date in featured post and market news section
njazuli-deriv Sep 28, 2021
2207acd
revert date and minutes read
njazuli-deriv Sep 28, 2021
a20890f
remove comments
njazuli-deriv Sep 28, 2021
594a776
remove border-radius for article list and video list for mobile
njazuli-deriv Sep 28, 2021
e3c5ff3
fixed comments
njazuli-deriv Sep 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/common/utility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export const convertDate = (date) => {
return (
newdate.toLocaleString('en', { day: 'numeric' }) +
' ' +
newdate.toLocaleString('en', { month: 'long' }) +
newdate.toLocaleString('en', { month: 'short' }) +
' ' +
newdate.toLocaleString('en', { year: 'numeric' })
)
Expand Down
93 changes: 20 additions & 73 deletions src/pages/academy/_recent-featured-posts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,17 @@ import {
StyledCategories,
BottomDescription,
SmallArticle,
SmallArticleImageWrapper,
SmallArticleCategories,
SmallArticleTopContent,
SmallArticleDateTimeDesktop,
SmallArticleDateTimeMobile,
SmallArticleLeftContent,
SmallArticleRightContent,
AllArticleButton,
RedirectLink,
ClockIcon,
DotIcon,
MobileDotIcon,
MobileHeader,
} from './components/recent-featured-posts/_style'
import { convertDate, truncateString, getAssetUrl } from 'common/utility'
import { Flex } from 'components/containers'
import { StandardImgWrapper } from './common/_styles'
import { convertDate, getAssetUrl } from 'common/utility'
import { QueryImage, Carousel, Tabs, Header } from 'components/elements'
import { localize, WithIntl, Localize } from 'components/localization'

Expand Down Expand Up @@ -119,52 +114,28 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
>
<SmallArticle>
<SmallArticleLeftContent>
<SmallArticleImageWrapper>
<StandardImgWrapper
width="143px"
height="85.8px"
tabletL_width="113px"
tabletL_height="68px"
>
<QueryImage
className="small-article-bg"
className="standard-query-img"
data={article?.main_image?.imageFile}
alt={
article?.main_image?.description ||
''
}
height="102px"
/>
</SmallArticleImageWrapper>
</StandardImgWrapper>
</SmallArticleLeftContent>
<SmallArticleRightContent>
<SmallArticleTopContent>
<Flex
jc="start"
height="unset"
laptopM={{ flexDirection: 'start' }}
>
{article.tags &&
article.tags
.slice(0, 1)
.map((tag) => (
<SmallArticleCategories
key={tag?.id}
>
{tag?.tags_id?.tag_name}
</SmallArticleCategories>
))}
</Flex>
<SmallArticleDateTimeMobile>
{article?.published_date &&
convertDate(
article?.published_date,
)}
<MobileDotIcon src={Dot} />
{article.read_time_in_minutes}{' '}
<Localize translate_text="min" />
</SmallArticleDateTimeMobile>
<Header as="p" type="paragraph-1">
{truncateString(article.blog_title, 40)}
{article.blog_title}
</Header>
</SmallArticleTopContent>
<MobileHeader as="p" type="paragraph-1">
{truncateString(article.blog_title, 40)}
</MobileHeader>
<SmallArticleDateTimeDesktop>
{article?.published_date &&
convertDate(article?.published_date)}
Expand Down Expand Up @@ -230,52 +201,28 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
>
<SmallArticle>
<SmallArticleLeftContent>
<SmallArticleImageWrapper>
<StandardImgWrapper
width="143px"
height="85.8px"
tabletL_width="113px"
tabletL_height="68px"
>
<QueryImage
className="small-article-bg"
className="standard-query-img"
data={article.main_image.imageFile}
alt={
article?.main_image?.description ||
''
}
height="102px"
/>
</SmallArticleImageWrapper>
</StandardImgWrapper>
</SmallArticleLeftContent>
<SmallArticleRightContent>
<SmallArticleTopContent>
<Flex
jc="start"
height="unset"
laptopM={{ flexDirection: 'start' }}
>
{article.tags &&
article.tags
.slice(0, 1)
.map((tag) => (
<SmallArticleCategories
key={tag?.id}
>
{tag?.tags_id?.tag_name}
</SmallArticleCategories>
))}
</Flex>
<SmallArticleDateTimeMobile>
{article?.published_date &&
convertDate(
article?.published_date,
)}
<MobileDotIcon src={Dot} />
{article.read_time_in_minutes}{' '}
<Localize translate_text="min" />
</SmallArticleDateTimeMobile>
<Header as="p" type="paragraph-1">
{truncateString(article.blog_title, 40)}
{article.blog_title}
</Header>
</SmallArticleTopContent>
<MobileHeader as="p" type="paragraph-1">
{truncateString(article.blog_title, 40)}
</MobileHeader>
<SmallArticleDateTimeDesktop>
{article?.published_date &&
convertDate(article?.published_date)}
Expand Down
19 changes: 5 additions & 14 deletions src/pages/academy/blog/_article-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { getImage } from 'gatsby-plugin-image'
import styled from 'styled-components'
import { StandardImgWrapper } from '../common/_styles'
import { Flex } from 'components/containers'
import { Header, QueryImage } from 'components/elements'
import { LocalizedLink } from 'components/localization'
Expand All @@ -26,17 +27,9 @@ const ArticleCardWrapper = styled(Flex)`
&:hover {
transform: translateY(-1.1rem) scale(1.02);
}
`

const ImageWrapper = styled.div`
width: 384px;
height: 200px;
position: relative;
z-index: 1;
overflow: hidden;

@media ${device.mobileL} {
width: 100%;
min-height: unset;
}
`

Expand All @@ -57,7 +50,6 @@ const ContentWrapper = styled.div`
padding: 16px;
}
`

const RedirectLink = styled(LocalizedLink)`
text-decoration: none;
`
Expand All @@ -66,14 +58,13 @@ const ArticleCard = ({ item }) => {
return (
<RedirectLink to={`/academy/blog/posts/${item.slug}`}>
<ArticleCardWrapper>
<ImageWrapper>
<StandardImgWrapper width="384px" height="auto" br="unset" tabletL_br="unset">
<QueryImage
data={getImage(item.main_image.imageFile)}
alt={item.main_image.description || ''}
height="200px"
weight="384px"
className="standard-query-img"
/>
</ImageWrapper>
</StandardImgWrapper>

<ContentWrapper>
<Flex jc="flex-start" height="auto" fw="wrap">
Expand Down
21 changes: 4 additions & 17 deletions src/pages/academy/blog/_first-article.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { getImage } from 'gatsby-plugin-image'
import styled from 'styled-components'
import { StandardImgWrapper } from '../common/_styles'
import { Flex } from 'components/containers'
import { Header, QueryImage } from 'components/elements'
import { LocalizedLink } from 'components/localization'
Expand Down Expand Up @@ -34,20 +35,6 @@ const StyledFlex = styled(Flex)`
margin-top: 40px;
}
`
const ImageWrapper = styled.div`
display: flex;
height: 300px;
width: 55%;

@media (max-width: 823px) {
width: 100%;
height: unset;
}

> .first-article-image {
display: contents;
}
`

const StyledCategories = styled(Header)`
width: fit-content;
Expand All @@ -73,14 +60,14 @@ const FirstArticle = ({ item }) => {
return (
<RedirectLink to={`/academy/blog/posts/${item.slug}/`}>
<StyledFlex jc="flex-start" mt="96px">
<ImageWrapper>
<StandardImgWrapper width="592px" br="6px">
<QueryImage
data={getImage(item.main_image.imageFile)}
alt={item.main_image.description || ''}
width="100%"
className="first-article-image"
className="standard-query-img"
/>
</ImageWrapper>
</StandardImgWrapper>
<FirstContentWrapper fd="column" p="35px 40px" width="45%">
<Flex jc="flex-start" height="auto" fw="wrap">
{item?.tags &&
Expand Down
16 changes: 15 additions & 1 deletion src/pages/academy/blog/posts/_style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,23 @@ export const HeroImageContainer = styled(Box)`
position: absolute;
top: 10%;
right: 0%;
max-height: 532px;
overflow: hidden;
width: 100%;

::before {
content: '';
float: left;
padding-bottom: 60%; /* aspect-ratio 5:3 */
}
.standard-query-img {
width: 100%;
height: auto;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
@media (max-width: 1300px) {
position: relative;
top: unset;
Expand Down
48 changes: 48 additions & 0 deletions src/pages/academy/common/_styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,51 @@ export const VideoGrid = styled.div`
grid-template-rows: auto;
justify-content: center;
`

export const StandardImgWrapper = styled.div`
width: ${(props) => (props.width ? props.width : '100%')};
height: ${(props) => (props.height ? props.height : '100%')};
border-radius: ${(props) => (props.br ? props.br : '4px')};
overflow: hidden;
position: relative;
text-align: center;

::before {
content: '';
float: left;
padding-bottom: 60%; /* aspect-ratio 5:3 */
}
&img,
.standard-query-img {
width: 100%;
height: auto;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}

@media ${device.tabletL} {
width: ${(props) => (props.tabletL_width ? props.tabletL_width : '100%')};
height: ${(props) => (props.tabletL_height ? props.tabletL_height : '100%')};
border-radius: ${(props) => (props.tabletL_br ? props.tabletL_br : '4px')};
}

@media ${device.mobileL} {
width: ${(props) =>
props.mobileL_width
? props.mobileL_width
: props.tabletL_width
? props.tabletL_width
: '100%'};
height: ${(props) =>
props.mobileL_height
? props.mobileL_height
: props.tabletL_height
? props.tabletL_height
: '100%'};
border-radius: ${(props) =>
props.mobileL_br ? props.mobileL_br : props.tabletL_br ? props.tabletL_br : '4px'};
}
`
Loading