responsiveness changes

Author: tdjsnelling

client/components/Comment.js

@@ -27,12 +27,13 @@ const Comment = ({ comment }) => {
     >
       <Box
         display="flex"
-        alignItems="center"
+        flexDirection={['column', 'row']}
+        alignItems={['flex-start', 'center']}
         justifyContent="space-between"
         mb={3}
       >
         {comment.user?.username ? (
-          <Text color="grey" icon={CommentIcon}>
+          <Text color="grey" icon={CommentIcon} mb={[2, 0]}>
             Comment by{' '}
             <Link href={`/user/${comment.user.username}`} passHref>
               <Text as="a">{comment.user.username}</Text>

client/components/Navigation.js

@@ -61,6 +61,8 @@ const Navigation = ({ isMobile, menuIsOpen, setMenuIsOpen }) => {
 
   const theme = useContext(ThemeContext)
 
+  const { asPath } = useRouter()
+
   const { username, token } = cookies
 
   const {
@@ -86,6 +88,10 @@ const Navigation = ({ isMobile, menuIsOpen, setMenuIsOpen }) => {
     setIsServer(false)
   }, [token])
 
+  useEffect(() => {
+    if (isMobile && menuIsOpen) setMenuIsOpen(false)
+  }, [asPath])
+
   if (isMobile && !menuIsOpen) return null
 
   return (

client/components/TorrentList.js

@@ -101,7 +101,7 @@ const TorrentList = ({ torrents = [], categories, total }) => {
             cell: ({ value }) => (
               <Text>{moment(value).format('Do MMM YYYY')}</Text>
             ),
-            gridWidth: '1fr',
+            gridWidth: '175px',
             rightAlign: true,
           },
         ]}

client/pages/_app.js

@@ -99,7 +99,7 @@ const GlobalStyle = createGlobalStyle(
   #__next main {
     min-height: calc(100vh - 109px);
     max-width: ${sizes.body};
-    padding: ${space[4]}px;
+    padding: ${space[4]}px ${space[4]}px 60px;
   }
   @media screen and (min-width: ${breakpoints[0]}) {
     #__next main {

client/pages/account.js

@@ -27,17 +27,20 @@ const BuyItem = ({ text, cost, wallet, handleBuy }) => {
   return (
     <Box
       display="flex"
-      alignItems="center"
+      flexDirection={['column', 'row']}
+      alignItems={['flex-start', 'center']}
       justifyContent="space-between"
       border="1px solid"
       borderColor="border"
       borderRadius={1}
       p={3}
       pl={4}
     >
-      <Text>{text}</Text>
-      <form onSubmit={handleBuy}>
-        <Box display="flex" alignItems="center">
+      <Text mb={[3, 0]} _css={{ whiteSpace: 'nowrap' }}>
+        {text}
+      </Text>
+      <Box as="form" onSubmit={handleBuy} width="100%">
+        <Box display="flex" alignItems="center" justifyContent="flex-end">
           <Text color="grey" mr={4}>
             {unavailable
               ? 'Not available to buy'
@@ -56,7 +59,7 @@ const BuyItem = ({ text, cost, wallet, handleBuy }) => {
           />
           <Button disabled={unavailable || cannotAfford}>Buy</Button>
         </Box>
-      </form>
+      </Box>
     </Box>
   )
 }
@@ -296,15 +299,15 @@ const Account = ({ token, invites = [], user, userRole }) => {
                 {moment(value).format('HH:mm Do MMM YYYY')}
               </Text>
             ),
-            gridWidth: '1.2fr',
+            gridWidth: '175px',
           },
           {
             header: 'Created',
             accessor: 'created',
             cell: ({ value }) => (
               <Text>{moment(value).format('HH:mm Do MMM YYYY')}</Text>
             ),
-            gridWidth: '1.2fr',
+            gridWidth: '175px',
           },
           ...(userRole === 'admin'
             ? [

client/pages/announcements/index.js

@@ -60,7 +60,7 @@ const Announcements = ({ announcements, pinnedAnnouncements, userRole }) => {
                     <Text>{moment(value).format('HH:mm Do MMM YYYY')}</Text>
                   ),
                   rightAlign: true,
-                  gridWidth: '1fr',
+                  gridWidth: '175px',
                 },
               ]}
             />
@@ -95,7 +95,7 @@ const Announcements = ({ announcements, pinnedAnnouncements, userRole }) => {
               <Text>{moment(value).format('HH:mm Do MMM YYYY')}</Text>
             ),
             rightAlign: true,
-            gridWidth: '1fr',
+            gridWidth: '175px',
           },
         ]}
       />

client/pages/categories/index.js

@@ -38,7 +38,7 @@ const Categories = () => {
       <Box
         as="ul"
         display="grid"
-        gridTemplateColumns="repeat(4, 1fr)"
+        gridTemplateColumns={['1fr', 'repeat(4, 1fr)']}
         gridGap={4}
         _css={{ pl: 0, listStyle: 'none' }}
       >

client/pages/reports/index.js

@@ -51,7 +51,7 @@ const Reports = ({ reports, userRole }) => {
               <Text>{moment(value).format('HH:mm Do MMM YYYY')}</Text>
             ),
             rightAlign: true,
-            gridWidth: '1fr',
+            gridWidth: '175px',
           },
         ]}
       />

client/pages/requests/[index].js

@@ -301,7 +301,7 @@ const Request = ({ request, token, user }) => {
                 cell: ({ value }) => (
                   <Text>{moment(value).format('Do MMM YYYY')}</Text>
                 ),
-                gridWidth: '1fr',
+                gridWidth: '175px',
                 rightAlign: true,
               },
               ...(user === request.createdBy._id

client/pages/requests/index.js

@@ -55,7 +55,7 @@ const Requests = ({ requests }) => {
                 {value ? <Check size={24} /> : <X size={24} />}{' '}
               </Box>
             ),
-            gridWidth: '0.5fr',
+            gridWidth: '100px',
           },
           {
             header: 'Created',
@@ -64,7 +64,7 @@ const Requests = ({ requests }) => {
               <Text>{moment(value).format('HH:mm Do MMM YYYY')}</Text>
             ),
             rightAlign: true,
-            gridWidth: '0.5fr',
+            gridWidth: '175px',
           },
         ]}
       />