fix: make pages with lists consistent

pyrohost · Nov 17, 2024 · 9f6fbb6 · 9f6fbb6
1 parent e99b127
commit 9f6fbb6
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 173 deletions.
diff --git a/resources/scripts/components/elements/pages/PageList.tsx b/resources/scripts/components/elements/pages/PageList.tsx
@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const PageListContainer = ({ className, children }: Props) => {
+    return (
+        <div
+            style={{
+                background: 'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(16, 16, 16) 0%, rgb(4, 4, 4) 100%)',
+            }}
+            className={clsx(className, 'p-1 border-[1px] border-[#ffffff12] rounded-xl')}
+        >
+            <div className='flex h-full w-full flex-col gap-1 overflow-hidden rounded-lg'>{children}</div>
+        </div>
+    );
+};
+PageListContainer.displayName = 'PageListContainer';
+
+const PageListItem = ({ className, children }: Props) => {
+    return (
+        <div
+            className={clsx(
+                className,
+                'flex items-center rounded-md bg-[#ffffff11] px-2 sm:px-6 py-4 transition duration-100 hover:bg-[#ffffff19] hover:duration-0 gap-4 flex-col sm:flex-row',
+            )}
+        >
+            {children}
+        </div>
+    );
+};
+PageListItem.displayName = 'PageListItem';
+
+export { PageListContainer, PageListItem };
diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx
@@ -5,6 +5,7 @@ import Can from '@/components/elements/Can';
 import { MainPageHeader } from '@/components/elements/MainPageHeader';
 import Pagination from '@/components/elements/Pagination';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import { PageListContainer } from '@/components/elements/pages/PageList';
 import BackupRow from '@/components/server/backups/BackupRow';
 import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
 
@@ -67,20 +68,11 @@ const BackupContainer = () => {
                             </p>
                         )
                     ) : (
-                        <div
-                            data-pyro-backups
-                            style={{
-                                background:
-                                    'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(16, 16, 16) 0%, rgb(4, 4, 4) 100%)',
-                            }}
-                            className='p-1 border-[1px] border-[#ffffff12] rounded-xl'
-                        >
-                            <div className='flex h-full w-full flex-col gap-1 overflow-hidden rounded-lg'>
-                                {items.map((backup) => (
-                                    <BackupRow key={backup.uuid} backup={backup} />
-                                ))}
-                            </div>
-                        </div>
+                        <PageListContainer>
+                            {items.map((backup) => (
+                                <BackupRow key={backup.uuid} backup={backup} />
+                            ))}
+                        </PageListContainer>
                     )
                 }
             </Pagination>

diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -5,6 +5,7 @@ import { format, formatDistanceToNow } from 'date-fns';
 import Can from '@/components/elements/Can';
 import { ContextMenu, ContextMenuTrigger } from '@/components/elements/ContextMenu';
 import Spinner from '@/components/elements/Spinner';
+import { PageListItem } from '@/components/elements/pages/PageList';
 import { SocketEvent } from '@/components/server/events';
 
 import { bytesToString } from '@/lib/formatters';
