Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-20 21:47:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feat/overseerr-widget

Browse Source
This commit is contained in:
Manuel
2023-04-06 23:11:29 +02:00
parent c1463b3aa6 984292482a
commit 972aff26f7
5 changed files with 102 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Dashboard/Views/DashboardView.tsx
View File

@@ -17,33 +17,24 @@ export const DashboardView = () => {
return (
<Group align="top" h="100%" spacing="xs">
{sidebarsVisible.isLoading ? (
<Center w="100%">
<Loader />
</Center>
) : (
<>
{sidebarsVisible.left ? (
<DashboardSidebar location="left" isGridstackReady={isReady} />
) : null}
{sidebarsVisible.left ? (
<DashboardSidebar location="left" isGridstackReady={isReady} />
) : null}
<Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
{!isReady
? null
: wrappers.map((item) =>
item.type === 'category' ? (
<DashboardCategory key={item.id} category={item as unknown as CategoryType} />
) : (
<DashboardWrapper key={item.id} wrapper={item as WrapperType} />
)
)}
</Stack>
<Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
{isReady &&
wrappers.map((item) =>
item.type === 'category' ? (
<DashboardCategory key={item.id} category={item as unknown as CategoryType} />
) : (
<DashboardWrapper key={item.id} wrapper={item as WrapperType} />
)
)}
</Stack>
{sidebarsVisible.right ? (
<DashboardSidebar location="right" isGridstackReady={isReady} />
) : null}
</>
)}
{sidebarsVisible.right ? (
<DashboardSidebar location="right" isGridstackReady={isReady} />
) : null}
</Group>
);
};

3
src/hooks/useScreenLargerThan.ts
View File

@@ -1,9 +1,8 @@
import { MantineSize, useMantineTheme } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { MIN_WIDTH_MOBILE } from '../constants/constants';
export const useScreenLargerThan = (size: MantineSize | number) => {
const { breakpoints } = useMantineTheme();
const pixelCount = typeof size === 'string' ? breakpoints[size] : size;
return useMediaQuery(`(min-width: ${MIN_WIDTH_MOBILE})`);
return useMediaQuery(`(min-width: ${pixelCount})`);
};

15
src/pages/_app.tsx
View File

@@ -2,7 +2,6 @@ import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from
import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks';
import { ModalsProvider } from '@mantine/modals';
import Consola from 'consola';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { getCookie } from 'cookies-next';
import { GetServerSidePropsContext } from 'next';
@@ -12,6 +11,9 @@ import Head from 'next/head';
import { useEffect, useState } from 'react';
import { Notifications } from '@mantine/notifications';
import 'video.js/dist/video-js.css';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal';
@@ -77,6 +79,10 @@ function App(
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
});
useHotkeys([['mod+J', () => toggleColorScheme()]]);
return (
@@ -84,7 +90,10 @@ function App(
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</Head>
<QueryClientProvider client={queryClient}>
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: asyncStoragePersister }}
>
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<ColorTheme.Provider value={colorTheme}>
<MantineProvider
@@ -131,7 +140,7 @@ function App(
</ColorTheme.Provider>
</ColorSchemeProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</PersistQueryClientProvider>
</>
);
}