From 8e663fa1853dc25fc39077bd8f46424f77fe8a8a Mon Sep 17 00:00:00 2001 From: camilovegag Date: Thu, 13 Jun 2024 21:47:35 -0500 Subject: [PATCH 1/3] Make styles mobile friendly --- .../src/components/table/Table.styled.tsx | 32 +++++++++++++++++-- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/berlin/src/components/table/Table.styled.tsx b/packages/berlin/src/components/table/Table.styled.tsx index b399c73d..908d616e 100644 --- a/packages/berlin/src/components/table/Table.styled.tsx +++ b/packages/berlin/src/components/table/Table.styled.tsx @@ -1,10 +1,15 @@ import styled from 'styled-components'; +import { FlexColumn } from '../containers/FlexColumn.styled'; export const TableContainer = styled.table` + display: none; width: 100%; - border-collapse: collapse; - margin-bottom: 2rem; - table-layout: fixed; + @media (min-width: 600px) { + display: block; + border-collapse: collapse; + margin-bottom: 2rem; + table-layout: fixed; + } `; export const TableHeader = styled.th` @@ -24,3 +29,24 @@ export const TableCell = styled.td` export const TableRow = styled.tr` border-bottom: 1px solid var(--color-black); `; + +export const Cards = styled(FlexColumn)` + width: 100%; + @media (min-width: 600px) { + display: none; + } +`; + +export const Card = styled.article` + border-radius: 0.5rem; + border: 1px solid var(--color-black); + display: flex; + flex-direction: column; + gap: 1rem; + padding: 2rem; + width: 100%; + + @media (min-width: 600px) { + display: none; + } +`; From 8dc085f3cade93c606a4ffff623c7e071d04c921 Mon Sep 17 00:00:00 2001 From: camilovegag Date: Thu, 13 Jun 2024 21:48:29 -0500 Subject: [PATCH 2/3] Update layout --- .../berlin/src/components/table/Table.tsx | 49 ++++++++++++------- packages/berlin/src/pages/Event.tsx | 30 ++++++------ 2 files changed, 45 insertions(+), 34 deletions(-) diff --git a/packages/berlin/src/components/table/Table.tsx b/packages/berlin/src/components/table/Table.tsx index abb6fd79..aba91d95 100644 --- a/packages/berlin/src/components/table/Table.tsx +++ b/packages/berlin/src/components/table/Table.tsx @@ -1,30 +1,43 @@ import { Body } from '../typography/Body.styled'; -import { TableContainer, TableCell, TableHeader, TableRow } from './Table.styled'; +import { Subtitle } from '../typography/Subtitle.styled'; +import { TableContainer, TableCell, TableHeader, TableRow, Card, Cards } from './Table.styled'; function Table({ columns, rows }: { columns: string[]; rows: (string | React.ReactNode)[][] }) { return ( - - - - {columns.map((column) => ( - - {column} - + <> + + + + {columns.map((column) => ( + + {column} + + ))} + + + + {rows.map((row, index) => ( + + {row.map((data, index) => ( + + {data} + + ))} + ))} - - - + + + + {columns.at(0)} {rows.map((row, index) => ( - + {row.map((data, index) => ( - - {data} - + {data} ))} - + ))} - - + + ); } diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx index cd44ab0d..abe0588e 100644 --- a/packages/berlin/src/pages/Event.tsx +++ b/packages/berlin/src/pages/Event.tsx @@ -102,22 +102,20 @@ function CycleTable({ cycles, status }: { cycles: GetCycleResponse[]; status: 'o }; return ( -
- [ - cycle.forumQuestions?.[0]?.questionTitle, - formatDate(cycle.endAt), - , - ])} - /> - +
[ + cycle.forumQuestions?.[0]?.questionTitle, + formatDate(cycle.endAt), + , + ])} + /> ); } From 60d6e9eefd31c0abe0400440a568ed536f7f791b Mon Sep 17 00:00:00 2001 From: camilovegag Date: Thu, 13 Jun 2024 22:08:42 -0500 Subject: [PATCH 3/3] Update table display --- packages/berlin/src/components/table/Table.styled.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/berlin/src/components/table/Table.styled.tsx b/packages/berlin/src/components/table/Table.styled.tsx index 908d616e..bdc199f3 100644 --- a/packages/berlin/src/components/table/Table.styled.tsx +++ b/packages/berlin/src/components/table/Table.styled.tsx @@ -3,12 +3,12 @@ import { FlexColumn } from '../containers/FlexColumn.styled'; export const TableContainer = styled.table` display: none; - width: 100%; @media (min-width: 600px) { - display: block; border-collapse: collapse; + display: table; margin-bottom: 2rem; table-layout: fixed; + width: 100%; } `;