590 mobile cards agenda page (#591)

* Make styles mobile friendly * Update layout * Update table display
lexicongovernance · Jun 14, 2024 · 8dfac2f · 8dfac2f
1 parent fbe26fa
commit 8dfac2f
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 38 deletions.
diff --git 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
@@ -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 (
-    <TableContainer>
-      <thead>
-        <TableRow>
-          {columns.map((column) => (
-            <TableHeader key={column}>
-              <Body>{column}</Body>
-            </TableHeader>
+    <>
+      <TableContainer>
+        <thead>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHeader key={column}>
+                <Body>{column}</Body>
+              </TableHeader>
+            ))}
+          </TableRow>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <TableRow key={index}>
+              {row.map((data, index) => (
+                <TableCell key={index}>
+                  <Body>{data}</Body>
+                </TableCell>
+              ))}
+            </TableRow>
           ))}
-        </TableRow>
-      </thead>
-      <tbody>
+        </tbody>
+      </TableContainer>
+      <Cards>
+        <Subtitle>{columns.at(0)}</Subtitle>
         {rows.map((row, index) => (
-          <TableRow key={index}>
+          <Card key={index}>
             {row.map((data, index) => (
-              <TableCell key={index}>
-                <Body>{data}</Body>
-              </TableCell>
+              <Body key={index}>{data}</Body>
             ))}
-          </TableRow>
+          </Card>
         ))}
-      </tbody>
-    </TableContainer>
+      </Cards>
+    </>
   );
 }
 

diff --git 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 (
-    <div>
-      <Table
-        columns={[
-          `${status.charAt(0).toUpperCase() + status.slice(1)} Agendas`,
-          formattedColumnText(),
-          '',
-        ]}
-        rows={cycles.map((cycle) => [
-          cycle.forumQuestions?.[0]?.questionTitle,
-          formatDate(cycle.endAt),
-          <Button onClick={() => handleClick(cycle.id)}>
-            {status === 'open' ? 'Vote' : 'Results'}
-          </Button>,
-        ])}
-      />
-    </div>
+    <Table
+      columns={[
+        `${status.charAt(0).toUpperCase() + status.slice(1)} Agendas`,
+        formattedColumnText(),
+        '',
+      ]}
+      rows={cycles.map((cycle) => [
+        cycle.forumQuestions?.[0]?.questionTitle,
+        formatDate(cycle.endAt),
+        <Button onClick={() => handleClick(cycle.id)}>
+          {status === 'open' ? 'Vote' : 'Results'}
+        </Button>,
+      ])}
+    />
   );
 }