Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 15:35:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Address PR comments

Browse Source
This commit is contained in:
ajnart
2022-11-22 18:15:37 +09:00
parent 3d7449d871
commit fb78736a83
2 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/modules/docker/DockerTable.tsx
View File

@@ -1,4 +1,4 @@
import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, useMantineTheme } from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { IconSearch } from '@tabler/icons';
import Dockerode from 'dockerode';
@@ -24,6 +24,7 @@ export default function DockerTable({
containers: Dockerode.ContainerInfo[];
selection: Dockerode.ContainerInfo[];
}) {
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
const { classes, cx } = useStyles();
const [search, setSearch] = useState('');
@@ -69,8 +70,8 @@ export default function DockerTable({
/>
</td>
<td>{element.Names[0].replace('/', '')}</td>
{width > 576 ? <td>{element.Image}</td> : null}
{width > 576 ? (
{width > MIN_WIDTH_MOBILE && <td>{element.Image}</td>}
{width > MIN_WIDTH_MOBILE && (
<td>
<Group>
{element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -92,7 +93,7 @@ export default function DockerTable({
)}
</Group>
</td>
) : null}
)}
<td>
<ContainerState state={element.State} />
</td>
@@ -123,8 +124,8 @@ export default function DockerTable({
/>
</th>
<th>{t('table.header.name')}</th>
{width > 576 ? <th>{t('table.header.image')}</th> : null}
{width > 576 ? <th>{t('table.header.ports')}</th> : null}
{width > MIN_WIDTH_MOBILE ? <th>{t('table.header.image')}</th> : null}
{width > MIN_WIDTH_MOBILE ? <th>{t('table.header.ports')}</th> : null}
<th>{t('table.header.state')}</th>
</tr>
</thead>