@@ -53,60 +54,62 @@ export default ({ backup }: Props) => {
 
     return (
         <ContextMenu>
-            <ContextMenuTrigger className='flex flex-1 items-center rounded-md bg-[#ffffff11] px-6 py-4 transition duration-100 hover:bg-[#ffffff19] hover:duration-0 gap-4 flex-col sm:flex-row'>
-                <div className={`flex-auto max-w-full box-border`}>
-                    <div className='flex flex-row align-middle items-center gap-6 truncate'>
-                        <div className='flex-none'>
-                            {backup.completedAt === null ? (
-                                <Spinner size={'small'} />
-                            ) : backup.isLocked ? (
-                                <FontAwesomeIcon icon={faLock} className='text-red-500' />
-                            ) : (
-                                <FontAwesomeIcon icon={faFile} />
-                            )}
-                        </div>
-                        <div className={`flex items-center w-full md:flex-1`}>
-                            <div className={`flex flex-col`}>
-                                <div className={`flex items-center text-sm mb-1`}>
-                                    {backup.completedAt !== null && !backup.isSuccessful && (
-                                        <span
-                                            className={`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}
-                                        >
-                                            Failed
-                                        </span>
-                                    )}
-                                    <div className={`flex gap-2 items-center justify-center`}>
-                                        <p className='break-words truncate text-lg'>{backup.name}</p>
+            <ContextMenuTrigger>
+                <PageListItem>
+                    <div className={`flex-auto max-w-full box-border`}>
+                        <div className='flex flex-row align-middle items-center gap-6 truncate'>
+                            <div className='flex-none'>
+                                {backup.completedAt === null ? (
+                                    <Spinner size={'small'} />
+                                ) : backup.isLocked ? (
+                                    <FontAwesomeIcon icon={faLock} className='text-red-500' />
+                                ) : (
+                                    <FontAwesomeIcon icon={faFile} />
+                                )}
+                            </div>
+                            <div className={`flex items-center w-full md:flex-1`}>
+                                <div className={`flex flex-col`}>
+                                    <div className={`flex items-center text-sm mb-1`}>
+                                        {backup.completedAt !== null && !backup.isSuccessful && (
+                                            <span
+                                                className={`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}
+                                            >
+                                                Failed
+                                            </span>
+                                        )}
+                                        <div className={`flex gap-2 items-center justify-center`}>
+                                            <p className='break-words truncate text-lg'>{backup.name}</p>
+                                        </div>
                                     </div>
+                                    {backup.checksum && (
+                                        <p className={`mt-1 md:mt-0 text-xs text-zinc-400 font-mono truncate`}>
+                                            {backup.checksum}
+                                        </p>
+                                    )}
                                 </div>
-                                {backup.checksum && (
-                                    <p className={`mt-1 md:mt-0 text-xs text-zinc-400 font-mono truncate`}>
-                                        {backup.checksum}
-                                    </p>
-                                )}
                             </div>
                         </div>
                     </div>
-                </div>
 
-                <div className='flex flex-row justify-center font-medium sm:justify-between min-w-full lg:w-96 sm:min-w-40'>
-                    {backup.completedAt !== null && backup.isSuccessful && (
-                        <>
-                            <span className={`text-xs sm:flex-initial sm:ml-0`}>{bytesToString(backup.bytes)}</span>
-                            <p className={`text-xs inline sm:hidden`}>,&nbsp;</p>
-                        </>
-                    )}
-                    <p
-                        title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')}
-                        className={`text-xs sm:flex-initial`}
-                    >
-                        {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
-                    </p>
-                </div>
+                    <div className='flex flex-row justify-center font-medium sm:justify-between min-w-full lg:w-96 sm:min-w-40'>
+                        {backup.completedAt !== null && backup.isSuccessful && (
+                            <>
+                                <span className={`text-xs sm:flex-initial sm:ml-0`}>{bytesToString(backup.bytes)}</span>
+                                <p className={`text-xs inline sm:hidden`}>,&nbsp;</p>
+                            </>
+                        )}
+                        <p
+                            title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')}
+                            className={`text-xs sm:flex-initial`}
+                        >
+                            {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
+                        </p>
+                    </div>
 
-                <Can action={['backup.download', 'backup.restore', 'backup.delete']} matchAny>
-                    {!backup.completedAt ? <></> : <BackupContextMenu backup={backup} />}
-                </Can>
+                    <Can action={['backup.download', 'backup.restore', 'backup.delete']} matchAny>
+                        {!backup.completedAt ? <></> : <BackupContextMenu backup={backup} />}
+                    </Can>
+                </PageListItem>
             </ContextMenuTrigger>
         </ContextMenu>
     );

diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -5,6 +5,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import Can from '@/components/elements/Can';
 import { MainPageHeader } from '@/components/elements/MainPageHeader';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import { PageListContainer, PageListItem } from '@/components/elements/pages/PageList';
 import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseButton';
 import DatabaseRow from '@/components/server/databases/DatabaseRow';
 
@@ -58,27 +59,15 @@ export default () => {
             {!databases.length && loading ? null : (
                 <>
                     {databases.length > 0 ? (
-                        <div
-                            data-pyro-databases
-                            style={{
-                                background:
-                                    'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(16, 16, 16) 0%, rgb(4, 4, 4) 100%)',
-                            }}
-                            className='p-1 border-[1px] border-[#ffffff12] rounded-xl'
-                        >
-                            <div className='flex h-full w-full flex-col gap-1 overflow-hidden rounded-lg'>
-                                <For each={databases} memo>
-                                    {(database, index) => (
-                                        <div
-                                            key={index}
-                                            className='flex items-center rounded-md bg-[#ffffff11] px-2 sm:px-6 py-4 transition duration-100 hover:bg-[#ffffff19] hover:duration-0 gap-4 flex-col sm:flex-row'
-                                        >
-                                            <DatabaseRow key={database.id} database={database} />
-                                        </div>
-                                    )}
-                                </For>
-                            </div>
-                        </div>
+                        <PageListContainer data-pyro-backups>
+                            <For each={databases} memo>
+                                {(database, index) => (
+                                    <PageListItem key={index}>
+                                        <DatabaseRow key={database.id} database={database} />
+                                    </PageListItem>
+                                )}
+                            </For>
+                        </PageListContainer>
                     ) : (
                         <p className={`text-center text-sm text-zinc-300`}>
                             {databaseLimit > 0

diff --git a/resources/scripts/components/server/network/AllocationRow.tsx b/resources/scripts/components/server/network/AllocationRow.tsx
@@ -8,6 +8,7 @@ import CopyOnClick from '@/components/elements/CopyOnClick';
 import { Textarea } from '@/components/elements/Input';
 import InputSpinner from '@/components/elements/InputSpinner';
 import { Button } from '@/components/elements/button/index';
+import { PageListItem } from '@/components/elements/pages/PageList';
 import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
 
 import { ip } from '@/lib/formatters';
@@ -56,11 +57,7 @@ const AllocationRow = ({ allocation }: Props) => {
     };
 
     return (
-        <div
-            className={
-                'flex rounded-sm p-1 transition bg-[#ffffff08] border-[1px] border-[#ffffff07] px-6 py-4 items-center'
-            }
-        >
+        <PageListItem>
             <div className={'flex items-center w-full md:w-auto'}>
                 <div className={'mr-4 flex-1 md:w-40'}>
                     {allocation.alias ? (
@@ -115,7 +112,7 @@ const AllocationRow = ({ allocation }: Props) => {
                     </>
                 )}
             </div>
-        </div>
+        </PageListItem>
     );
 };
 

diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -5,6 +5,7 @@ import isEqual from 'react-fast-compare';
 import Can from '@/components/elements/Can';
 import { MainPageHeader } from '@/components/elements/MainPageHeader';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import { PageListContainer } from '@/components/elements/pages/PageList';
 import AllocationRow from '@/components/server/network/AllocationRow';
 
 import createServerAllocation from '@/api/server/network/createServerAllocation';
@@ -83,25 +84,13 @@ const NetworkContainer = () => {
             </MainPageHeader>
             {!data ? null : (
                 <>
-                    <div
-                        data-pyro-network-container-allocations
-                        style={{
-                            background:
-                                'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(16, 16, 16) 0%, rgb(4, 4, 4) 100%)',
-                        }}
-                        className='p-1 border-[1px] border-[#ffffff12] rounded-xl'
-                    >
-                        <div className='w-full h-full overflow-hidden rounded-lg flex flex-col gap-1'>
-                            <For each={data} memo>
-                                {(allocation) => (
-                                    <AllocationRow
-                                        key={`${allocation.ip}:${allocation.port}`}
-                                        allocation={allocation}
-                                    />
-                                )}
-                            </For>
-                        </div>
-                    </div>
+                    <PageListContainer data-pyro-network-container-allocations>
+                        <For each={data} memo>
+                            {(allocation) => (
+                                <AllocationRow key={`${allocation.ip}:${allocation.port}`} allocation={allocation} />
+                            )}
+                        </For>
+                    </PageListContainer>
                 </>
             )}
         </ServerContentBlock>

diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
@@ -5,6 +5,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import Can from '@/components/elements/Can';
 import { MainPageHeader } from '@/components/elements/MainPageHeader';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import { PageListContainer, PageListItem } from '@/components/elements/pages/PageList';
 import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
 import ScheduleRow from '@/components/server/schedules/ScheduleRow';
 
@@ -61,24 +62,15 @@ function ScheduleContainer() {
                             There are no schedules configured for this server.
                         </p>
                     ) : (
-                        <div
-                            data-pyro-schedules
-                            style={{
-                                background:
-                                    'radial-gradient(124.75% 124.75% at 50.01% -10.55%, rgb(16, 16, 16) 0%, rgb(4, 4, 4) 100%)',
-                            }}
-                            className='rounded-xl border-[1px] border-[#ffffff12] p-1'
-                        >
-                            <div className='flex h-full w-full flex-col gap-1 overflow-hidden rounded-lg'>
-                                {schedules.map((schedule) => (
-                                    <NavLink key={schedule.id} to={`${schedule.id}`} end>
-                                        <div className='flex items-center rounded-md bg-[#ffffff11] px-2 sm:px-6 py-4 transition duration-100 hover:bg-[#ffffff19] hover:duration-0 gap-4 flex-col sm:flex-row'>
-                                            <ScheduleRow schedule={schedule} />
-                                        </div>
-                                    </NavLink>
-                                ))}
-                            </div>
-                        </div>
+                        <PageListContainer data-pyro-schedules>
+                            {schedules.map((schedule) => (
+                                <NavLink key={schedule.id} to={`${schedule.id}`} end>
+                                    <PageListItem>
+                                        <ScheduleRow schedule={schedule} />
+                                    </PageListItem>
+                                </NavLink>
+                            ))}
+                        </PageListContainer>
                     )}
                 </>
             )}

diff --git a/resources/scripts/components/server/startup/StartupContainer.tsx b/resources/scripts/components/server/startup/StartupContainer.tsx
@@ -104,15 +104,15 @@ const StartupContainer = () => {
                     settings as they can cause your server to become inoperable.
                 </h2>
             </MainPageHeader>
-            <div className={`grid lg:grid-cols-3 gap-8`}>
+            <div className={`flex gap-8 lg:flex-row flex-col`}>
                 <TitledGreyBox title={'Startup Command'} className={`col-span-2`}>
                     <CopyOnClick text={data.invocation}>
                         <div className={`px-1 py-2`}>
                             <p className={`font-mono bg-zinc-900 rounded py-2 px-4`}>{data.invocation}</p>
                         </div>
                     </CopyOnClick>
                 </TitledGreyBox>
-                <TitledGreyBox title={'Docker Image'}>
+                <TitledGreyBox title={'Docker Image'} className='overflow-x-auto'>
                     {Object.keys(data.dockerImages).length > 1 && !isCustomImage ? (
                         <>
                             <InputSpinner visible={loading}>