From 2a42ef5c62c1791fc0616821a7be31d5bd9733c8 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 3 Oct 2020 16:25:39 -0700
Subject: [PATCH] Mobile responsiveness fixes

---
 .../components/dashboard/ServerRow.tsx        | 74 +++++++++----------
 .../components/elements/GreyRowBox.tsx        |  4 +-
 .../components/server/backups/BackupRow.tsx   | 52 ++++++-------
 .../server/backups/CreateBackupButton.tsx     |  2 +-
 .../components/server/files/FileObjectRow.tsx |  6 +-
 5 files changed, 66 insertions(+), 72 deletions(-)

diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index cc57870d4..5d8b6598e 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -9,20 +9,12 @@ import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import Spinner from '@/components/elements/Spinner';
 import styled from 'styled-components/macro';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import isEqual from 'react-fast-compare';
 
 // Determines if the current value is in an alarm threshold so we can show it in red rather
 // than the more faded default style.
 const isAlarmState = (current: number, limit: number): boolean => limit > 0 && (current / (limit * 1024 * 1024) >= 0.90);
 
-interface IconProps {
-    icon: IconProp;
-    usage: number;
-    limit: string;
-    isAlarm: boolean;
-}
-
 const Icon = memo(styled(FontAwesomeIcon)<{ $alarm: boolean }>`
     ${props => props.$alarm ? tw`text-red-400` : tw`text-neutral-500`};
 `, isEqual);
@@ -69,29 +61,31 @@ export default ({ server, className }: { server: Server; className?: string }) =
     const memorylimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : 'Unlimited';
 
     return (
-        <GreyRowBox as={Link} to={`/server/${server.id}`} className={className}>
-            <div className={'icon'} css={tw`hidden md:block`}>
-                <FontAwesomeIcon icon={faServer}/>
-            </div>
-            <div css={tw`flex-1 md:ml-4`}>
-                <p css={tw`text-lg break-all`}>{server.name}</p>
-                {!!server.description &&
-                <p css={tw`text-sm text-neutral-300 break-all`}>{server.description}</p>
-                }
-            </div>
-            <div css={tw`w-48 overflow-hidden self-start hidden lg:block`}>
-                <div css={tw`flex ml-4 justify-end`}>
-                    <FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
-                    <p css={tw`text-sm text-neutral-400 ml-2`}>
-                        {
-                            server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
-                                <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
-                            ))
-                        }
-                    </p>
+        <GreyRowBox as={Link} to={`/server/${server.id}`} className={className} css={tw`grid grid-cols-12 gap-4`}>
+            <div css={tw`flex items-center col-span-11 sm:col-span-5 lg:col-span-6`}>
+                <div className={'icon'} css={tw`mr-4`}>
+                    <FontAwesomeIcon icon={faServer}/>
+                </div>
+                <div>
+                    <p css={tw`text-lg break-words`}>{server.name}</p>
+                    {!!server.description &&
+                    <p css={tw`text-sm text-neutral-300 break-all`}>{server.description}</p>
+                    }
                 </div>
             </div>
-            <div css={tw`w-1/3 sm:w-1/2 lg:w-1/3 flex items-baseline justify-center relative`}>
+            <div css={tw`hidden lg:col-span-2 lg:flex ml-4 justify-end h-full`}>
+                <FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
+                <p css={tw`text-sm text-neutral-400 ml-2`}>
+                    {
+                        server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
+                            <React.Fragment key={allocation.ip + allocation.port.toString()}>
+                                {allocation.alias || allocation.ip}:{allocation.port}
+                            </React.Fragment>
+                        ))
+                    }
+                </p>
+            </div>
+            <div css={tw`hidden col-span-7 lg:col-span-4 sm:flex items-baseline justify-center`}>
                 {!stats ?
                     !statsError ?
                         <Spinner size={'small'}/>
@@ -134,21 +128,19 @@ export default ({ server, className }: { server: Server; className?: string }) =
                             </div>
                             <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
                         </div>
-                        <div css={tw`flex-1 flex justify-end sm:hidden`}>
-                            <div css={tw`flex items-end text-right`}>
-                                <div
-                                    css={[
-                                        tw`w-3 h-3 rounded-full`,
-                                        (!stats?.status || stats?.status === 'offline')
-                                            ? tw`bg-red-500`
-                                            : (stats?.status === 'running' ? tw`bg-green-500` : tw`bg-yellow-500`),
-                                    ]}
-                                />
-                            </div>
-                        </div>
                     </React.Fragment>
                 }
             </div>
+            <div css={tw`col-span-1 sm:hidden flex justify-end`}>
+                <div
+                    css={[
+                        tw`w-3 h-3 rounded-full`,
+                        (!stats?.status || stats?.status === 'offline')
+                            ? tw`bg-red-500`
+                            : (stats?.status === 'running' ? tw`bg-green-500` : tw`bg-yellow-500`),
+                    ]}
+                />
+            </div>
         </GreyRowBox>
     );
 };
