Merge pull request #36 from HasangerGames/grid-to-flexbox

Grid to flexbox
HasangerGames · Jan 13, 2024 · 588dc3f · 588dc3f
2 parents 97bf97c + a1db0d1
commit 588dc3f
Show file tree

Hide file tree

Showing 28 changed files with 224 additions and 171 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,9 @@
 vendor
+.git
+.github
+.next
+.vscode
+node_modules
+*.md
+package.json
+pnpm-lock.yaml
diff --git a/app/(wiki)/buildings/[item]/page.tsx b/app/(wiki)/buildings/[item]/page.tsx
@@ -7,29 +7,41 @@ const toExport = GenericArticlePage({
   items: Buildings.definitions,
   path: "buildings",
   Sidebar: BuildingSidebar,
-	combinedArticles: [
-		{
-			title: "Oil Tanker",
-			items: [ "oil_tanker_ship_tanks", "oil_tanker_ship" ],
-			fileName: "oil_tanker"
-		},
-		{
-			title: "Containers",
-			items: range(11, 1).map((n) => `container_${n}`), // This is so dumb lmao
-			fileName: "containers"
-		},
-		{
-			title: "Port",
-			items: [ "port_warehouse_red", "port_warehouse_blue", "crane", "port", "port_complex" ],
-			fileName: "port_meta" // For some reason using `port` crashes my browser
-		},
-		{
-			title: "Armory",
-			items: [ "armory_barracks", "armory_center", "armory_vault", "armory_inner_vault", "armory" ],
-			fileName: "armory_meta" // Same as port
-		}
-	]
-})
+  combinedArticles: [
+    {
+      title: "Oil Tanker",
+      items: ["oil_tanker_ship_tanks", "oil_tanker_ship"],
+      fileName: "oil_tanker",
+    },
+    {
+      title: "Containers",
+      items: range(11, 1).map((n) => `container_${n}`), // This is so dumb lmao
+      fileName: "containers",
+    },
+    {
+      title: "Port",
+      items: [
+        "port_warehouse_red",
+        "port_warehouse_blue",
+        "crane",
+        "port",
+        "port_complex",
+      ],
+      fileName: "port_meta", // For some reason using `port` crashes my browser
+    },
+    {
+      title: "Armory",
+      items: [
+        "armory_barracks",
+        "armory_center",
+        "armory_vault",
+        "armory_inner_vault",
+        "armory",
+      ],
+      fileName: "armory_meta", // Same as port
+    },
+  ],
+});
 
 export const { generateMetadata, generateStaticParams } = toExport;
 export default toExport.default;
diff --git a/app/(wiki)/credits/page.tsx b/app/(wiki)/credits/page.tsx
@@ -121,7 +121,7 @@ export const ARTISTS: string[] = [
 
 export default function CreditsPage() {
   return (
-    <div className="prose prose-invert text-center col-span-full">
+    <div className="prose prose-invert text-center w-full">
       <h1>Credits</h1>
 
       <h2>Wiki Team</h2>

diff --git a/app/(wiki)/equipment/armor/page.tsx b/app/(wiki)/equipment/armor/page.tsx
@@ -13,10 +13,10 @@ import { Table } from "lucide-react";
 import MatrixTable from "@/components/tables/MatrixTable";
 
 const Helmets = Armors.definitions.filter(
-  (armor) => armor.armorType === ArmorType.Helmet
+  (armor) => armor.armorType === ArmorType.Helmet,
 );
 const Vests = Armors.definitions.filter(
-  (armor) => armor.armorType === ArmorType.Vest
+  (armor) => armor.armorType === ArmorType.Vest,
 );
 
 const vest2 = Vests[2];
@@ -145,7 +145,7 @@ export default function ArmorPage() {
                   ).toFixed(2)}
                 </div>
               </div>
-            ))
+            )),
           )}
         />
       </div>

diff --git a/app/(wiki)/equipment/backpacks/[item]/page.tsx b/app/(wiki)/equipment/backpacks/[item]/page.tsx
@@ -6,7 +6,7 @@ const toExport = GenericArticlePage({
   items: Backpacks.definitions,
   path: "equipment/backpacks",
   Sidebar: BackpackSidebar,
-})
+});
 
 export const { generateMetadata, generateStaticParams } = toExport;
 export default toExport.default;
