From b932d96d807082cc0bde4e81c5e9f3f6196a6f94 Mon Sep 17 00:00:00 2001 From: sunda <> Date: Sat, 23 Oct 2021 21:43:57 +0200 Subject: [PATCH] style tweaks --- src/components/EpisodeCard/index.js | 25 ++++++++++++------------- src/components/EpisodeCard/styles.js | 26 +++++++++++++++----------- src/components/Video/index.js | 1 - src/components/VideoEmbed/index.js | 1 - src/pages/Program/helpers.js | 1 - src/pages/Program/index.js | 1 - 6 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src/components/EpisodeCard/index.js b/src/components/EpisodeCard/index.js index 51328cd..4ec8b3b 100644 --- a/src/components/EpisodeCard/index.js +++ b/src/components/EpisodeCard/index.js @@ -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 }) => { @@ -18,20 +18,19 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => { return ( - + - - {title} -
- -

From: {`${series.title}: ${series.subtitle}`}

- {hosts ? : null} -
- -
+
+
+ {title} +
+

From: {`${series.title}: ${series.subtitle}`}

+ {hosts ? : null} +
+
diff --git a/src/components/EpisodeCard/styles.js b/src/components/EpisodeCard/styles.js index fa1d461..efb3a99 100644 --- a/src/components/EpisodeCard/styles.js +++ b/src/components/EpisodeCard/styles.js @@ -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; ` \ No newline at end of file diff --git a/src/components/Video/index.js b/src/components/Video/index.js index b63e742..6d657b9 100644 --- a/src/components/Video/index.js +++ b/src/components/Video/index.js @@ -64,7 +64,6 @@ const Video = ({ video, org, setInfoActive }) => { } const toggleVideo = () => { - console.log('clicked') if (isPlaying) { pauseVideo() } else { diff --git a/src/components/VideoEmbed/index.js b/src/components/VideoEmbed/index.js index 35b2e2a..279908d 100644 --- a/src/components/VideoEmbed/index.js +++ b/src/components/VideoEmbed/index.js @@ -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 ( diff --git a/src/pages/Program/helpers.js b/src/pages/Program/helpers.js index 53eef37..6f1f9aa 100644 --- a/src/pages/Program/helpers.js +++ b/src/pages/Program/helpers.js @@ -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') diff --git a/src/pages/Program/index.js b/src/pages/Program/index.js index c9bcbed..b054ff0 100644 --- a/src/pages/Program/index.js +++ b/src/pages/Program/index.js @@ -15,7 +15,6 @@ const Program = () => { const { data } = useEventApi() const episodes = getScheduleFromData(data.episodes) - console.log({ episodes }) return (