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 { andList } from '../../helpers/string'
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'
const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => {
@ -20,18 +20,17 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => {
<Row align="stretch" {...rest}>
<Left>
<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>
<div>
<H3 weight="500">From: <Link textProps={{
<H3 weight="500" colour={colours.rose}>From: <Link textProps={{
weight: '700'
}} to={`/series/${series.slug}`}>{`${series.title}: ${series.subtitle}`}</Link></H3>
{hosts ? <Label size={16} colour={colours.rose}> {andList(hosts)}</Label> : null}
</div>
<Button>Play now</Button>
</Column>
</Left>
</Center>
<Right>
<Label size={24} colour={colours.rose} weight="600">{startTime}</Label>
</Right>

View File

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

View File

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

View File

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

View File

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

View File

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