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

Prevent grid items from jumping after closing reader

Browse Source 
Due to the reader and the "default" nav bar updating the same navbar width in the context, the grid item width calculation resulted in different grid item widths, which caused the items to "jump" after closing the reader
This commit is contained in:
schroda
2024-07-29 17:22:49 +02:00
parent b17fcd30af
commit b80622cb17
11 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/MangaGrid.tsx
View File

@@ -32,7 +32,7 @@ import { AppStorage } from '@/util/AppStorage.ts';
import { MangaCardProps } from '@/components/manga/MangaCard.types.tsx';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { useResizeObserver } from '@/util/useResizeObserver.tsx';
import { useDebounce } from '@/util/useDebounce.ts';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
<Grid {...props} ref={ref} container sx={{ paddingLeft: '5px', paddingRight: '13px' }}>
@@ -253,12 +253,15 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
}) => {
const { t } = useTranslation();
const gridRef = useRef<HTMLDivElement>(null);
const { navBarWidth } = useNavBarContext();
const [actualDimensions, setDimensions] = useState(document.documentElement.offsetWidth);
const dimensions = useDebounce(actualDimensions, 500);
const [gridItemWidth] = useLocalStorage<number>('ItemWidth', 300);
const gridRef = useRef<HTMLDivElement>(null);
const gridWrapperRef = useRef<HTMLDivElement>(null);
const [dimensions, setDimensions] = useState(
gridWrapperRef.current?.offsetWidth ?? Math.max(0, document.documentElement.offsetWidth - navBarWidth),
);
const [gridItemWidth] = useLocalStorage<number>('ItemWidth', 300);
const GridItemContainer = useMemo(
() => GridItemContainerWithDimension(dimensions, gridItemWidth, gridLayout),
[dimensions, gridItemWidth, gridLayout],
@@ -300,14 +303,14 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
const gridWidth = gridWrapperRef.current?.offsetWidth;
if (!gridWidth) {
return document.documentElement.offsetWidth;
return document.documentElement.offsetWidth - navBarWidth;
}
return gridWidth;
};
setDimensions(getDimensions());
}, []),
}, [navBarWidth]),
);
useResizeObserver(