Skip to content
This repository has been archived by the owner on Jan 1, 2022. It is now read-only.

Commit

Permalink
Banner image in /teams (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kuboczoch
Kuboczoch authored Oct 2, 2021
1 parent b29bb0b commit f46a503
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 44 deletions.
11 changes: 10 additions & 1 deletion @types/generated/contentful.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export interface IContentPageFields {
metaTags?: IMetaTag[] | undefined

/** Content */
content: Document
content?: Document | undefined
}

export interface IContentPage extends Entry<IContentPageFields> {
Expand Down Expand Up @@ -130,6 +130,9 @@ export interface IWarTeamFields {

/** Members */
members: string[]

/** Banner */
banner?: Asset | undefined
}

export interface IWarTeam extends Entry<IWarTeamFields> {
Expand All @@ -156,11 +159,17 @@ export interface IWarTeamsPageFields {
/** GroupA */
groupA: IWarTeam[]

/** Group A banner */
groupABanner?: Asset | undefined

/** Group B name */
groupBName: string

/** GroupB */
groupB: IWarTeam[]

/** Group B banner */
groupBBanner?: Asset | undefined
}

export interface IWarTeamsPage extends Entry<IWarTeamsPageFields> {
Expand Down
29 changes: 21 additions & 8 deletions src/components/elements/WarTeam/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,35 @@
import { css } from '@emotion/css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFortAwesome } from '@fortawesome/free-brands-svg-icons'
import React from 'react'
import { IWarTeam } from '../../../../@types/generated/contentful'
import theme from '../../../assets/theme'
import ContentfulImage from '../../../utils/contentful/ContentfulImage'

const WarTeam = (props: IWarTeam) => (
<div
className={css`
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: 60px 1fr;
grid-template-areas:
'banner title'
'banner nicknames';
justify-content: center;
padding: 0 32px;
@media (max-width: ${theme.breakpoints.lg}) {
padding: 0;
}
`}
>
<div
className={css`
grid-area: banner;
`}
>
{props.fields.banner ? <ContentfulImage {...props.fields.banner} /> : <div />}
</div>
<span
className={css`
grid-area: title;
position: relative;
text-align: center;
padding: 4px 16px 6px;
Expand All @@ -34,14 +50,11 @@ const WarTeam = (props: IWarTeam) => (
}
`}
>
<FontAwesomeIcon
icon={faFortAwesome}
style={{ marginRight: '4px', height: '20px', width: '20px', marginTop: '-5px' }}
/>
{props.fields.title}
</span>
<div
className={css`
grid-area: nicknames;
display: flex;
column-gap: 6px;
row-gap: 6px;
Expand Down
101 changes: 66 additions & 35 deletions src/containers/WarTeamsPage/WarTeamsPageView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { TypographyP } from '../../components/elements/Typography'
import DesktopContainer from '../../components/elements/DesktopContainer'
import MobileContainer from '../../components/elements/MobileContainer'
import theme from '../../assets/theme'
import ContentfulImage from '../../utils/contentful/ContentfulImage'
import GuildTitle from './components/GuildTitle'

interface IWarTeamsPageViewProps extends IWarTeamsPageProps, IWarTeamsPageStateProps {}

Expand All @@ -27,7 +29,7 @@ const WarTeamsPageView = (props: IWarTeamsPageViewProps) => (
<ContentPage.DocumentContainer>
<ContentPage.Title>{props.contentPage.fields.title}</ContentPage.Title>
{documentToReactComponents(props.contentPage.fields.content, options)}
<DesktopContainer breakpoint={theme.breakpoints.md}>
<DesktopContainer breakpoint={theme.breakpoints.lg}>
<Columns
className={css`
position: relative;
Expand All @@ -44,28 +46,42 @@ const WarTeamsPageView = (props: IWarTeamsPageViewProps) => (
background: ${theme.colors.warSecondary};
opacity: 0.25;
@media (max-width: ${theme.breakpoints.md}) {
@media (max-width: ${theme.breakpoints.lg}) {
display: none;
}
}
`}
>
<TypographyP
className={css`
text-align: center;
font-size: 24px;
`}
>
{props.warTeamsPage.fields.groupAName}
</TypographyP>
<TypographyP
className={css`
text-align: center;
font-size: 24px;
`}
>
{props.warTeamsPage.fields.groupBName}
</TypographyP>
<GuildTitle>
{props.warTeamsPage.fields.groupABanner ? (
<ContentfulImage {...props.warTeamsPage.fields.groupABanner} />
) : (
<div />
)}
<TypographyP
className={css`
text-align: center;
font-size: 24px;
`}
>
{props.warTeamsPage.fields.groupAName}
</TypographyP>
</GuildTitle>
<GuildTitle>
{props.warTeamsPage.fields.groupBBanner ? (
<ContentfulImage {...props.warTeamsPage.fields.groupBBanner} />
) : (
<div />
)}
<TypographyP
className={css`
text-align: center;
font-size: 24px;
`}
>
{props.warTeamsPage.fields.groupBName}
</TypographyP>
</GuildTitle>
{Array.from(
Array(
props.warTeamsPage.fields.groupA.length > props.warTeamsPage.fields.groupB.length
Expand All @@ -84,28 +100,36 @@ const WarTeamsPageView = (props: IWarTeamsPageViewProps) => (
))}
</Columns>
</DesktopContainer>
<MobileContainer>
<MobileContainer breakpoint={theme.breakpoints.lg}>
<Columns
className={css`
position: relative;
grid-column-gap: 16px;
grid-row-gap: 64px;
`}
columns={'1fr'}
>
<Columns
columns={'1fr'}
className={css`
grid-row-gap: 8px;
`}
>
<TypographyP
className={css`
text-align: center;
font-size: 24px;
`}
>
{props.warTeamsPage.fields.groupAName}
</TypographyP>
<GuildTitle>
{props.warTeamsPage.fields.groupABanner ? (
<ContentfulImage {...props.warTeamsPage.fields.groupABanner} />
) : (
<div />
)}
<TypographyP
className={css`
text-align: center;
font-size: 24px;
`}
>
{props.warTeamsPage.fields.groupAName}
</TypographyP>
</GuildTitle>
{props.warTeamsPage.fields.groupA?.map((team) => (
<WarTeam key={team.sys.id} {...team} />
))}
Expand All @@ -116,14 +140,21 @@ const WarTeamsPageView = (props: IWarTeamsPageViewProps) => (
grid-row-gap: 8px;
`}
>
<TypographyP
className={css`
text-align: center;
font-size: 24px;
`}
>
{props.warTeamsPage.fields.groupBName}
</TypographyP>
<GuildTitle>
{props.warTeamsPage.fields.groupBBanner ? (
<ContentfulImage {...props.warTeamsPage.fields.groupBBanner} />
) : (
<div />
)}
<TypographyP
className={css`
text-align: center;
font-size: 24px;
`}
>
{props.warTeamsPage.fields.groupBName}
</TypographyP>
</GuildTitle>
{props.warTeamsPage.fields.groupB?.map((team) => (
<WarTeam key={team.sys.id} {...team} />
))}
Expand Down
20 changes: 20 additions & 0 deletions src/containers/WarTeamsPage/components/GuildTitle.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import styled from '@emotion/styled'
import theme from '../../../assets/theme'

const GuildTitle = styled('div')`
display: grid;
align-items: center;
grid-template-columns: 60px 1fr;
margin: 0 32px;
padding-bottom: 8px;
grid-column-gap: 8px;
border-bottom: 1px solid rgba(235, 239, 255, 0.25);
@media (max-width: ${theme.breakpoints.lg}) {
margin: 0;
padding-bottom: 8px;
border-bottom: 1px solid rgba(235, 239, 255, 0.25);
}
`

export default GuildTitle

0 comments on commit f46a503

Please sign in to comment.