From 8dfac2f2a129033d3a4a3e714f167ae151992c56 Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Fri, 14 Jun 2024 08:29:25 -0500
Subject: [PATCH] 590 mobile cards agenda page (#591)
* Make styles mobile friendly
* Update layout
* Update table display
---
.../src/components/table/Table.styled.tsx | 34 +++++++++++--
.../berlin/src/components/table/Table.tsx | 49 ++++++++++++-------
packages/berlin/src/pages/Event.tsx | 30 ++++++------
3 files changed, 75 insertions(+), 38 deletions(-)
diff --git a/packages/berlin/src/components/table/Table.styled.tsx b/packages/berlin/src/components/table/Table.styled.tsx
index b399c73d..bdc199f3 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`
- width: 100%;
- border-collapse: collapse;
- margin-bottom: 2rem;
- table-layout: fixed;
+ display: none;
+ @media (min-width: 600px) {
+ border-collapse: collapse;
+ display: table;
+ margin-bottom: 2rem;
+ table-layout: fixed;
+ width: 100%;
+ }
`;
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;
+ }
+`;
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),
+ ,
+ ])}
+ />
);
}