ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent "EmptyViewAbsoluteCentered" from overlapping content

Browse Source 
Regression 1f7fe5f20e
This commit is contained in:
schroda
2024-12-21 23:21:55 +01:00
parent 570b831604
commit a4f1aa3234
8 changed files with 8 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/modules/core/components/placeholder/EmptyView.tsx
View File

@@ -27,11 +27,10 @@ export interface EmptyViewProps {
messageExtra?: JSX.Element | string;
retry?: () => void;
noFaces?: boolean;
topOffset?: number;
sx?: SxProps<Theme>;
}
export function EmptyView({ message, messageExtra, retry, noFaces, topOffset = 0, sx }: EmptyViewProps) {
export function EmptyView({ message, messageExtra, retry, noFaces, sx }: EmptyViewProps) {
const { t } = useTranslation();
const errorFace = useMemo(() => getRandomErrorFace(), []);
@@ -42,9 +41,9 @@ export function EmptyView({ message, messageExtra, retry, noFaces, topOffset = 0
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
minWidth: '100%',
minHeight: `calc(100% - ${topOffset}px)`,
mt: `${topOffset}px`,
minWidth: '-webkit-fill-available',
maxWidth: '100%',
minHeight: '100%',
...sx,
}}
>

3
src/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx
View File

@@ -14,8 +14,7 @@ export function EmptyViewAbsoluteCentered({ sx, ...emptyViewProps }: EmptyViewPr
{...emptyViewProps}
sx={{
position: 'absolute',
top: 0,
left: 0,
minHeight: '-webkit-fill-available',
...sx,
}}
/>

1
src/modules/extension/screens/Extensions.tsx
View File

@@ -207,7 +207,6 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
fetchExtensions().catch(defaultPromiseErrorHandler('Extensions::refetchExtensions'));
}
}}
topOffset={tabsMenuHeight}
/>
);
}

2
src/modules/manga/components/MangaGrid.tsx
View File

@@ -238,7 +238,6 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
isLoading,
message,
messageExtra,
topOffset,
hasNextPage,
loadMore,
gridLayout,
@@ -349,7 +348,6 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
message={message ?? t('manga.error.label.no_mangas_found')}
messageExtra={messageExtra}
retry={retry}
topOffset={topOffset}
/>
);
}

1
src/modules/migration/screens/Migration.tsx
View File

@@ -104,7 +104,6 @@ export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('Migration::refetch'))}
topOffset={tabsMenuHeight}
/>
);
}

15
src/modules/source/screens/SourceMangas.tsx
View File

@@ -53,7 +53,6 @@ import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
import { GridLayout } from '@/modules/core/Core.types.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
const DEFAULT_SOURCE: Pick<SourceType, 'id'> = { id: '-1' };
@@ -250,16 +249,6 @@ export function SourceMangas() {
const currentQuery = useRef(query);
const currentAbortRequest = useRef<(reason: any) => void>(() => {});
const contentTypeMenuRef = useRef<HTMLDivElement>(null);
const [contentTypeMenuHeight, setContentTypeMenuHeight] = useState(0);
useResizeObserver(
contentTypeMenuRef,
useCallback(
() => setContentTypeMenuHeight(contentTypeMenuRef.current?.clientHeight ?? 0),
[contentTypeMenuRef],
),
);
const didSearchChange = currentQuery.current !== query;
if (didSearchChange && contentType === SourceContentType.SEARCH) {
currentQuery.current = query;
@@ -443,7 +432,7 @@ export function SourceMangas() {
return (
<StyledGridWrapper>
<ContentTypeMenu ref={contentTypeMenuRef} sx={{ top: `${appBarHeight}px` }}>
<ContentTypeMenu sx={{ top: `${appBarHeight}px` }}>
<ContentTypeButton
variant={contentType === SourceContentType.POPULAR ? 'contained' : 'outlined'}
startIcon={<FavoriteIcon />}
@@ -479,7 +468,6 @@ export function SourceMangas() {
loadMore={loadMore}
message={message}
messageExtra={messageExtra}
topOffset={contentTypeMenuHeight}
isLoading={isLoading}
gridLayout={sourceGridLayout}
mode="source"
@@ -492,7 +480,6 @@ export function SourceMangas() {
message={t('global.error.label.failed_to_load_data')}
messageExtra={getErrorMessage(error)}
retry={() => loadPage(lastPageNum).catch(defaultPromiseErrorHandler('SourceMangas::refetch'))}
topOffset={contentTypeMenuHeight}
/>
)}

5
src/modules/source/screens/Sources.tsx
View File

@@ -138,15 +138,12 @@ export function Sources({ tabsMenuHeight }: { tabsMenuHeight: number }) {
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('Sources::refetch'))}
topOffset={tabsMenuHeight}
/>
);
}
if (sources?.length === 0) {
return (
<EmptyViewAbsoluteCentered message={t('source.error.label.no_sources_found')} topOffset={tabsMenuHeight} />
);
return <EmptyViewAbsoluteCentered message={t('source.error.label.no_sources_found')} />;
}
return (

2
src/modules/tracker/components/TrackerSearch.tsx
View File

@@ -147,7 +147,7 @@ export const TrackerSearch = ({
/>
</Stack>
</DialogTitle>
<DialogContent dividers sx={{ padding: DIALOG_PADDING, height: '100vh' }}>
<DialogContent dividers sx={{ padding: DIALOG_PADDING, height: '100vh', position: 'relative' }}>
{!trackerSearch.loading && !trackerSearch.error && !hasResults && (
<EmptyViewAbsoluteCentered message={t('manga.error.label.no_mangas_found')} />
)}