Handle 9 tracks by showing "mobile" layout up to 1024px (lg breakpoint)

dddwa · Jul 17, 2022 · e431fcd · e431fcd
1 parent a289fb4
commit e431fcd
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/components/Agenda/Agenda.styled.tsx b/components/Agenda/Agenda.styled.tsx
@@ -1,6 +1,7 @@
 import { breakpoint, breakpointBetween, breakpointMax } from 'components/utils/styles/breakpoints'
 import { calcRem } from 'components/utils/styles/calcRem'
 import styled from '@emotion/styled'
+import { tableLayoutBreakpointFrom } from './layout'
 
 const rowBackgroundColor = '#f9f9f9'
 const cellBorder = '1px solid #ddd'
@@ -40,7 +41,7 @@ export const StyledAgendaRow = styled('section')<StyledAgendaRowProps>(({ tracks
     },
   },
 
-  [breakpointBetween('xs', 'sm')]: {
+  [breakpointBetween('xs', tableLayoutBreakpointFrom)]: {
     [`& > section:nth-child(${Math.floor(tracks / 2)}n+1)`]: {
       borderRight: 0,
     },
@@ -54,7 +55,7 @@ export const StyledAgendaRow = styled('section')<StyledAgendaRowProps>(({ tracks
     gridTemplateColumns: `repeat(${Math.floor(tracks / 2)}, 1fr)`,
   },
 
-  [breakpoint('sm')]: {
+  [breakpoint(tableLayoutBreakpointFrom)]: {
     gridTemplateColumns: `${calcRem(90)} repeat(auto-fit, minmax(${calcRem(80)}, 1fr))`,
     '& > div:not(:last-child)': {
       borderRight: cellBorder,
@@ -80,7 +81,7 @@ export const StyledAgendaRowList = styled('ul')(({ theme }) => ({
     textAlign: 'center',
   },
 
-  [breakpoint('sm')]: {
+  [breakpoint(tableLayoutBreakpointFrom)]: {
     display: 'grid',
     gridTemplateColumns: `${calcRem(90)} repeat(auto-fit, minmax(${calcRem(80)}, 1fr))`,
     gridGap: calcRem(1),

diff --git a/components/Agenda/AgendaSession.styled.tsx b/components/Agenda/AgendaSession.styled.tsx
@@ -2,6 +2,7 @@ import { breakpoint, breakpointMax } from 'components/utils/styles/breakpoints'
 import { calcRem } from 'components/utils/styles/calcRem'
 import styled from '@emotion/styled'
 import { zIndex } from 'components/utils/styles/zindex'
+import { tableLayoutBreakpointFrom } from './layout'
 
 interface StyledSectionProps {
   fullWidth?: boolean
@@ -11,7 +12,7 @@ interface StyledSectionProps {
 export const StyledSection = styled('section')<StyledSectionProps>(({ fullWidth, session }) => ({
   padding: session ? undefined : calcRem(20, 8),
 
-  [breakpointMax('sm')]: {
+  [breakpointMax(tableLayoutBreakpointFrom)]: {
     gridColumn: fullWidth ? '1 / -1' : 'auto',
   },
 }))
@@ -95,7 +96,7 @@ export const StyledRoom = styled('span')<StyledRoomProps>(({ theme, showOnMobile
   fontWeight: theme.weights.semiBold,
   textAlign: showOnMobile ? 'center' : undefined,
 
-  [breakpoint('sm')]: {
+  [breakpoint(tableLayoutBreakpointFrom)]: {
     display: showOnMobile ? 'none' : undefined,
   },
 }))

diff --git a/components/Agenda/Agendatime.styled.tsx b/components/Agenda/Agendatime.styled.tsx
@@ -1,6 +1,7 @@
 import { breakpoint } from 'components/utils/styles/breakpoints'
 import { calcRem } from 'components/utils/styles/calcRem'
 import styled from '@emotion/styled'
+import { tableLayoutBreakpointFrom } from './layout'
 
 export const StyledAgendaTime = styled('div')(({ theme }) => ({
   gridColumn: `1 / -1`,
@@ -9,7 +10,7 @@ export const StyledAgendaTime = styled('div')(({ theme }) => ({
   color: '#fff',
   fontWeight: theme.weights.semiBold,
 
-  [breakpoint('sm')]: {
+  [breakpoint(tableLayoutBreakpointFrom)]: {
     gridColumn: 'auto',
     backgroundColor: 'transparent',
     color: 'inherit',

diff --git a/components/Agenda/layout.ts b/components/Agenda/layout.ts
@@ -0,0 +1 @@
+export const tableLayoutBreakpointFrom = 'lg'