diff --git a/app/(wiki)/equipment/backpacks/page.tsx b/app/(wiki)/equipment/backpacks/page.tsx
@@ -9,7 +9,7 @@ import AmmoIcon from "@/components/icons/AmmoIcon";
 import { Fragment } from "react";
 export default function BackpackPage() {
   return (
-    <div className="col-span-full">
+    <div className="w-full">
       <div className="prose prose-invert">
         <h1>Backpacks</h1>
         <p>
@@ -71,7 +71,7 @@ export default function BackpackPage() {
                   height={40}
                   className="w-10 h-10"
                 />
-              )
+              ),
             ),
           ]}
           content={[...Backpacks].map((backpack) => [

diff --git a/app/(wiki)/healing/page.tsx b/app/(wiki)/healing/page.tsx
@@ -8,7 +8,7 @@ import PageCard from "@/components/cards/PageCard";
 
 export default function HealingPage() {
   return (
-    <main className="col-span-8 text-white">
+    <main className="w-full">
       <div className="prose prose-invert">
         <h1>Healing Items</h1>
         <p>

diff --git a/app/(wiki)/layout.tsx b/app/(wiki)/layout.tsx
@@ -1,7 +1,5 @@
 export default function ArticleLayout({ children }: React.PropsWithChildren) {
   return (
-    <main className="flex flex-col-reverse gap-4 sm:grid sm:grid-cols-6 lg:grid-cols-8">
-      {children}
-    </main>
+    <main className="flex flex-col-reverse gap-4 md:flex-row">{children}</main>
   );
 }
diff --git a/app/(wiki)/loot/page.tsx b/app/(wiki)/loot/page.tsx
@@ -8,7 +8,7 @@ import TableWithHeader from "@/components/tables/TableWithHeader";
 
 export default function LootPage() {
   return (
-    <div className="col-span-8 text-white">
+    <div className="w-full">
       <div className="prose prose-invert">
         <h1>Loot Tables</h1>
         <p>

diff --git a/app/(wiki)/skins/page.tsx b/app/(wiki)/skins/page.tsx
@@ -4,7 +4,7 @@ import { Skins } from "@/vendor/suroi/common/src/definitions/skins";
 
 export default function SkinsPage() {
   return (
-    <main className="col-span-8 text-white">
+    <main className="w-full">
       <article className="prose prose-invert">
         <h1>Skins</h1>
         There are {Skins.definitions.length} skins.{" "}

diff --git a/app/(wiki)/weapons/guns/[item]/layout.tsx b/app/(wiki)/weapons/guns/[item]/layout.tsx
@@ -22,7 +22,7 @@ export default function GunLayout({
 
   return (
     <>
-      <div className="col-span-4 lg:col-span-6 prose prose-invert">
+      <div className="grow prose prose-invert">
         <h1 className="hidden sm:block">
           {gun.name} <EditButton path="weapons/guns" id={gun.idString} />
         </h1>

diff --git a/app/(wiki)/weapons/page.tsx b/app/(wiki)/weapons/page.tsx
@@ -9,7 +9,7 @@ import Collapsible from "@/components/interactive/Collapsible";
 
 export default function WeaponsPage() {
   return (
-    <main className="col-span-8 text-white">
+    <main className="w-full text-white">
       <div className="prose prose-invert">
         <h1>Weapons</h1>
         <p>

diff --git a/app/(wiki)/weapons/throwables/[item]/layout.tsx b/app/(wiki)/weapons/throwables/[item]/layout.tsx
@@ -16,7 +16,7 @@ export default function ThrowableLayout({
   if (!throwable) notFound();
   return (
     <>
-      <div className="col-span-4 lg:col-span-6 prose prose-invert">
+      <div className="grow prose prose-invert">
         <h1 className="hidden sm:block">{throwable.name}</h1>
         {children}
       </div>

diff --git a/components/articles/KillFeedImage.tsx b/components/articles/KillFeedImage.tsx
@@ -1,23 +1,28 @@
-import { getSuroiItem, getSuroiKillfeedImageLink } from "@/lib/util/suroi"
-import Image from "next/image"
+import { getSuroiItem, getSuroiKillfeedImageLink } from "@/lib/util/suroi";
+import Image from "next/image";
 
-export default function KillFeedImage({weaponID, width, height, rotation}: KillFeedImageProps) {
-	return (
-		<Image
-			width={width ?? 100}
-			height={height ?? 100}
-			style={{
-				"rotate": `${rotation ?? 0}deg`
-			}}
-			src={getSuroiKillfeedImageLink(getSuroiItem(weaponID))}
-			alt={getSuroiItem(weaponID)?.name}
-		/>
-	)
+export default function KillFeedImage({
+  weaponID,
+  width,
+  height,
+  rotation,
+}: KillFeedImageProps) {
+  return (
+    <Image
+      width={width ?? 100}
+      height={height ?? 100}
+      style={{
+        rotate: `${rotation ?? 0}deg`,
+      }}
+      src={getSuroiKillfeedImageLink(getSuroiItem(weaponID))}
+      alt={getSuroiItem(weaponID)?.name}
+    />
+  );
 }
 
 export interface KillFeedImageProps extends React.PropsWithChildren {
-	weaponID: string,
-	width?: number,
-	height?: number,
-	rotation?: number,
+  weaponID: string;
+  width?: number;
+  height?: number;
+  rotation?: number;
 }
diff --git a/components/articles/SuroiItemImage.tsx b/components/articles/SuroiItemImage.tsx
@@ -1,26 +1,41 @@
-import { getSuroiImageLink, getSuroiItem } from "@/lib/util/suroi"
-import Image from "next/image"
+import { getSuroiImageLink, getSuroiItem } from "@/lib/util/suroi";
+import Image from "next/image";
 
-export default function SuroiItemImage({itemID, width, height, rotation, variation, append, dual}: SuroiItemImageProps) {
-	return (
-		<Image
-			width={width ?? 100}
-			height={height ?? 100}
-			style={{
-				"rotate": `${rotation ?? 0}deg`
-			}}
-			src={getSuroiImageLink(getSuroiItem(itemID, variation ?? undefined, append ?? "", dual ?? false))}
-			alt={getSuroiItem(itemID)?.name}
-		/>
-		)
+export default function SuroiItemImage({
+  itemID,
+  width,
+  height,
+  rotation,
+  variation,
+  append,
+  dual,
+}: SuroiItemImageProps) {
+  return (
+    <Image
+      width={width ?? 100}
+      height={height ?? 100}
+      style={{
+        rotate: `${rotation ?? 0}deg`,
+      }}
+      src={getSuroiImageLink(
+        getSuroiItem(
+          itemID,
+          variation ?? undefined,
+          append ?? "",
+          dual ?? false,
+        ),
+      )}
+      alt={getSuroiItem(itemID)?.name}
+    />
+  );
 }
 
 export interface SuroiItemImageProps extends React.PropsWithChildren {
-	itemID: string,
-	width?: number,
-	height?: number,
-	rotation?: number,
-	variation?: number,
-	append?: string,
-	dual?: boolean
+  itemID: string;
+  width?: number;
+  height?: number;
+  rotation?: number;
+  variation?: number;
+  append?: string;
+  dual?: boolean;
 }
diff --git a/components/generics/GenericArticlePage.tsx b/components/generics/GenericArticlePage.tsx
@@ -91,10 +91,13 @@ export default function GenericArticlePage<T extends ObjectDefinition>(
 
     return (
       <>
-        <div className="col-span-4 lg:col-span-6 prose prose-invert">
+        <div className="grow prose prose-invert">
           <h1 className="hidden sm:block">
             {item?.name ?? combinedArticle?.title}
-						<EditButton path={args.path} id={item?.idString ?? combinedArticle?.fileName ?? ""} />
+            <EditButton
+              path={args.path}
+              id={item?.idString ?? combinedArticle?.fileName ?? ""}
+            />
           </h1>
           {
             // If there is an article, render it
@@ -105,9 +108,7 @@ export default function GenericArticlePage<T extends ObjectDefinition>(
               <Empty />
             )
           }
-					{
-						args.After && args.After
-					}
+          {args.After && args.After}
         </div>
         {item ? (
           <args.Sidebar item={item} />
@@ -138,7 +139,7 @@ export interface GenericArticlePageArgs<T extends ObjectDefinition> {
   items: T[];
   combinedArticles?: CombinedArticle<T>[];
   Sidebar: ComponentType<{ item: T }>;
-	After?: ReactNode
+  After?: ReactNode;
 }
 
 export interface CombinedArticle<T extends ObjectDefinition> {

diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx
@@ -46,7 +46,10 @@ export default function Footer() {
   );
 }
 
-function FooterLink({ href, children }: React.PropsWithChildren & { href: string }) {
+function FooterLink({
+  href,
+  children,
+}: React.PropsWithChildren & { href: string }) {
   return (
     <NextLink href={href} className="w-fit hover:text-white transition-colors">
       {children}

diff --git a/components/layouts/GenericLayoutFactory.tsx b/components/layouts/GenericLayoutFactory.tsx
@@ -24,7 +24,7 @@ export default function GenericLayoutFactory<T extends ObjectDefinition>(
 
     return (
       <>
-        <div className="col-span-4 lg:col-span-6 prose prose-invert">
+        <div className="grow prose prose-invert">
           <h1 className="hidden sm:block">{item.name}</h1>
           {children}
         </div>