admin/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Use legacy grid on dashboard page

Browse Source
This commit is contained in:
viown
2025-07-19 12:11:50 +03:00
parent 7a8e934c7e
commit 6dbbe0e78b
4 changed files with 16 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/apps/dashboard/components/BaseCard.tsx
View File

@@ -64,7 +64,7 @@ const BaseCard = ({ title, secondaryTitle, text, image, icon, to, onClick, actio
</CardActionArea>
<CardHeader
title={
<Stack direction='row' gap={1} alignItems='center'>
<Stack direction='row' spacing={1} alignItems='center'>
<Typography sx={{
overflow: 'hidden',
whiteSpace: 'nowrap',

6
src/apps/dashboard/components/widgets/ServerInfoWidget.tsx
View File

@@ -27,13 +27,13 @@ const ServerInfoWidget = ({ onScanLibrariesClick, onRestartClick, onShutdownClic
padding: 2
}}>
<Stack direction='row'>
<Stack flexGrow={1} gap={1}>
<Stack flexGrow={1} spacing={1}>
<Typography fontWeight='bold'>{globalize.translate('LabelServerName')}</Typography>
<Typography fontWeight='bold'>{globalize.translate('LabelServerVersion')}</Typography>
<Typography fontWeight='bold'>{globalize.translate('LabelWebVersion')}</Typography>
<Typography fontWeight='bold'>{globalize.translate('LabelBuildVersion')}</Typography>
</Stack>
<Stack flexGrow={5} gap={1}>
<Stack flexGrow={5} spacing={1}>
{isPending ? (
<>
<Skeleton />
@@ -53,7 +53,7 @@ const ServerInfoWidget = ({ onScanLibrariesClick, onRestartClick, onShutdownClic
</Stack>
</Paper>
<Stack direction='row' gap={1.5} flexWrap={'wrap'}>
<Stack direction='row' spacing={1.5}>
<Button
onClick={onScanLibrariesClick}
sx={{

6
src/apps/dashboard/features/backups/components/BackupInfoDialog.tsx
View File

@@ -44,11 +44,11 @@ const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }:
</DialogTitle>
<DialogContent>
<Stack gap={2}>
<Stack spacing={2}>
<Box>
<Stack
direction='row'
gap={2}
spacing={2}
>
<Typography fontWeight='bold'>{globalize.translate('LabelPath')}</Typography>
<Stack direction='row'>
@@ -60,7 +60,7 @@ const BackupInfoDialog: FunctionComponent<IProps> = ({ backup, open, onClose }:
</Stack>
<Stack
direction='row'
gap={2}
spacing={2}
>
<Typography fontWeight='bold'>{globalize.translate('LabelVersion')}</Typography>
<Typography color='text.secondary'>{backup.ServerVersion}</Typography>

32
src/apps/dashboard/routes/index.tsx
View File

@@ -2,13 +2,11 @@ import React, { useCallback, useState } from 'react';
import Page from 'components/Page';
import globalize from 'lib/globalize';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';
import ServerPathWidget from '../components/widgets/ServerPathWidget';
import ServerInfoWidget from '../components/widgets/ServerInfoWidget';
import ActivityLogWidget from '../components/widgets/ActivityLogWidget';
import AlertsLogWidget from '../components/widgets/AlertsLogWidget';
import useTheme from '@mui/material/styles/useTheme';
import useMediaQuery from '@mui/material/useMediaQuery';
import Stack from '@mui/material/Stack';
import useShutdownServer from '../features/system/api/useShutdownServer';
import useRestartServer from '../features/system/api/useRestartServer';
@@ -20,9 +18,6 @@ import { useStartTask } from '../features/tasks/api/useStartTask';
import ItemCountsWidget from '../components/widgets/ItemCountsWidget';
export const Component = () => {
const theme = useTheme();
const isMedium = useMediaQuery(theme.breakpoints.only('md'));
const isExtraLarge = useMediaQuery(theme.breakpoints.only('xl'));
const [ isRestartConfirmDialogOpen, setIsRestartConfirmDialogOpen ] = useState(false);
const [ isShutdownConfirmDialogOpen, setIsShutdownConfirmDialogOpen ] = useState(false);
const startTask = useStartTask();
@@ -93,7 +88,7 @@ export const Component = () => {
/>
<Box className='content-primary'>
<Grid container spacing={3}>
<Grid size={{ xs: 12, md: 12, lg: 8, xl: 6 }}>
<Grid item xs={12} md={7} lg={7} xl={6}>
<Stack spacing={3}>
<ServerInfoWidget
onScanLibrariesClick={onScanLibraries}
@@ -105,24 +100,15 @@ export const Component = () => {
<DevicesWidget />
</Stack>
</Grid>
<Grid size={{ xs: 12, md: 6, lg: 4, xl: 3 }}>
<Grid item xs={12} md={5} lg={5} xl={3}>
<ActivityLogWidget />
</Grid>
{isMedium || isExtraLarge ? (
<Grid size={{ md: 6, xl: 3 }}>
<Stack spacing={3}>
<AlertsLogWidget />
<ServerPathWidget />
</Stack>
</Grid>
) : (
<Grid size={12}>
<Stack spacing={3}>
<AlertsLogWidget />
<ServerPathWidget />
</Stack>
</Grid>
)}
<Grid item xs={12} md={6} lg={12} xl={3}>
<Stack spacing={3}>
<AlertsLogWidget />
<ServerPathWidget />
</Stack>
</Grid>
</Grid>
</Box>
</Page>