kamp/pingvin-share
1
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-07-06 17:30:10 +02:00
Code

fix: tables on mobile

Browse Source
This commit is contained in:
Elias Schneider 2022-12-09 14:37:09 +01:00
parent c8a4521677
commit b1bfb09dfd
2 changed files with 60 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/components/admin/AdminConfigTable.tsx
View File

@ -1,4 +1,12 @@
import { ActionIcon, Code, Group, Skeleton, Table, Text } from "@mantine/core"; import {
ActionIcon,
Box,
Code,
Group,
Skeleton,
Table,
Text,
} from "@mantine/core";
import { useModals } from "@mantine/modals"; import { useModals } from "@mantine/modals";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { TbEdit, TbLock } from "react-icons/tb"; import { TbEdit, TbLock } from "react-icons/tb";
@ -43,53 +51,55 @@ const AdminConfigTable = () => {
)); ));
return ( return (
<Table verticalSpacing="sm" horizontalSpacing="xl" withBorder> <Box sx={{ display: "block", overflowX: "auto" }}>
<thead> <Table verticalSpacing="sm" horizontalSpacing="xl" withBorder>
<tr> <thead>
<th>Key</th> <tr>
<th>Value</th> <th>Key</th>
<th></th> <th>Value</th>
</tr> <th></th>
</thead> </tr>
<tbody> </thead>
{isLoading <tbody>
? skeletonRows {isLoading
: configVariables.map((configVariable) => ( ? skeletonRows
<tr key={configVariable.key}> : configVariables.map((configVariable) => (
<td style={{ maxWidth: "200px" }}> <tr key={configVariable.key}>
<Code>{configVariable.key}</Code>{" "} <td style={{ maxWidth: "200px" }}>
{configVariable.secret && <TbLock />} <br /> <Code>{configVariable.key}</Code>{" "}
<Text size="xs" color="dimmed"> {configVariable.secret && <TbLock />} <br />
{configVariable.description} <Text size="xs" color="dimmed">
</Text> {configVariable.description}
</td> </Text>
<td> </td>
{configVariable.obscured <td>
? "•".repeat(configVariable.value.length) {configVariable.obscured
: configVariable.value} ? "•".repeat(configVariable.value.length)
</td> : configVariable.value}
<td> </td>
<Group position="right"> <td>
<ActionIcon <Group position="right">
color="primary" <ActionIcon
variant="light" color="primary"
size={25} variant="light"
onClick={() => size={25}
showUpdateConfigVariableModal( onClick={() =>
modals, showUpdateConfigVariableModal(
configVariable, modals,
getConfigVariables configVariable,
) getConfigVariables
} )
> }
<TbEdit /> >
</ActionIcon> <TbEdit />
</Group> </ActionIcon>
</td> </Group>
</tr> </td>
))} </tr>
</tbody> ))}
</Table> </tbody>
</Table>
</Box>
); );
}; };

4
frontend/src/components/admin/ManageUserTable.tsx
View File

@ -18,8 +18,8 @@ const ManageUserTable = ({
const modals = useModals(); const modals = useModals();
return ( return (
<Box sx={{ display: "block", overflowX: "auto", whiteSpace: "nowrap" }}> <Box sx={{ display: "block", overflowX: "auto" }}>
<Table verticalSpacing="sm" highlightOnHover> <Table verticalSpacing="sm">
<thead> <thead>
<tr> <tr>
<th>Username</th> <th>Username</th>