Skip to content

Commit 2a42ef5

Browse files
DaneEverittDaneEveritt
committed
Mobile responsiveness fixes
1 parent 47d59ca commit 2a42ef5

File tree

5 files changed

+66
-72
lines changed

5 files changed

+66
-72
lines changed

‎resources/scripts/components/dashboard/ServerRow.tsx‎

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,12 @@ import tw from 'twin.macro';
99
import GreyRowBox from '@/components/elements/GreyRowBox';
1010
import Spinner from '@/components/elements/Spinner';
1111
import styled from 'styled-components/macro';
12-
import { IconProp } from '@fortawesome/fontawesome-svg-core';
1312
import isEqual from 'react-fast-compare';
1413

1514
// Determines if the current value is in an alarm threshold so we can show it in red rather
1615
// than the more faded default style.
1716
const isAlarmState = (current: number, limit: number): boolean => limit > 0 && (current / (limit * 1024 * 1024) >= 0.90);
1817

19-
interface IconProps {
20-
icon: IconProp;
21-
usage: number;
22-
limit: string;
23-
isAlarm: boolean;
24-
}
25-
2618
const Icon = memo(styled(FontAwesomeIcon)<{ $alarm: boolean }>`
2719
${props => props.$alarm ? tw`text-red-400` : tw`text-neutral-500`};
2820
`, isEqual);
@@ -69,29 +61,31 @@ export default ({ server, className }: { server: Server; className?: string }) =
6961
const memorylimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : 'Unlimited';
7062

7163
return (
72-
<GreyRowBox as={Link} to={`/server/${server.id}`} className={className}>
73-
<div className={'icon'} css={tw`hidden md:block`}>
74-
<FontAwesomeIcon icon={faServer}/>
75-
</div>
76-
<div css={tw`flex-1 md:ml-4`}>
77-
<p css={tw`text-lg break-all`}>{server.name}</p>
78-
{!!server.description &&
79-
<p css={tw`text-sm text-neutral-300 break-all`}>{server.description}</p>
80-
}
81-
</div>
82-
<div css={tw`w-48 overflow-hidden self-start hidden lg:block`}>
83-
<div css={tw`flex ml-4 justify-end`}>
84-
<FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
85-
<p css={tw`text-sm text-neutral-400 ml-2`}>
86-
{
87-
server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
88-
<span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
89-
))
90-
}
91-
</p>
64+
<GreyRowBox as={Link} to={`/server/${server.id}`} className={className} css={tw`grid grid-cols-12 gap-4`}>
65+
<div css={tw`flex items-center col-span-11 sm:col-span-5 lg:col-span-6`}>
66+
<div className={'icon'} css={tw`mr-4`}>
67+
<FontAwesomeIcon icon={faServer}/>
68+
</div>
69+
<div>
70+
<p css={tw`text-lg break-words`}>{server.name}</p>
71+
{!!server.description &&
72+
<p css={tw`text-sm text-neutral-300 break-all`}>{server.description}</p>
73+
}
9274
</div>
9375
</div>
94-
<div css={tw`w-1/3 sm:w-1/2 lg:w-1/3 flex items-baseline justify-center relative`}>
76+
<div css={tw`hidden lg:col-span-2 lg:flex ml-4 justify-end h-full`}>
77+
<FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
78+
<p css={tw`text-sm text-neutral-400 ml-2`}>
79+
{
80+
server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
81+
<React.Fragment key={allocation.ip + allocation.port.toString()}>
82+
{allocation.alias || allocation.ip}:{allocation.port}
83+
</React.Fragment>
84+
))
85+
}
86+
</p>
87+
</div>
88+
<div css={tw`hidden col-span-7 lg:col-span-4 sm:flex items-baseline justify-center`}>
9589
{!stats ?
9690
!statsError ?
9791
<Spinner size={'small'}/>
@@ -134,21 +128,19 @@ export default ({ server, className }: { server: Server; className?: string }) =
134128
</div>
135129
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
136130
</div>
137-
<div css={tw`flex-1 flex justify-end sm:hidden`}>
138-
<div css={tw`flex items-end text-right`}>
139-
<div
140-
css={[
141-
tw`w-3 h-3 rounded-full`,
142-
(!stats?.status || stats?.status === 'offline')
143-
? tw`bg-red-500`
144-
: (stats?.status === 'running' ? tw`bg-green-500` : tw`bg-yellow-500`),
145-
]}
146-
/>
147-
</div>
148-
</div>
149131
</React.Fragment>
150132
}
151133
</div>
134+
<div css={tw`col-span-1 sm:hidden flex justify-end`}>
135+
<div
136+
css={[
137+
tw`w-3 h-3 rounded-full`,
138+
(!stats?.status || stats?.status === 'offline')
139+
? tw`bg-red-500`
140+
: (stats?.status === 'running' ? tw`bg-green-500` : tw`bg-yellow-500`),
141+
]}
142+
/>
143+
</div>
152144
</GreyRowBox>
153145
);
154146
};

