Add LayoutGrid to channel view (#1158)

* wip

* wip

* getting there

* it works 🥳

* new grid api

* removing uneeded checks

* row features

* Grid helper

* Channel view layout using LayoutGrid

Fixes:  #1112

* cr

* cr

* cr

src/components/LimitedWidthContainer.tsx

@@ -1,13 +1,16 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
-export const limitedWidthContainerStyle = css`
-  --max-inner-width: calc(1440px - var(--sidenav-collapsed-width) - calc(2 * var(--global-horizontal-padding)));
+type LimitedWidthContainerProps = { big?: boolean }
+
+export const limitedWidthContainerStyle = (props: LimitedWidthContainerProps) => css`
+  --max-inner-width: calc(${props.big ? '2284' : '1440'}px - calc(2 * var(--global-horizontal-padding)));
 
   max-width: var(--max-inner-width);
   position: relative;
   margin: 0 auto;
 `
-export const LimitedWidthContainer = styled.div`
+
+export const LimitedWidthContainer = styled.div<LimitedWidthContainerProps>`
   ${limitedWidthContainerStyle}
 `

src/shared/components/LayoutGrid/LayoutGrid.tsx

@@ -5,7 +5,7 @@ import { media } from '@/shared/theme'
 
 type ReponsivenessObject = Partial<Record<keyof typeof media, number>>
 
-export const LayoutGrid = styled.div<{ big?: boolean }>`
+export const LayoutGrid = styled.div`
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-gap: 16px;
@@ -13,9 +13,6 @@ export const LayoutGrid = styled.div<{ big?: boolean }>`
   ${media.medium} {
     grid-gap: 24px;
   }
-
-  max-width: ${({ big }) => (big ? '2284' : '1440')}px;
-  margin: 0 auto;
 `
 
 type GridItemProps = {

src/views/playground/Playgrounds/GridTesting.tsx

@@ -17,17 +17,6 @@ export const GridTesting = () => {
           colSpan={{ small: 2, medium: 3, large: 4, xlarge: 5, xxlarge: 6 }}
         ></StyledGridItem>
       </LayoutGrid>
-      <LayoutGrid big>
-        <StyledGridItem></StyledGridItem>
-        <StyledGridItem></StyledGridItem>
-        <StyledGridItem></StyledGridItem>
-        <StyledGridItem></StyledGridItem>
-        <StyledGridItem></StyledGridItem>
-        <StyledGridItem
-          colStart={{ xlarge: 7 }}
-          colSpan={{ small: 2, medium: 3, large: 4, xlarge: 5, xxlarge: 6 }}
-        ></StyledGridItem>
-      </LayoutGrid>
     </div>
   )
 }

src/views/viewer/ChannelView/ChannelAbout.style.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 
-import { Avatar, Text } from '@/shared/components'
-import { colors, media, sizes } from '@/shared/theme'
+import { Avatar, LayoutGrid, Text } from '@/shared/components'
+import { colors, sizes } from '@/shared/theme'
 
 export const TextContainer = styled.div`
   display: grid;
@@ -11,27 +11,6 @@ export const TextContainer = styled.div`
   border-bottom: 1px solid ${colors.gray[600]};
 `
 
-export const Container = styled.div`
-  display: grid;
-  gap: 142px;
-  grid-template-columns: minmax(0, 1fr) minmax(206px, 326px);
-  margin-bottom: 50px;
-  ${media.base} {
-    gap: 32px;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-  }
-  ${media.small} {
-    gap: 79px;
-    grid-template-rows: initial;
-    grid-template-columns: minmax(0, 1fr) minmax(206px, 228px);
-  }
-  ${media.medium} {
-    gap: 94px;
-    grid-template-columns: minmax(0, 1fr) minmax(206px, 260px);
-  }
-`
-
 export const LinksContainer = styled.div`
   display: grid;
   grid-gap: ${sizes(6)};
@@ -47,15 +26,6 @@ export const Links = styled.div`
   }
 `
 
-export const DetailsContainer = styled.div`
-  ${media.base} {
-    grid-row: 1;
-  }
-  ${media.small} {
-    grid-row: initial;
-  }
-`
-
 export const Details = styled.div`
   display: grid;
   gap: ${sizes(2)};
@@ -77,3 +47,7 @@ export const AvatarContainer = styled.div`
 export const StyledAvatar = styled(Avatar)`
   margin-right: ${sizes(2)};
 `
+
+export const StyledLayoutGrid = styled(LayoutGrid)`
+  margin-bottom: 50px;
+`

src/views/viewer/ChannelView/ChannelAbout.tsx

@@ -3,17 +3,16 @@ import { useParams } from 'react-router'
 
 import { useChannel, useChannelVideoCount } from '@/api/hooks'
 import { languages } from '@/config/languages'
-import { Text } from '@/shared/components'
+import { GridItem, Text } from '@/shared/components'
 import { formatNumberShort } from '@/utils/number'
 import { formatDate } from '@/utils/time'
 
 import {
   AvatarContainer,
-  Container,
   Details,
-  DetailsContainer,
   DetailsText,
   StyledAvatar,
+  StyledLayoutGrid,
   TextContainer,
 } from './ChannelAbout.style'
 
@@ -22,8 +21,8 @@ export const ChannelAbout = () => {
   const { channel } = useChannel(id)
   const { videoCount } = useChannelVideoCount(id)
   return (
-    <Container>
-      <div>
+    <StyledLayoutGrid>
+      <GridItem colSpan={{ base: 12, small: 8 }} rowStart={{ base: 2, small: 1 }}>
         {!!channel?.description && (
           <TextContainer>
             <Text variant="h4">Description</Text>
@@ -32,8 +31,8 @@ export const ChannelAbout = () => {
             </Text>
           </TextContainer>
         )}
-      </div>
-      <DetailsContainer>
+      </GridItem>
+      <GridItem colSpan={{ base: 12, small: 3 }} colStart={{ small: -4 }}>
         <DetailsText variant="h4">Details</DetailsText>
 
         <Details>
@@ -75,7 +74,7 @@ export const ChannelAbout = () => {
             {channel?.language?.iso ? languages.find(({ value }) => value === channel.language?.iso)?.name : ''}
           </Text>
         </Details>
-      </DetailsContainer>
-    </Container>
+      </GridItem>
+    </StyledLayoutGrid>
   )
 }

src/views/viewer/ChannelView/ChannelView.style.tsx

@@ -135,7 +135,6 @@ export const TabsContainer = styled.div`
   display: grid;
   margin-bottom: ${sizes(8)};
   gap: ${sizes(2)};
-  grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
     'tabs tabs tabs'