Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-13 17:05:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Torrent module adjustments for mobile users

Browse Source
This commit is contained in:
ajnart
2022-11-22 12:50:24 +09:00
parent cebeb61b94
commit c347180aae
1 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/modules/torrents/TorrentsModule.tsx
View File

@@ -13,7 +13,7 @@ import {
import { IconDownload as Download } from '@tabler/icons'; import { IconDownload as Download } from '@tabler/icons';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import axios from 'axios'; import axios from 'axios';
import { useViewportSize } from '@mantine/hooks'; import { useElementSize } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications'; import { showNotification } from '@mantine/notifications';
import { NormalizedTorrent } from '@ctrl/shared-torrent'; import { NormalizedTorrent } from '@ctrl/shared-torrent';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
@@ -34,15 +34,10 @@ export const TorrentsModule: IModule = {
value: false, value: false,
}, },
}, },
padding: {
right: 0,
top: -10,
},
}; };
export default function TorrentsComponent() { export default function TorrentsComponent() {
const { config } = useConfig(); const { config } = useConfig();
const { height, width } = useViewportSize();
const downloadServices = const downloadServices =
config.services.filter( config.services.filter(
(service) => (service) =>
@@ -56,6 +51,7 @@ export default function TorrentsComponent() {
const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]); const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
const setSafeInterval = useSetSafeInterval(); const setSafeInterval = useSetSafeInterval();
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const { ref, width, height } = useElementSize();
const { t } = useTranslation(`modules/${TorrentsModule.id}`); const { t } = useTranslation(`modules/${TorrentsModule.id}`);
@@ -112,14 +108,13 @@ export default function TorrentsComponent() {
</> </>
); );
} }
const DEVICE_WIDTH = 576;
const ths = ( const ths = (
<tr> <tr ref={ref}>
<th>{t('card.table.header.name')}</th> <th>{t('card.table.header.name')}</th>
<th>{t('card.table.header.size')}</th> <th>{t('card.table.header.size')}</th>
{width > 576 ? <th>{t('card.table.header.download')}</th> : ''} {width > 576 ? <th>{t('card.table.header.download')}</th> : null}
{width > 576 ? <th>{t('card.table.header.upload')}</th> : ''} {width > 576 ? <th>{t('card.table.header.upload')}</th> : null}
<th>{t('card.table.header.estimatedTimeOfArrival')}</th> {width > 576 ? <th>{t('card.table.header.estimatedTimeOfArrival')}</th> : null}
<th>{t('card.table.header.progress')}</th> <th>{t('card.table.header.progress')}</th>
</tr> </tr>
); );
@@ -178,9 +173,11 @@ export default function TorrentsComponent() {
) : ( ) : (
'' ''
)} )}
{width > 576 ? (
<td> <td>
<Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text> <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
</td> </td>
) : null}
<td> <td>
<Text>{(torrent.progress * 100).toFixed(1)}%</Text> <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
<Progress <Progress