diff --git a/resources/scripts/components/elements/GreyRowBox.tsx b/resources/scripts/components/elements/GreyRowBox.tsx
index e86c61dc2..139947f25 100644
--- a/resources/scripts/components/elements/GreyRowBox.tsx
+++ b/resources/scripts/components/elements/GreyRowBox.tsx
@@ -2,11 +2,11 @@ import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 
 export default styled.div<{ $hoverable?: boolean }>`
-    ${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150`};
+    ${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150 overflow-hidden`};
     
     ${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
 
-    & > div.icon {
+    & .icon {
         ${tw`rounded-full bg-neutral-500 p-3`};
     }
 `;
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index ff8b356fb..fd6874cb6 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -40,33 +40,35 @@ export default ({ backup, className }: Props) => {
     });
 
     return (
-        <GreyRowBox css={tw`flex items-center`} className={className}>
-            <div css={tw`mr-4`}>
-                {backup.completedAt ?
-                    <FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300 hidden md:block`}/>
-                    :
-                    <Spinner size={'small'}/>
-                }
-            </div>
-            <div css={tw`flex-1`}>
-                <p css={tw`flex items-center text-sm mb-1`}>
-                    {!backup.isSuccessful &&
-                    <span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
-                        Failed
-                    </span>
+        <GreyRowBox css={tw`flex-wrap md:flex-no-wrap items-center`} className={className}>
+            <div css={tw`flex items-center truncate w-full md:flex-1`}>
+                <div css={tw`mr-4`}>
+                    {backup.completedAt ?
+                        <FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300`}/>
+                        :
+                        <Spinner size={'small'}/>
                     }
-                    <div css={tw`break-all`}>
-                        {backup.name}
+                </div>
+                <div css={tw`flex flex-col truncate`}>
+                    <div css={tw`flex items-center text-sm mb-1`}>
+                        {!backup.isSuccessful &&
+                        <span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
+                            Failed
+                        </span>
+                        }
+                        <p css={tw`break-all truncate`}>
+                            {backup.name}
+                        </p>
+                        {(backup.completedAt && backup.isSuccessful) &&
+                        <span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
+                        }
                     </div>
-                    {(backup.completedAt && backup.isSuccessful) &&
-                    <span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
-                    }
-                </p>
-                <p css={tw`text-xs text-neutral-400 font-mono hidden md:block`}>
-                    {backup.uuid}
-                </p>
+                    <p css={tw`mt-1 md:mt-0 text-xs text-neutral-400 font-mono truncate`}>
+                        {backup.uuid}
+                    </p>
+                </div>
             </div>
-            <div css={tw`ml-8 text-center`}>
+            <div css={tw`flex-1 md:flex-none md:w-48 mt-4 md:mt-0 md:ml-8 md:text-center`}>
                 <p
                     title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')}
                     css={tw`text-sm`}
@@ -76,7 +78,7 @@ export default ({ backup, className }: Props) => {
                 <p css={tw`text-2xs text-neutral-500 uppercase mt-1`}>Created</p>
             </div>
             <Can action={'backup.download'}>
-                <div css={tw`ml-6`} style={{ marginRight: '-0.5rem' }}>
+                <div css={tw`mt-4 md:mt-0 ml-6`} style={{ marginRight: '-0.5rem' }}>
                     {!backup.completedAt ?
                         <div css={tw`p-2 invisible`}>
                             <FontAwesomeIcon icon={faEllipsisH}/>
diff --git a/resources/scripts/components/server/backups/CreateBackupButton.tsx b/resources/scripts/components/server/backups/CreateBackupButton.tsx
index f6af35ca0..754bc0245 100644
--- a/resources/scripts/components/server/backups/CreateBackupButton.tsx
+++ b/resources/scripts/components/server/backups/CreateBackupButton.tsx
@@ -94,7 +94,7 @@ export default () => {
                 <ModalContent appear visible={visible} onDismissed={() => setVisible(false)}/>
             </Formik>
             }
-            <Button onClick={() => setVisible(true)}>
+            <Button css={tw`w-full sm:w-auto`} onClick={() => setVisible(true)}>
                 Create backup
             </Button>
         </>
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index 43416eb4c..b27af496e 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -38,13 +38,13 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
 
     return (
         (!canReadContents || (file.isFile && !file.isEditable())) ?
-            <div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default`}>
+            <div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default overflow-hidden truncate`}>
                 {children}
             </div>
             :
             <NavLink
                 to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
-                css={tw`flex flex-1 text-neutral-300 no-underline p-3`}
+                css={tw`flex flex-1 text-neutral-300 no-underline p-3 overflow-hidden truncate`}
                 onClick={onRowClick}
             >
                 {children}
@@ -69,7 +69,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
                     <FontAwesomeIcon icon={faFolder}/>
                 }
             </div>
-            <div css={tw`flex-1 break-all`}>
+            <div css={tw`flex-1 break-all truncate`}>
                 {file.name}
             </div>
             {file.isFile &&