style: podcasts page responsiveness

src/components/Podcasts/Podcast.Section.tsx

@@ -13,4 +13,9 @@ export default function PodcastSection({ children, marginTop = 140 }: Props) {
 const Section = styled.div<{ marginTop: number }>`
   margin-top: ${(props) => props.marginTop}px;
   border-top: 1px solid rgb(var(--lsd-border-primary));
+
+  @media (max-width: 768px) {
+    margin-top: 80px;
+    margin-bottom: 80px;
+  }
 `

src/components/Podcasts/Podcasts.Lists.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled'
 import { LPE } from '../../types/lpe.types'
-import { Button, Typography } from '@acid-info/lsd-react'
+import { ArrowDownIcon, Badge, Button, Typography } from '@acid-info/lsd-react'
 import Link from 'next/link'
-import PodcastHost from './Podcast.Host'
 import Image from 'next/image'
 import { Grid, GridItem } from '../Grid/Grid'
 
@@ -17,27 +16,46 @@ export default function PodcastsLists({ shows }: Props) {
         shows.map((show) => (
           <ShowCardContainer key={show.id} className="w-8">
             <ShowCard>
-              <Image
+              <Top>
-                src={show.logo.url}
+                <ShowInfoContainer>
-                width={56}
+                  <Image
-                height={56}
+                    src={show.logo.url}
-                alt={show.logo.alt}
+                    width={38}
-              />
+                    height={38}
-              <Typography variant="h3">{show.title}</Typography>
+                    alt={show.logo.alt}
-              <Row>
+                  />
-                <PodcastHost show={show} />
+                  <ShowInfo>
-                <Typography variant="body2">•</Typography>
+                    <Typography variant="body2">{show.title}</Typography>
-                <Typography variant="body2">
+                    <Typography variant="body3">
-                  {show.numberOfEpisodes} EP
+                      {show.numberOfEpisodes} EP
-                </Typography>
+                    </Typography>
-              </Row>
+                  </ShowInfo>
-              <Description
+                </ShowInfoContainer>
-                variant="body2"
+                <ShowButtonLink href={`/podcasts/${show.slug}`}>
-                dangerouslySetInnerHTML={{ __html: show.description }}
+                  <ShowButton>
-              />
+                    <ShowButtonText variant="body3">
-              <Link href={`/podcasts/${show.slug}`}>
+                      Podcast page
-                <Button>Go to the show page</Button>
+                    </ShowButtonText>
-              </Link>
+                    <ArrowDownIcon />
+                  </ShowButton>
+                </ShowButtonLink>
+              </Top>
+              <Bottom>
+                <Description
+                  dangerouslySetInnerHTML={{ __html: show.description }}
+                />
+                {/* @ts-ignore */}
+                {shows?.tags && (
+                  <BadgeContainer>
+                    {/* @ts-ignore */}
+                    {show.tags.map((tag) => (
+                      <Badge key={tag} size="small">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </BadgeContainer>
+                )}
+              </Bottom>
             </ShowCard>
           </ShowCardContainer>
         ))}
@@ -50,6 +68,7 @@ const PodcastListsContainer = styled(Grid)`
 
   @media (max-width: 768px) {
     flex-direction: column;
+    gap: 24px;
   }
 `
 
@@ -62,12 +81,81 @@ const ShowCard = styled.div`
   border: 1px solid rgb(var(--lsd-text-primary));
 `
 
+const ShowInfoContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`
+
+const ShowInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`
+
 const Row = styled.div`
   display: flex;
   gap: 8px;
   margin-bottom: 16px;
 `
 
-const Description = styled(Typography)`
+const Top = styled(Row)`
-  margin-bottom: 16px;
+  justify-content: space-between;
+`
+
+const Bottom = styled.div`
+  margin-top: 88px;
+
+  @media (max-width: 768px) {
+    margin-top: 64px;
+  }
+`
+
+const Description = styled(Typography)`
+  font-size: var(--lsd-h6-fontSize);
+
+  @media (max-width: 768px) {
+    font-size: var(--lsd-body1-fontSize);
+  }
+`
+
+const ShowButtonLink = styled(Link)`
+  text-decoration: none;
+`
+
+const ShowButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  padding: 6px 10px 6px 12px;
+  width: 122px;
+  height: 28px;
+  gap: 12px;
+
+  > span {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  svg {
+    transform: rotate(-90deg);
+  }
+
+  @media (max-width: 768px) {
+    width: 28px;
+    height: 28px;
+    padding: 7px;
+  }
+`
+
+const ShowButtonText = styled(Typography)`
+  @media (max-width: 768px) {
+    display: none;
+  }
+`
+
+const BadgeContainer = styled.div`
+  margin-top: 24px;
+  display: flex;
+  gap: 8px;
 `

src/containers/PodcastsContainer.tsx

@@ -7,6 +7,9 @@ import { Button, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import Link from 'next/link'
 import { LPE } from '../types/lpe.types'
+import { uiConfigs } from '@/configs/ui.configs'
+import { useWindowSize } from 'react-use'
+import Image from 'next/image'
 
 interface Props {
   shows: LPE.Podcast.Show[]
@@ -16,6 +19,9 @@ interface Props {
 const PodcastsContainer = (props: Props) => {
   const { shows, highlightedEpisodes } = props
 
+  const { width } = useWindowSize()
+  const isMobile = width < 768 // TODO : use global breakpoint + use media query if cols is not needed
+
   return (
     <PodcastsGrid>
       <PodcastsBodyContainer className={'w-16'}>
@@ -23,13 +29,13 @@ const PodcastsContainer = (props: Props) => {
 
         <PodcastSection>
           <EpisodesList
-            cols={2}
+            cols={isMobile ? 1 : 2}
             size="medium"
             episodes={highlightedEpisodes.slice(0, 2)}
             header={<EpisodeListHeader>Latest Episodes</EpisodeListHeader>}
           />
           <EpisodesList
-            cols={4}
+            cols={isMobile ? 1 : 4}
             size="small"
             bordered
             episodes={highlightedEpisodes.slice(2)}
@@ -42,7 +48,12 @@ const PodcastsContainer = (props: Props) => {
               header={
                 <EpisodeListHeader>
                   <Show>
-                    <LogosCircleIcon width={38} height={38} />
+                    <Image
+                      src={show.logo.url}
+                      alt={show.logo.alt}
+                      width={38}
+                      height={38}
+                    />
                     <PodcastInfo>
                       <Typography variant="body1">{show.title}</Typography>
                       <Typography variant="body3">
@@ -55,6 +66,7 @@ const PodcastsContainer = (props: Props) => {
                   </Link>
                 </EpisodeListHeader>
               }
+              cols={isMobile ? 1 : 4}
               shows={[show]}
               displayShow={false}
               episodes={show.episodes as LPE.Podcast.Document[]}
@@ -70,7 +82,8 @@ const PodcastsBodyContainer = styled(GridItem)``
 
 const PodcastsGrid = styled(Grid)`
   width: 100%;
-  @media (min-width: 768px) and (max-width: 1200px) {
+  @media (max-width: 768px) {
+    margin-top: ${uiConfigs.navbarRenderedHeight + 80}px;
   }
 `