Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile Table Overflow #887

Merged
merged 1 commit into from
Jan 7, 2025
Merged

Mobile Table Overflow #887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions frontend/src/components/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ function Table<T>({
bottomElement,
}: TableProps<T>): React.ReactElement {
return (
<div className="pl-50 w-full overflow-auto rounded-lg shadow-md">
<div className="pl-50 w-full rounded-lg shadow-md">
{/* MOBILE PAGINATION */}
<div className="rounded-t-lg border-b-2 border-cyan-700 bg-gray-50 md:hidden">
<div className="w-full rounded-t-lg border-b-2 border-cyan-700 bg-gray-50 md:hidden">
{bottomElement}
</div>

{/* MOBILE TABLE */}
<div className="flex w-full flex-col md:hidden">
<table className="w-full border-collapse overflow-hidden rounded-b-lg border-b-0 text-left text-sm text-gray-500">
<table className="w-full border-collapse rounded-b-lg border-b-0 text-left text-sm text-gray-500">
{!loading &&
data.map((row, rowIdx) => (
<tbody
Expand All @@ -52,14 +52,15 @@ function Table<T>({
>
{columns.map((col, colIdx) => (
<tr
className="grid w-full grid-cols-2"
key={
"mobile" + "row" + col.key + keyFromValue(row).toString()
}
>
<th
key={"mobile" + "header" + col.key}
scope="col"
className={`bg-cyan-700 py-3 pl-4 pr-3 font-bold text-white ${
className={`max-w-32 text-ellipsis bg-cyan-700 py-3 pl-4 pr-0 font-bold text-white ${
colIdx === columns.length - 1 &&
rowIdx < data.length - 1
? "border-b border-white"
Expand All @@ -76,7 +77,7 @@ function Table<T>({
keyFromValue(row).toString()
}
scope="row"
className="text-ellipsis whitespace-normal px-8 py-3 font-medium text-gray-900"
className="min-w-0 place-items-center overflow-hidden text-ellipsis text-wrap py-3 pr-2 font-medium text-gray-900"
>
{col.value(row)}
</td>
Expand Down Expand Up @@ -132,7 +133,9 @@ function Table<T>({
<Spinner size="xl" />
</div>
)}
<div className="hidden rounded-b-lg bg-white md:flex">

{/* WIDESCREEN PAGINATION */}
<div className="hidden w-full rounded-b-lg bg-white md:flex">
{bottomElement}
</div>
</div>
Expand Down
27 changes: 8 additions & 19 deletions frontend/src/components/tables/RankingsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,6 @@ interface RankingsTableProps {
handlePage: (page: number) => void;
}

function trimString(str: string, maxLength: number): string {
if (str.length > maxLength) {
return str.slice(0, maxLength - 1) + "...";
}
return str;
}

const RankingsTable: React.FC<RankingsTableProps> = ({
data,
loading,
Expand All @@ -35,8 +28,6 @@ const RankingsTable: React.FC<RankingsTableProps> = ({
const { episodeId } = useEpisodeId();
const episode = useEpisodeInfo({ id: episodeId });

const MAX_NAME_LENGTH = 20;

return (
<Table
data={data?.results ?? []}
Expand Down Expand Up @@ -75,16 +66,14 @@ const RankingsTable: React.FC<RankingsTableProps> = ({
key: "members",
value: (team) =>
team.members.map((member, idx) => (
<>
<NavLink
key={member.id}
to={`/user/${member.id}`}
className="hover:underline"
>
{trimString(member.username, MAX_NAME_LENGTH)}
</NavLink>
{idx !== team.members.length - 1 ? ", " : ""}
</>
<NavLink
key={member.id}
to={`/user/${member.id}`}
className="hover:underline"
>
{member.username +
(idx !== team.members.length - 1 ? ", " : "")}
</NavLink>
)),
},
{
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/tables/TournamentsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const TournamentsTable: React.FC<TournamentsTableProps> = ({
header: "Tournament",
key: "name_long",
value: (tour) => (
<span className="hover:underline">{tour.name_long}</span>
<span className="text-wrap hover:underline">{tour.name_long}</span>
),
},
{
Expand All @@ -66,7 +66,9 @@ const TournamentsTable: React.FC<TournamentsTableProps> = ({
{
header: "About",
key: "blurb",
value: (tour) => <div className="max-w-80">{tour.blurb}</div>,
value: (tour) => (
<div className="max-w-80 text-wrap">{tour.blurb}</div>
),
},
]}
/>
Expand Down
29 changes: 9 additions & 20 deletions frontend/src/components/tables/scrimmaging/TeamsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,12 @@ interface TeamsTableProps {
handleSearch: (search: string) => void;
}

function trimString(str: string, maxLength: number): string {
if (str.length > maxLength) {
return str.slice(0, maxLength - 1) + "...";
}
return str;
}

const TeamsTable: React.FC<TeamsTableProps> = ({
search,
teamsPage,
handlePage,
handleSearch,
}) => {
const MAX_NAME_LENGTH = 13;

const { episodeId } = useEpisodeId();
const episodeInfo = useEpisodeInfo({ id: episodeId });
const queryClient = useQueryClient();
Expand Down Expand Up @@ -128,7 +119,7 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
to={`/${episodeId}/team/${team.id}`}
className="hover:underline"
>
{trimString(team.name, MAX_NAME_LENGTH)}
{team.name}
</NavLink>
),
},
Expand All @@ -137,16 +128,14 @@ const TeamsTable: React.FC<TeamsTableProps> = ({
key: "members",
value: (team) =>
team.members.map((member, idx) => (
<>
<NavLink
key={idx}
to={`/user/${member.id}`}
className="hover:underline"
>
{trimString(member.username, MAX_NAME_LENGTH)}
</NavLink>
{idx !== team.members.length - 1 ? ", " : ""}
</>
<NavLink
key={member.id}
to={`/user/${member.id}`}
className="hover:underline"
>
{member.username +
(idx !== team.members.length - 1 ? ", " : "")}
</NavLink>
)),
},
{
Expand Down
Loading