Improve fluidity of home-page

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);
   }

frontend/src/components/Navbar/BottomHeader.tsx

@@ -31,7 +31,7 @@ const BottomHeader: React.FC<Props> = ({
   return (
     <>
       <Box visibleFrom="md" className={classes.placeholder} />
-      <Container visibleFrom="md" className={classes.navbar} fluid={true}>
+      <Box visibleFrom="md" className={classes.navbar}>
         <Container size={size ? size : "md"} className={classes.container}>
           <Link to={""} className={classes.title}>
             {uwu ? (
@@ -63,7 +63,7 @@ const BottomHeader: React.FC<Props> = ({
             <ColorSchemeToggle/>
           </Group>
         </Container>
-      </Container>
+      </Box>
     </>
   );
 };

frontend/src/components/category-card.tsx

@@ -16,20 +16,21 @@ 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";
 
 interface Props {
   category: SearchResult<CategoryMetaData> | CategoryMetaData;
   onFavouriteToggle: () => void;
+  className?: ClassValue;
 }
 
 const pluralize = (count: number, noun: string) =>
   `${count} ${noun}${count !== 1 ? "s" : ""}`;
 
-const CategoryCard: React.FC<Props> = ({ category, onFavouriteToggle: refresh }) => {
+const CategoryCard: React.FC<Props> = ({ category, className, onFavouriteToggle: refresh }) => {
   const history = useHistory();
   const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
     if (e.code === "Enter") {
@@ -83,7 +84,7 @@ const CategoryCard: React.FC<Props> = ({ 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}
     >

frontend/src/components/secondary-container.module.css

@@ -1,4 +1,10 @@
-.contentContainer {
+.unOffsetFullWidth {
+  /* Use to reverse the margin-left applied on <main> 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;

frontend/src/components/secondary-container.tsx

@@ -14,11 +14,10 @@ const ContentContainer: React.FC<ContentContainerProps> = ({
 }) => {
   return (
     <>
-      <Divider mt="lg" {...others} />
+      <Divider mt="lg" className={classes.unOffsetFullWidth} {...others} />
       <Box
         py="md"
-        px={0}
-        className={`${classes.contentContainer} ${
+        className={`${classes.fullWidthContentContainer} ${classes.unOffsetFullWidth} ${
           className ? ` ${className}` : ""
         }`}
       >

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%);
+}

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<{}> = () => {
                   <CategoryCard
                     category={category}
                     key={category.slug}
+                    className={filter.length === 0 && classes.fadeInOrder}
                     onFavouriteToggle={onFavouriteToggle}
                   />
                 ))}
@@ -346,6 +348,7 @@ export const CategoryList: React.FC<{}> = () => {
                             <CategoryCard
                               category={category}
                               key={category.slug}
+                              className={classes.fadeInOrder}
                               onFavouriteToggle={onFavouriteToggle}
                             />
                           ))}
@@ -364,6 +367,7 @@ export const CategoryList: React.FC<{}> = () => {
                       <CategoryCard
                         category={category}
                         key={category.slug}
+                        className={classes.fadeInOrder}
                         onFavouriteToggle={onFavouriteToggle}
                       />
                     ))}
@@ -390,6 +394,7 @@ export const CategoryList: React.FC<{}> = () => {
                     <CategoryCard
                       category={category}
                       key={category.slug}
+                      className={classes.fadeInOrder}
                       onFavouriteToggle={onFavouriteToggle}
                     />
                   ))

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);
+      }
+    }
+  }
+}