scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add initial mobile layout for earn and burn

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-22 16:41:37 +02:00
parent 90bd302715
commit 672b1176d6
5 changed files with 159 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css
View File

@@ -1,8 +1,29 @@
.container {
display: flex;
flex-direction: column;
gap: 16px;
overflow-x: auto;
display: grid;
gap: var(--Spacing-x3);
}
.mobileTable {
border-spacing: 0;
width: 100%;
}
.mobileThead {
background-color: var(--Main-Grey-10);
}
.mobileTh {
padding: var(--Spacing-x2);
}
.mobilePlaceholder {
text-align: center;
padding: var(--Spacing-x4);
border: 1px solid var(--Main-Grey-10);
}
.tableContainer {
display: none;
}
.table {
@@ -12,9 +33,9 @@
}
.thead {
background-color: var(--Base-Fill-Normal);
border-left: 1px solid var(--Base-Fill-Normal);
border-right: 1px solid var(--Base-Fill-Normal);
background-color: var(--Main-Grey-10);
border-left: 1px solid var(--Main-Grey-10);
border-right: 1px solid var(--Main-Grey-10);
}
.tr {
@@ -35,5 +56,18 @@
width: 100%;
padding: 24px;
text-align: center;
border: 1px solid var(--Base-Fill-Normal);
border: 1px solid var(--Main-Grey-10);
}
@media screen and (min-width: 950px) {
.mobileTableContainer {
display: none;
}
.tableContainer {
display: flex;
flex-direction: column;
gap: 16px;
overflow-x: auto;
}
}

147
components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
View File

@@ -4,15 +4,13 @@ import { dt } from "@/lib/dt"
import { _ } from "@/lib/translation"
import { trpc } from "@/lib/trpc/client"
import Header from "@/components/MyPages/Blocks/Header"
import Button from "@/components/TempDesignSystem/Button"
import styles from "./earnAndBurn.module.css"
import {
EarnAndBurnProps,
Page,
RowProps,
} from "@/types/components/myPages/myPage/earnAndBurn"
import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
import { Page, RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
const tableHeadings = [
_("Arrival date"),
@@ -22,7 +20,12 @@ const tableHeadings = [
_("Points"),
]
function EarnAndBurn({ lang }: EarnAndBurnProps) {
function EarnAndBurn({
lang,
title,
subtitle,
link,
}: AccountPageComponentProps) {
const { data, hasNextPage, isFetching, fetchNextPage } =
trpc.user.transaction.friendTransactions.useInfiniteQuery(
{ limit: 5 },
@@ -38,59 +41,85 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
}
const transactions = data?.pages.flatMap((page) => page.data) ?? []
return transactions.length ? (
<div className={styles.container}>
<table className={styles.table}>
<thead className={styles.thead}>
<tr>
{tableHeadings.map((heading) => (
<th key={heading} className={styles.th}>
{heading}
</th>
))}
</tr>
</thead>
<tbody>
{transactions.map((transaction) => (
<Row
lang={lang}
key={transaction.confirmationNumber}
transaction={transaction}
/>
))}
</tbody>
</table>
{/* TODO: add once pagination is available through API */}
{/* <Button
disabled={isFetching}
intent="primary"
bgcolor="white"
type="button"
onClick={loadMoreData}
>
{_("See more transactions")}
</Button> */}
</div>
) : (
<div className={styles.container}>
<table className={styles.table}>
<thead className={styles.thead}>
<tr>
{tableHeadings.map((heading) => (
<th key={heading} className={styles.th}>
{heading}
</th>
))}
</tr>
</thead>
<tbody>
<tr>
<td colSpan={tableHeadings.length} className={styles.placeholder}>
{_("No transactions available")}
</td>
</tr>
</tbody>
</table>
return (
<div>
<Header title={title} link={link} subtitle={subtitle} />
<div className={styles.mobileTableContainer}>
<table className={styles.mobileTable}>
<thead className={styles.mobileThead}>
<th className={styles.mobileTh}>{_("Transactions")}</th>
<th className={styles.mobileTh}>{_("Points")}</th>
</thead>
<tbody>
{transactions.length ? (
transactions.map((transaction) => (
<tr key={transaction.confirmationNumber}>
<td>{transaction.hotelName}</td>
<td>{transaction.awardPoints}</td>
</tr>
))
) : (
<tr>
<td className={styles.mobilePlaceholder} colSpan={2}>
Empty
</td>
</tr>
)}
</tbody>
</table>
</div>
<div className={styles.tableContainer}>
{transactions.length ? (
<table className={styles.table}>
<thead className={styles.thead}>
<tr>
{tableHeadings.map((heading) => (
<th key={heading} className={styles.th}>
{heading}
</th>
))}
</tr>
</thead>
<tbody>
{transactions.map((transaction) => (
<Row
lang={lang}
key={transaction.confirmationNumber}
transaction={transaction}
/>
))}
</tbody>
</table>
) : (
// TODO: add once pagination is available through API
// <Button
// disabled={isFetching}
// intent="primary"
// bgcolor="white"
// type="button"
// onClick={loadMoreData}
// >
// {_("See more transactions")}
// </Button>
<table className={styles.table}>
<thead className={styles.thead}>
<tr>
{tableHeadings.map((heading) => (
<th key={heading} className={styles.th}>
{heading}
</th>
))}
</tr>
</thead>
<tr>
<td colSpan={tableHeadings.length} className={styles.placeholder}>
{_("No transactions available")}
</td>
</tr>
</table>
)}
</div>
</div>
)
}