diff --git a/frontend/src/components/Navbar/BottomHeader.module.css b/frontend/src/components/Navbar/BottomHeader.module.css index 1186e611e..305bad180 100644 --- a/frontend/src/components/Navbar/BottomHeader.module.css +++ b/frontend/src/components/Navbar/BottomHeader.module.css @@ -9,12 +9,14 @@ background: var(--mantine-color-body); position: fixed; top: 0; - left: 50%; - transform: translateX(-50%); width: 100%; z-index: var(--mantine-z-index-app); /* box-shadow: var(--mantine-shadow-xs); */ + /* Add a margin left equal to the width of the scorllbar, so the navbar doesn't + shift around depending on page length. A similar style is applied to the body.*/ + padding-left: calc(100vw - 100%); + @mixin dark { border-bottom: 2px solid var(--mantine-color-dark-6); } diff --git a/frontend/src/components/Navbar/BottomHeader.tsx b/frontend/src/components/Navbar/BottomHeader.tsx index b67d42a6d..5eba7c118 100755 --- a/frontend/src/components/Navbar/BottomHeader.tsx +++ b/frontend/src/components/Navbar/BottomHeader.tsx @@ -31,7 +31,7 @@ const BottomHeader: React.FC = ({ return ( <> - + {uwu ? ( @@ -63,7 +63,7 @@ const BottomHeader: React.FC = ({ - + ); }; diff --git a/frontend/src/components/category-card.tsx b/frontend/src/components/category-card.tsx index 1d2a8f336..812ba8fa6 100644 --- a/frontend/src/components/category-card.tsx +++ b/frontend/src/components/category-card.tsx @@ -16,7 +16,7 @@ import { authenticated } from "../api/fetch-utils"; import { SearchResult } from "../hooks/useSearch"; import { CategoryMetaData } from "../interfaces"; import { highlight } from "../utils/search-utils"; -import clsx from "clsx"; +import clsx, { ClassValue } from "clsx"; import classes from "../utils/focus-outline.module.css"; import { useMutation } from "../api/hooks"; import { addNewFavourite, removeFavourite } from "../api/favourite"; @@ -24,12 +24,13 @@ import { addNewFavourite, removeFavourite } from "../api/favourite"; interface Props { category: SearchResult | CategoryMetaData; onFavouriteToggle: () => void; + className?: ClassValue; } const pluralize = (count: number, noun: string) => `${count} ${noun}${count !== 1 ? "s" : ""}`; -const CategoryCard: React.FC = ({ category, onFavouriteToggle: refresh }) => { +const CategoryCard: React.FC = ({ category, className, onFavouriteToggle: refresh }) => { const history = useHistory(); const handleKeyDown = (e: React.KeyboardEvent) => { if (e.code === "Enter") { @@ -83,7 +84,7 @@ const CategoryCard: React.FC = ({ category, onFavouriteToggle: refresh }) withBorder px="lg" py="md" - className={clsx(classes.focusOutline, classes.hoverShadow)} + className={clsx(classes.focusOutline, classes.hoverShadow, className)} tabIndex={0} onKeyDown={handleKeyDown} > diff --git a/frontend/src/components/secondary-container.module.css b/frontend/src/components/secondary-container.module.css index ce5b30d9e..7dfd3a30b 100644 --- a/frontend/src/components/secondary-container.module.css +++ b/frontend/src/components/secondary-container.module.css @@ -1,4 +1,10 @@ -.contentContainer { +.unOffsetFullWidth { + /* Use to reverse the margin-left applied on
to counter scroll bar */ + margin-left: calc(100% - 100vw); + padding-left: calc(100vw - 100%); +} + +.fullWidthContentContainer { @mixin light { background-color: var(--mantine-color-gray-0); box-shadow: inset var(--mantine-color-gray-2) 0px 0px 10px; diff --git a/frontend/src/components/secondary-container.tsx b/frontend/src/components/secondary-container.tsx index c898768bd..633addb96 100644 --- a/frontend/src/components/secondary-container.tsx +++ b/frontend/src/components/secondary-container.tsx @@ -14,11 +14,10 @@ const ContentContainer: React.FC = ({ }) => { return ( <> - + diff --git a/frontend/src/index.css b/frontend/src/index.css index 7c2943115..4085a084e 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -2,3 +2,9 @@ width: 18px; height: 18px; } + +main { + /* Add a margin left equal to the width of the scorllbar, so the content doesn't + shift around depending on page length. A similar style is applied to the navbar.*/ + margin-left: calc(100vw - 100%); +} diff --git a/frontend/src/pages/home-page.tsx b/frontend/src/pages/home-page.tsx index 086cb8f09..617466fcc 100644 --- a/frontend/src/pages/home-page.tsx +++ b/frontend/src/pages/home-page.tsx @@ -29,6 +29,7 @@ import { IconPlus, IconSearch} from "@tabler/icons-react"; import { useDisclosure } from "@mantine/hooks"; import KawaiiBetterInformatics from "../assets/kawaii-betterinformatics.svg?react"; import { getFavourites } from "../api/favourite"; +import classes from "../utils/fade-in-order.module.css"; import { EditMeta1, EditMeta2 } from "../components/edit-meta-categories"; const displayNameGetter = (data: CategoryMetaData) => data.displayname; @@ -305,6 +306,7 @@ export const CategoryList: React.FC<{}> = () => { ))} @@ -346,6 +348,7 @@ export const CategoryList: React.FC<{}> = () => { ))} @@ -364,6 +367,7 @@ export const CategoryList: React.FC<{}> = () => { ))} @@ -390,6 +394,7 @@ export const CategoryList: React.FC<{}> = () => { )) diff --git a/frontend/src/utils/fade-in-order.module.css b/frontend/src/utils/fade-in-order.module.css new file mode 100644 index 000000000..c800cb4dc --- /dev/null +++ b/frontend/src/utils/fade-in-order.module.css @@ -0,0 +1,21 @@ + +.fadeInOrder { + /* Browser support for sibling-index is limited, only try staggering fade-in + if the browser says it supports it. */ + @supports (animation-delay: calc(sibling-index() * 25ms)) { + /* Stagger animation should only be used if the user hasn't preferred a + reduced-motion version of the page and they're not printing it */ + @media screen and (prefers-reduced-motion: no-preference) { + opacity: 0; + transform: translateY(5px); + animation: fade-in-below 100ms linear calc(sibling-index() * 25ms) forwards; + } + + @keyframes fade-in-below { + 100% { + opacity: 1; + transform: translateY(0); + } + } + } +}