‎resources/scripts/components/elements/GreyRowBox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import styled from 'styled-components/macro';
22
import tw from 'twin.macro';
33

44
export default styled.div<{ $hoverable?: boolean }>`
5-
${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150`};
5+
${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150 overflow-hidden`};
66
77
${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
88
9-
& > div.icon {
9+
& .icon {
1010
${tw`rounded-full bg-neutral-500 p-3`};
1111
}
1212
`;

‎resources/scripts/components/server/backups/BackupRow.tsx‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -40,33 +40,35 @@ export default ({ backup, className }: Props) => {
4040
});
4141

4242
return (
43-
<GreyRowBox css={tw`flex items-center`} className={className}>
44-
<div css={tw`mr-4`}>
45-
{backup.completedAt ?
46-
<FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300 hidden md:block`}/>
47-
:
48-
<Spinner size={'small'}/>
49-
}
50-
</div>
51-
<div css={tw`flex-1`}>
52-
<p css={tw`flex items-center text-sm mb-1`}>
53-
{!backup.isSuccessful &&
54-
<span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
55-
Failed
56-
</span>
43+
<GreyRowBox css={tw`flex-wrap md:flex-no-wrap items-center`} className={className}>
44+
<div css={tw`flex items-center truncate w-full md:flex-1`}>
45+
<div css={tw`mr-4`}>
46+
{backup.completedAt ?
47+
<FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300`}/>
48+
:
49+
<Spinner size={'small'}/>
5750
}
58-
<div css={tw`break-all`}>
59-
{backup.name}
51+
</div>
52+
<div css={tw`flex flex-col truncate`}>
53+
<div css={tw`flex items-center text-sm mb-1`}>
54+
{!backup.isSuccessful &&
55+
<span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
56+
Failed
57+
</span>
58+
}
59+
<p css={tw`break-all truncate`}>
60+
{backup.name}
61+
</p>
62+
{(backup.completedAt && backup.isSuccessful) &&
63+
<span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
64+
}
6065
</div>
61-
{(backup.completedAt && backup.isSuccessful) &&
62-
<span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
63-
}
64-
</p>
65-
<p css={tw`text-xs text-neutral-400 font-mono hidden md:block`}>
66-
{backup.uuid}
67-
</p>
66+
<p css={tw`mt-1 md:mt-0 text-xs text-neutral-400 font-mono truncate`}>
67+
{backup.uuid}
68+
</p>
69+
</div>
6870
</div>
69-
<div css={tw`ml-8 text-center`}>
71+
<div css={tw`flex-1 md:flex-none md:w-48 mt-4 md:mt-0 md:ml-8 md:text-center`}>
7072
<p
7173
title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')}
7274
css={tw`text-sm`}
@@ -76,7 +78,7 @@ export default ({ backup, className }: Props) => {
7678
<p css={tw`text-2xs text-neutral-500 uppercase mt-1`}>Created</p>
7779
</div>
7880
<Can action={'backup.download'}>
79-
<div css={tw`ml-6`} style={{ marginRight: '-0.5rem' }}>
81+
<div css={tw`mt-4 md:mt-0 ml-6`} style={{ marginRight: '-0.5rem' }}>
8082
{!backup.completedAt ?
8183
<div css={tw`p-2 invisible`}>
8284
<FontAwesomeIcon icon={faEllipsisH}/>

‎resources/scripts/components/server/backups/CreateBackupButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default () => {
9494
<ModalContent appear visible={visible} onDismissed={() => setVisible(false)}/>
9595
</Formik>
9696
}
97-
<Button onClick={() => setVisible(true)}>
97+
<Button css={tw`w-full sm:w-auto`} onClick={() => setVisible(true)}>
9898
Create backup
9999
</Button>
100100
</>

‎resources/scripts/components/server/files/FileObjectRow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
3838

3939
return (
4040
(!canReadContents || (file.isFile && !file.isEditable())) ?
41-
<div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default`}>
41+
<div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default overflow-hidden truncate`}>
4242
{children}
4343
</div>
4444
:
4545
<NavLink
4646
to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
47-
css={tw`flex flex-1 text-neutral-300 no-underline p-3`}
47+
css={tw`flex flex-1 text-neutral-300 no-underline p-3 overflow-hidden truncate`}
4848
onClick={onRowClick}
4949
>
5050
{children}
@@ -69,7 +69,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
6969
<FontAwesomeIcon icon={faFolder}/>
7070
}
7171
</div>
72-
<div css={tw`flex-1 break-all`}>
72+
<div css={tw`flex-1 break-all truncate`}>
7373
{file.name}
7474
</div>
7575
{file.isFile &&

0 commit comments

Comments
 (0)