Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(home): improve the featured slider and sponsored preview #59

Merged
merged 5 commits into from
Dec 9, 2020
Merged

feat(home): improve the featured slider and sponsored preview #59

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
29c723a
feat(article): improve the sponsored by content
mheob Dec 9, 2020
3b79464
feat(home): improve the content of the featured slider
mheob Dec 9, 2020
a206079
test(home): fix rounding error of `inactiveDotScale`
mheob Dec 9, 2020
1d42685
test(home): fix coverage issue at the `onSnapToItem` function
mheob Dec 9, 2020
063ae88
test(home): remove the `inactiveDotScale` to prevent precision issues
mheob Dec 9, 2020
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
Next Next commit
feat(article): improve the sponsored by content 
Move the title below the image and place the sponsored by content more prominent.
  • Loading branch information
@mheob
mheob committed Dec 9, 2020
commit 29c723afbe29786cc747076e825758e027b3b00c
54 changes: 25 additions & 29 deletions src/components/Articles/ArticlePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import Touchable from '@components/UI/Touchable'
import { HomeStackParamList } from '@navigations/HomeNavigator'
import { CategoriesStackParamList } from '@navigations/CategoriesNavigator'
import { getLocaleLongDate } from '@utils/date-time'
import { hexToRgb } from '@utils/styling'
import { Article } from '@models/article'
import { colors, defaultStyles, DefaultStyles, fonts } from '@styles/theme'

