From c2e28301e9751429a3196f458036d5bc57d085bc Mon Sep 17 00:00:00 2001
From: Sam Gaus <sam@gaus.co.uk>
Date: Sat, 15 Jul 2023 16:15:41 +0100
Subject: [PATCH] Improve mobile experience

---
 .../greenbox-web/src/components/Header.tsx    |  6 ++---
 .../greenbox-web/src/components/IotMs.tsx     | 19 +++++++++++----
 .../greenbox-web/src/components/MetaInfo.tsx  | 21 +++++++---------
 .../greenbox-web/src/components/Section.tsx   | 24 +++++++++----------
 4 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/greenbox-web/src/components/Header.tsx b/packages/greenbox-web/src/components/Header.tsx
index 17b1b85..ddf6342 100644
--- a/packages/greenbox-web/src/components/Header.tsx
+++ b/packages/greenbox-web/src/components/Header.tsx
@@ -48,8 +48,8 @@ export default function Header({ meta, direct, loading, error, errorMessage }: P
 
   return (
     <AccordionItem>
-      <AccordionButton fontSize="4xl" as="section">
-        <HStack alignItems="center" flex={1}>
+      <AccordionButton fontSize="4xl" as="section" alignItems="start">
+        <HStack alignItems="center" flex={1} maxWidth="100%" wrap="wrap">
           <Heading as="h1">Greenbox</Heading>
           <Box>
             <SwitchButton />
@@ -68,7 +68,7 @@ export default function Header({ meta, direct, loading, error, errorMessage }: P
             ) : null}
           </Box>
         </HStack>
-        <AccordionIcon />
+        <AccordionIcon height="1.1em" />
       </AccordionButton>
       <AccordionPanel>
         <Stack>
diff --git a/packages/greenbox-web/src/components/IotMs.tsx b/packages/greenbox-web/src/components/IotMs.tsx
index a958b31..03f724b 100644
--- a/packages/greenbox-web/src/components/IotMs.tsx
+++ b/packages/greenbox-web/src/components/IotMs.tsx
@@ -1,5 +1,5 @@
 import { Badge, Box, Flex, SimpleGrid, Text } from "@chakra-ui/react";
-import { IotMStatus, ItemStatus, RawIotM } from "greenbox-data";
+import { IotMStatus, RawIotM } from "greenbox-data";
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
 
@@ -11,9 +11,14 @@ import Section from "./Section";
 
 function Year({ year, complete }: { year: number; complete: boolean }) {
   return (
-    <Flex key={`year-${year}`} alignItems="center" justifyContent="flex-end">
+    <Flex
+      gridColumn={["1 / span 3", null, 1]}
+      key={`year-${year}`}
+      alignItems="center"
+      justifyContent={[null, null, "flex-end"]}
+    >
       <Badge
-        sx={{ transform: "rotate(270deg)" }}
+        transform={[null, null, "rotate(270deg)"]}
         fontSize="sm"
         bg={complete ? "complete" : undefined}
       >
@@ -70,7 +75,11 @@ export default function IotMs({ iotms: playerIotMs }: Props) {
       ]}
       max={iotms.length}
     >
-      <SimpleGrid columns={[13]} spacing={1} gridTemplateColumns="auto repeat(12, minmax(0, 1fr))">
+      <SimpleGrid
+        spacing={1}
+        columns={[3, null, 13]}
+        gridTemplateColumns={[null, null, "auto repeat(12, minmax(0, 1fr))"]}
+      >
         {iotmChunks.map((yearChunk, year) => {
           const all = yearChunk
             .filter(notNullOrUndefined)
@@ -87,7 +96,7 @@ export default function IotMs({ iotms: playerIotMs }: Props) {
                   status={idToIotM[iotm.id]?.[1] ?? 0}
                 />
               ) : (
-                <Box key={`blank-${i}`} />
+                <Box display={["none", null, "block"]} key={`blank-${i}`} />
               ),
             ),
           ];
diff --git a/packages/greenbox-web/src/components/MetaInfo.tsx b/packages/greenbox-web/src/components/MetaInfo.tsx
index e251248..8e0241b 100644
--- a/packages/greenbox-web/src/components/MetaInfo.tsx
+++ b/packages/greenbox-web/src/components/MetaInfo.tsx
@@ -1,10 +1,9 @@
-import { HStack, IconButton, Text } from "@chakra-ui/react";
+import { HStack, Text } from "@chakra-ui/react";
 import { formatDistance, intlFormat } from "date-fns";
 import { RawSnapshotData } from "greenbox-data";
 import { useEffect, useMemo, useState } from "react";
 
 import { FavouriteButton } from "./FavouriteButton";
-import Image from "./Image";
 
 type Props = {
   meta: RawSnapshotData["meta"];
@@ -35,15 +34,13 @@ export default function MetaInfo({ meta, direct }: Props) {
   const timeago = useMemo(() => formatDistance(date, now, { addSuffix: true }), [now, date]);
 
   return (
-    <Text fontSize="large">
-      <HStack spacing="0.25em">
-        <span title={`r${meta.revision}`}>{direct ? "Private s" : "S"}napshot</span>
-        <span>by</span>
-        <b title={`Player #${meta.id}`}>{meta.name}</b>
-        <span>from</span>
-        <span title={humanDate}>{timeago}</span>
-        {!direct && <FavouriteButton />}
-      </HStack>
-    </Text>
+    <HStack fontSize="large" spacing="0.25em" wrap="wrap">
+      <Text title={`r${meta.revision}`}>{`${direct ? "Private s" : "S"}napshot`}</Text>{" "}
+      <Text>by</Text>{" "}
+      <Text fontWeight="bold" title={`Player #${meta.id}`}>
+        {meta.name}
+      </Text>{" "}
+      <Text>from</Text> <Text title={humanDate}>{timeago}</Text> {!direct && <FavouriteButton />}
+    </HStack>
   );
 }
diff --git a/packages/greenbox-web/src/components/Section.tsx b/packages/greenbox-web/src/components/Section.tsx
index a255b6b..6cd7662 100644
--- a/packages/greenbox-web/src/components/Section.tsx
+++ b/packages/greenbox-web/src/components/Section.tsx
@@ -23,18 +23,18 @@ interface Props extends React.PropsWithChildren {
 export default function Section({ title, icon, loading = false, values, max, children }: Props) {
   return (
     <AccordionItem isDisabled={loading}>
-      <Heading>
-        <AccordionButton fontSize="3xl">
-          <Stack direction="row" flex="1" textAlign="left">
-            <AlphaImage src={icon} />
-            <Box>{title}</Box>
-          </Stack>
-          <Box alignSelf="stretch" flex="1">
-            <Progress values={values} max={max} />
-          </Box>
-          {loading ? <Spinner /> : <AccordionIcon />}
-        </AccordionButton>
-      </Heading>
+      <AccordionButton fontSize="3xl">
+        <Stack direction="row" flex="1" textAlign="left">
+          <AlphaImage src={icon} />
+          <Heading fontSize={["xl", null, "3xl"]} fontWeight="normal">
+            {title}
+          </Heading>
+        </Stack>
+        <Box alignSelf="stretch" flex="1 1">
+          <Progress values={values} max={max} />
+        </Box>
+        {loading ? <Spinner /> : <AccordionIcon />}
+      </AccordionButton>
       <AccordionPanel>{children}</AccordionPanel>
     </AccordionItem>
   );