style tweaks

This commit is contained in:
sunda 2021-10-23 21:43:57 +02:00
parent 36fd61d3ac
commit b932d96d80
6 changed files with 27 additions and 28 deletions

View File

@ -5,7 +5,7 @@ import { H2, H3, Label } from '../Text'
import strings from '../../data/strings' import strings from '../../data/strings'
import { andList } from '../../helpers/string' import { andList } from '../../helpers/string'
import { colours } from '../../assets/theme' import { colours } from '../../assets/theme'
import { Img, Left, Right, Title, Row, Column, StyledButton as Button } from './styles' import { Img, Left, Right, Center, Title, Row, Column, StyledButton as Button } from './styles'
import { useEventApi } from '../../hooks/data' import { useEventApi } from '../../hooks/data'
const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => { const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => {
@ -18,20 +18,19 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => {
return ( return (
<Row align="stretch" {...rest}> <Row align="stretch" {...rest}>
<Left > <Left>
<Link to={`/series/${series.slug}#${id}`}><Img src={image} /></Link> <Link to={`/series/${series.slug}#${id}`}><Img src={image} /></Link>
<Column justify="space-between" flex={1}> <Button>Play now</Button>
</Left>
<Center justify="space-betweeen">
<Title size={24} colour={colours.rose} weight="500">{title}</Title> <Title size={24} colour={colours.rose} weight="500">{title}</Title>
<div> <div>
<H3 weight="500" colour={colours.rose}>From: <Link textProps={{
<H3 weight="500">From: <Link textProps={{
weight: '700' weight: '700'
}} to={`/series/${series.slug}`}>{`${series.title}: ${series.subtitle}`}</Link></H3> }} to={`/series/${series.slug}`}>{`${series.title}: ${series.subtitle}`}</Link></H3>
{hosts ? <Label size={16} colour={colours.rose}> {andList(hosts)}</Label> : null} {hosts ? <Label size={16} colour={colours.rose}> {andList(hosts)}</Label> : null}
</div> </div>
<Button>Play now</Button> </Center>
</Column>
</Left>
<Right> <Right>
<Label size={24} colour={colours.rose} weight="600">{startTime}</Label> <Label size={24} colour={colours.rose} weight="600">{startTime}</Label>
</Right> </Right>

View File

@ -8,32 +8,36 @@ export const Row = styled(FlexRow)`
` `
export const Column = styled(FlexColumn)` export const Column = styled(FlexColumn)`
height: 100%; `
max-width: 50%;
`
export const Left = styled(FlexRow)` export const Left = styled(FlexColumn)`
margin-right: 1em;
`
export const Center = styled(FlexColumn)`
max-width: 60%;
` `
export const Title = styled(H2)` export const Title = styled(H2)`
/* max-width: 50% */ margin-bottom: 1em;
` `
export const Right = styled.div` export const Right = styled.div`
flex: 1;
text-align: right;
` `
export const StyledButton = styled(Button)` export const StyledButton = styled(Button)`
width: max-content; /* width: max-content; */
margin-top: 0.5em;
padding: 0.3em 2em; padding: 0.3em 2em;
` `
export const Img = styled.div` export const Img = styled.div`
background: url(${({ src }) => src}); background: url(${({ src }) => src});
width: 380px; width: 25vw;
height: 215px; /* height: 215px; */
padding-bottom: calc((9 / 16) * 100%);
background-size: cover; background-size: cover;
position: relative; position: relative;
background-position: center; background-position: center;
margin-right: 1em;
` `

View File

@ -64,7 +64,6 @@ const Video = ({ video, org, setInfoActive }) => {
} }
const toggleVideo = () => { const toggleVideo = () => {
console.log('clicked')
if (isPlaying) { if (isPlaying) {
pauseVideo() pauseVideo()
} else { } else {

View File

@ -4,7 +4,6 @@ import { string } from 'prop-types'
import { Iframe } from './styles' import { Iframe } from './styles'
const VideoEmbed = ({ url, ...rest }) => { const VideoEmbed = ({ url, ...rest }) => {
console.log({ url })
const id = url.split('/').pop() const id = url.split('/').pop()
const src = `https://tv.undersco.re/videos/embed/${id}?title=0&warningTitle=0&peertubeLink=0` const src = `https://tv.undersco.re/videos/embed/${id}?title=0&warningTitle=0&peertubeLink=0`
return ( return (

View File

@ -27,7 +27,6 @@ export const getScheduleFromData = data => data.filter(item => {
export const formatDay = (dateTime, lang = 'en') => { export const formatDay = (dateTime, lang = 'en') => {
let day = '' let day = ''
const date = new Date(dateTime) const date = new Date(dateTime)
console.log({ date })
if (isToday(date)) day = strings[lang].today if (isToday(date)) day = strings[lang].today
if (isTomorrow(date)) day = strings[lang].tomorrow if (isTomorrow(date)) day = strings[lang].tomorrow
else day = format(date, 'cccc MMM d') else day = format(date, 'cccc MMM d')

View File

@ -15,7 +15,6 @@ const Program = () => {
const { data } = useEventApi() const { data } = useEventApi()
const episodes = getScheduleFromData(data.episodes) const episodes = getScheduleFromData(data.episodes)
console.log({ episodes })
return ( return (
<Page title={strings.en.program}> <Page title={strings.en.program}>