Expand Down Expand Up @@ -56,20 +55,28 @@ const ArticlePreview: React.FC<Props> = ({ article, hasImage = true, ignoreSpons
<View style={styles.sponsoredArticleContainer} testID="sponsored-article">
<ImageBackground
source={{ uri: article.featured_image_medium }}
style={isSponsored() ? styles.backgroundImage : styles.backgroundImagePinned}
style={styles.backgroundImage}
imageStyle={{ borderRadius: 15 }}
>
{isSponsored() && (
<View style={styles.sponsoredTextContainer} testID="sponsored-text-container">
<Text style={styles.sponsoredText}>
Sponsored by <Text style={{ fontFamily: fonts.sansBold }}>{article.acf?.sponsored_by}</Text>
Sponsored by{' '}
<Text
style={{
color: colors.grayLight,
fontFamily: fonts.sansBold,
}}
>
{article.acf?.sponsored_by}
</Text>
</Text>
</View>
)}
<View style={styles.sponsoredTitleContainer}>
<HTML baseFontStyle={styles.sponsoredTitle} html={article.title.rendered} />
</View>
</ImageBackground>
<View style={styles.sponsoredTitleContainer}>
<HTML baseFontStyle={styles.sponsoredTitle} html={article.title.rendered} />
</View>
</View>
</Touchable>
)
Expand All @@ -78,7 +85,6 @@ const ArticlePreview: React.FC<Props> = ({ article, hasImage = true, ignoreSpons
}

interface Styles extends DefaultStyles {
backgroundImagePinned: ViewStyle
articleContainer: ViewStyle
imageColumn: ViewStyle
image: ImageStyle | ViewStyle
Expand All @@ -94,11 +100,7 @@ const styles = StyleSheet.create<Styles>({
...defaultStyles,
backgroundImage: {
...defaultStyles.backgroundImage,
justifyContent: 'space-between',
},
backgroundImagePinned: {
...defaultStyles.backgroundImage,
justifyContent: 'flex-end',
height: Dimensions.get('screen').width - 100,
},
articleContainer: {
flexDirection: 'row',
Expand Down Expand Up @@ -126,35 +128,29 @@ const styles = StyleSheet.create<Styles>({
color: colors.primaryColor,
},
sponsoredArticleContainer: {
padding: 10,
height: Dimensions.get('screen').width - 10,
padding: 15,
borderRadius: 10,
},
sponsoredTextContainer: {
alignItems: 'flex-end',
backgroundColor: `rgba(${hexToRgb(colors.grayLight)}, 0.7)`,
paddingHorizontal: 30,
backgroundColor: colors.primaryColor,
marginTop: 50,
marginLeft: -15,
paddingHorizontal: 10,
paddingVertical: 10,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
maxWidth: '70%',
},
sponsoredText: {
color: colors.grayLight,
fontSize: 14,
lineHeight: 14 * 1.25,
textAlign: 'right',
},
sponsoredTitleContainer: {
justifyContent: 'flex-end',
backgroundColor: `rgba(${hexToRgb(colors.grayLight)}, 0.7)`,
paddingHorizontal: 30,
paddingVertical: 10,
borderBottomLeftRadius: 15,
borderBottomRightRadius: 15,
padding: 15,
},
sponsoredTitle: {
fontSize: 14,
lineHeight: 14 * 1.25,
fontFamily: fonts.sans,
fontSize: 20,
lineHeight: 20 * 1.25,
fontFamily: fonts.serifBold,
},
})

Expand Down
2 changes: 1 addition & 1 deletion src/components/Articles/__tests__/ArticlePreview.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe('<ArticleList />', () => {

it('renders a sponsored preview as a pinned article', () => {
const { getByTestId } = render(<ArticlePreview article={articlePinned} />)
expect(getByTestId('sponsored-article').children).toHaveLength(1)
expect(getByTestId('sponsored-article').children).toHaveLength(2)
})

it('has no image and renders a View with three texts instead', () => {
Expand Down
80 changes: 37 additions & 43 deletions src/components/Articles/__tests__/__snapshots__/ArticleList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,7 @@ exports[`<ArticleList /> renders correctly 1`] = `
style={
Object {
"borderRadius": 10,
"height": 740,
"padding": 10,
"padding": 15,
}
}
testID="sponsored-article"
Expand All @@ -99,7 +98,7 @@ exports[`<ArticleList /> renders correctly 1`] = `
style={
Object {
"flex": 1,
"justifyContent": "space-between",
"height": 650,
"resizeMode": "cover",
}
}
Expand All @@ -120,7 +119,7 @@ exports[`<ArticleList /> renders correctly 1`] = `
"top": 0,
},
Object {
"height": undefined,
"height": 650,
"width": undefined,
},
Object {
Expand All @@ -132,11 +131,11 @@ exports[`<ArticleList /> renders correctly 1`] = `
<View
style={
Object {
"alignItems": "flex-end",
"backgroundColor": "rgba(223, 227, 232, 0.7)",
"borderTopLeftRadius": 15,
"borderTopRightRadius": 15,
"paddingHorizontal": 30,
"backgroundColor": "#333333",
"marginLeft": -15,
"marginTop": 50,
"maxWidth": "70%",
"paddingHorizontal": 10,
"paddingVertical": 10,
}
}
Expand All @@ -145,19 +144,19 @@ exports[`<ArticleList /> renders correctly 1`] = `
<Text
style={
Object {
"color": "#333333",
"color": "#dfe3e8",
"fontFamily": "sans",
"fontSize": 14,
"lineHeight": 17.5,
"textAlign": "right",
}
}
>
Sponsored by
Sponsored by

<Text
style={
Object {
"color": "#333333",
"color": "#dfe3e8",
"fontFamily": "sans-bold",
"fontSize": 15,
"lineHeight": 22.5,
Expand All @@ -168,45 +167,40 @@ exports[`<ArticleList /> renders correctly 1`] = `
</Text>
</Text>
</View>
<View
style={
Object {
"backgroundColor": "rgba(223, 227, 232, 0.7)",
"borderBottomLeftRadius": 15,
"borderBottomRightRadius": 15,
"justifyContent": "flex-end",
"paddingHorizontal": 30,
"paddingVertical": 10,
}
</View>
<View
style={
Object {
"padding": 15,
}
}
>
<View
style={Object {}}
>
<View
style={Object {}}
<Text
allowFontScaling={true}
selectable={false}
style={
Array [
Object {},
Object {},
]
}
>
<Text
allowFontScaling={true}
selectable={false}
style={
Array [
Object {},
Object {},
]
Object {
"fontFamily": "serif-bold",
"fontSize": 20,
"lineHeight": 25,
}
}
>
<Text
allowFontScaling={true}
style={
Object {
"fontFamily": "sans",
"fontSize": 14,
"lineHeight": 17.5,
}
}
>
„New Normal“ bei Leonardo Hotels – mit neuen MICE-Formaten und Konzepten
</Text>
„New Normal“ bei Leonardo Hotels – mit neuen MICE-Formaten und Konzepten
</Text>
</View>
</Text>
</View>
</View>
</View>
Expand Down
80 changes: 37 additions & 43 deletions src/components/Articles/__tests__/__snapshots__/ArticlePreview.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ exports[`<ArticleList /> renders correctly 1`] = `
style={
Object {
"borderRadius": 10,
"height": 740,
"padding": 10,
"padding": 15,
}
}
testID="sponsored-article"
Expand All @@ -32,7 +31,7 @@ exports[`<ArticleList /> renders correctly 1`] = `
style={
Object {
"flex": 1,
"justifyContent": "space-between",
"height": 650,
"resizeMode": "cover",
}
}
Expand All @@ -53,7 +52,7 @@ exports[`<ArticleList /> renders correctly 1`] = `
"top": 0,
},
Object {
"height": undefined,
"height": 650,
"width": undefined,
},
Object {
Expand All @@ -65,11 +64,11 @@ exports[`<ArticleList /> renders correctly 1`] = `
<View
style={
Object {
"alignItems": "flex-end",
"backgroundColor": "rgba(223, 227, 232, 0.7)",
"borderTopLeftRadius": 15,
"borderTopRightRadius": 15,
"paddingHorizontal": 30,
"backgroundColor": "#333333",
"marginLeft": -15,
"marginTop": 50,
"maxWidth": "70%",
"paddingHorizontal": 10,
"paddingVertical": 10,
}
}
Expand All @@ -78,19 +77,19 @@ exports[`<ArticleList /> renders correctly 1`] = `
<Text
style={
Object {
"color": "#333333",
"color": "#dfe3e8",
"fontFamily": "sans",
"fontSize": 14,
"lineHeight": 17.5,
"textAlign": "right",
}
}
>
Sponsored by
Sponsored by

<Text
style={
Object {
"color": "#333333",
"color": "#dfe3e8",
"fontFamily": "sans-bold",
"fontSize": 15,
"lineHeight": 22.5,
Expand All @@ -101,45 +100,40 @@ exports[`<ArticleList /> renders correctly 1`] = `
</Text>
</Text>
</View>
<View
style={
Object {
"backgroundColor": "rgba(223, 227, 232, 0.7)",
"borderBottomLeftRadius": 15,
"borderBottomRightRadius": 15,
"justifyContent": "flex-end",
"paddingHorizontal": 30,
"paddingVertical": 10,
}
</View>
<View
style={
Object {
"padding": 15,
}
}
>
<View
style={Object {}}
>
<View
style={Object {}}
<Text
allowFontScaling={true}
selectable={false}
style={
Array [
Object {},
Object {},
]
}
>
<Text
allowFontScaling={true}
selectable={false}
style={
Array [
Object {},
Object {},
]
Object {
"fontFamily": "serif-bold",
"fontSize": 20,
"lineHeight": 25,
}
}
>
<Text
allowFontScaling={true}
style={
Object {
"fontFamily": "sans",
"fontSize": 14,
"lineHeight": 17.5,
}
}
>
„New Normal“ bei Leonardo Hotels – mit neuen MICE-Formaten und Konzepten
</Text>
„New Normal“ bei Leonardo Hotels – mit neuen MICE-Formaten und Konzepten
</Text>
</View>
</Text>
</View>
</View>
</View>
Expand Down
Loading