Skip to content

Commit 9a4c0d8

Browse files
RihanArfanRihanArfan
authored
Make interface mobile responsive (pterodactyl#2273)
1 parent 9a21584 commit 9a4c0d8

File tree

20 files changed

+130
-69
lines changed

20 files changed

+130
-69
lines changed

‎resources/scripts/components/NavigationBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import styled from 'styled-components/macro';
1111
import * as config from '@/../../tailwind.config.js';
1212

1313
const Navigation = styled.div`
14-
${tw`w-full bg-neutral-900 shadow-md`};
14+
${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
1515
1616
& > div {
1717
${tw`mx-auto w-full flex items-center`};

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,26 @@ import { httpErrorToHuman } from '@/api/http';
1414
import { format } from 'date-fns';
1515
import PageContentBlock from '@/components/elements/PageContentBlock';
1616
import tw from 'twin.macro';
17+
import { breakpoint } from '@/theme';
18+
import styled from 'styled-components/macro';
1719
import GreyRowBox from '@/components/elements/GreyRowBox';
1820

21+
const Container = styled.div`
22+
${tw`flex flex-wrap my-10`};
23+
24+
& > div {
25+
${tw`w-full`};
26+
27+
${breakpoint('md')`
28+
width: calc(50% - 1rem);
29+
`}
30+
31+
${breakpoint('xl')`
32+
${tw`w-auto flex-1`};
33+
`}
34+
}
35+
`;
36+
1937
export default () => {
2038
const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
2139
const [ keys, setKeys ] = useState<ApiKey[]>([]);
@@ -50,11 +68,11 @@ export default () => {
5068
return (
5169
<PageContentBlock title={'Account API'}>
5270
<FlashMessageRender byKey={'account'} css={tw`mb-4`}/>
53-
<div css={tw`flex`}>
54-
<ContentBox title={'Create API Key'} css={tw`flex-1`}>
71+
<Container>
72+
<ContentBox title={'Create API Key'}>
5573
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
5674
</ContentBox>
57-
<ContentBox title={'API Keys'} css={tw`ml-10 flex-1`}>
75+
<ContentBox title={'API Keys'} css={tw`mt-8 md:mt-0 md:ml-8`}>
5876
<SpinnerOverlay visible={loading}/>
5977
<ConfirmationModal
6078
visible={!!deleteIdentifier}
@@ -106,7 +124,7 @@ export default () => {
106124
))
107125
}
108126
</ContentBox>
109-
</div>
127+
</Container>
110128
</PageContentBlock>
111129
);
112130
};

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

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,16 +55,16 @@ export default ({ server, className }: { server: Server; className?: string }) =
5555

5656
return (
5757
<GreyRowBox as={Link} to={`/server/${server.id}`} className={className}>
58-
<div className={'icon'}>
58+
<div className={'icon'} css={tw`hidden md:block`}>
5959
<FontAwesomeIcon icon={faServer}/>
6060
</div>
61-
<div css={tw`flex-1 ml-4`}>
61+
<div css={tw`flex-1 md:ml-4`}>
6262
<p css={tw`text-lg`}>{server.name}</p>
6363
{!!server.description &&
6464
<p css={tw`text-sm text-neutral-300`}>{server.description}</p>
6565
}
6666
</div>
67-
<div css={tw`w-48 overflow-hidden self-start`}>
67+
<div css={tw`w-48 overflow-hidden self-start hidden lg:block`}>
6868
<div css={tw`flex ml-4 justify-end`}>
6969
<FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
7070
<p css={tw`text-sm text-neutral-400 ml-2`}>
@@ -76,7 +76,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
7676
</p>
7777
</div>
7878
</div>
79-
<div css={tw`w-1/3 flex items-baseline justify-center relative`}>
79+
<div css={tw`w-1/3 sm:w-1/2 lg:w-1/3 flex items-baseline justify-center relative`}>
8080
{!stats ?
8181
!statsError ?
8282
<Spinner size={'small'}/>
@@ -95,7 +95,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
9595
</div>
9696
:
9797
<React.Fragment>
98-
<div css={tw`flex-1 flex ml-4 justify-center`}>
98+
<div css={tw`flex-1 flex md:ml-4 sm:flex hidden justify-center`}>
9999
<FontAwesomeIcon
100100
icon={faMicrochip}
101101
css={[
@@ -113,7 +113,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
113113
{stats.cpuUsagePercent} %
114114
</p>
115115
</div>
116-
<div css={tw`flex-1 ml-4`}>
116+
<div css={tw`flex-1 ml-4 sm:block hidden`}>
117117
<div css={tw`flex justify-center`}>
118118
<FontAwesomeIcon
119119
icon={faMemory}
@@ -134,7 +134,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
134134
</div>
135135
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {memorylimit}</p>
136136
</div>
137-
<div css={tw`flex-1 ml-4`}>
137+
<div css={tw`flex-1 ml-4 sm:block hidden`}>
138138
<div css={tw`flex justify-center`}>
139139
<FontAwesomeIcon
140140
icon={faHdd}
@@ -155,6 +155,19 @@ export default ({ server, className }: { server: Server; className?: string }) =
155155
</div>
156156
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
157157
</div>
158+
159+
<div css={tw`flex-1 flex justify-end sm:hidden`}>
160+
<div css={tw`flex items-end text-right`}>
161+
<div
162+
css={[
163+
tw`w-3 h-3 rounded-full`,
164+
(!stats?.status || stats?.status === 'offline')
165+
? tw`bg-red-500`
166+
: (stats?.status === 'running' ? tw`bg-green-500` : tw`bg-yellow-500`),
167+
]}
168+
/>
169+
</div>
170+
</div>
158171
</React.Fragment>
159172
}
160173
</div>

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
44
import Spinner from '@/components/elements/Spinner';
55
import tw from 'twin.macro';
66
import styled from 'styled-components/macro';
7+
import { breakpoint } from '@/theme';
78
import Fade from '@/components/elements/Fade';
89

910
export interface RequiredModalProps {
@@ -26,9 +27,16 @@ export const ModalMask = styled.div`
2627
`;
2728

2829
const ModalContainer = styled.div<{ alignTop?: boolean }>`
30+
${breakpoint('xs')`
31+
max-width: 95%;
32+
`};
33+
34+
${breakpoint('md')`
35+
max-width: 50%;
36+
`};
37+
2938
${tw`relative flex flex-col w-full m-auto`};
3039
max-height: calc(100vh - 8rem);
31-
max-width: 50%;
3240
// @todo max-w-screen-lg perhaps?
3341
${props => props.alignTop && 'margin-top: 10%'};
3442

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import tw from 'twin.macro';
44
import config from '../../../../tailwind.config';
55

66
const SubNavigation = styled.div`
7-
${tw`w-full bg-neutral-700 shadow`};
7+
${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
88
99
& > div {
1010
${tw`flex items-center text-sm mx-auto px-2`};
1111
max-width: 1200px;
1212
1313
& > a, & > div {
14-
${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
14+
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-no-wrap transition-all duration-150`};
1515
1616
&:not(:first-of-type) {
1717
${tw`ml-2`};

‎resources/scripts/components/server/ServerConsole.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ export default () => {
6363
const memorylimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
6464

6565
return (
66-
<ServerContentBlock title={'Console'} css={tw`flex`}>
67-
<div css={tw`w-1/4`}>
66+
<ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
67+
<div css={tw`w-full md:w-1/4`}>
6868
<TitledGreyBox title={name} icon={faServer}>
6969
<p css={tw`text-xs uppercase`}>
7070
<FontAwesomeIcon
@@ -137,7 +137,7 @@ export default () => {
137137
</div>
138138
}
139139
</div>
140-
<div css={tw`flex-1 ml-4`}>
140+
<div css={tw`w-full md:flex-1 md:ml-4 mt-4 md:mt-0`}>
141141
<SuspenseSpinner>
142142
<ChunkedConsole/>
143143
<ChunkedStatGraphs/>

‎resources/scripts/components/server/StatGraphs.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,8 +141,8 @@ export default () => {
141141
}, [ instance, connected, memory, cpu ]);
142142

143143
return (
144-
<div css={tw`flex mt-4`}>
145-
<TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`flex-1 mr-2`}>
144+
<div css={tw`flex flex-wrap mt-4`}>
145+
<TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`md:flex-1 w-full md:w-1/2 md:mr-2`}>
146146
{status !== 'offline' ?
147147
<canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/>
148148
:
@@ -151,7 +151,7 @@ export default () => {
151151
</p>
152152
}
153153
</TitledGreyBox>
154-
<TitledGreyBox title={'CPU usage'} icon={faMicrochip} css={tw`flex-1 ml-2`}>
154+
<TitledGreyBox title={'CPU usage'} icon={faMicrochip} css={tw`md:flex-1 w-full md:w-1/2 md:ml-2 mt-4 md:mt-0`}>
155155
{status !== 'offline' ?
156156
<canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
157157
:

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default ({ backup, className }: Props) => {
4343
<GreyRowBox css={tw`flex items-center`} className={className}>
4444
<div css={tw`mr-4`}>
4545
{backup.completedAt ?
46-
<FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300`}/>
46+
<FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300 hidden md:block`}/>
4747
:
4848
<Spinner size={'small'}/>
4949
}
@@ -57,10 +57,10 @@ export default ({ backup, className }: Props) => {
5757
}
5858
{backup.name}
5959
{(backup.completedAt && backup.isSuccessful) &&
60-
<span css={tw`ml-3 text-neutral-300 text-xs font-thin`}>{bytesToHuman(backup.bytes)}</span>
60+
<span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
6161
}
6262
</p>
63-
<p css={tw`text-xs text-neutral-400 font-mono`}>
63+
<p css={tw`text-xs text-neutral-400 font-mono hidden md:block`}>
6464
{backup.uuid}
6565
</p>
6666
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const ChecksumModal = ({ checksum, ...props }: RequiredModalProps & { checksum:
99
The checksum of this file is:
1010
</p>
1111
<pre css={tw`mt-2 text-sm p-2 bg-neutral-900 rounded`}>
12-
<code css={tw`block font-mono`}>{checksum}</code>
12+
<code css={tw`block font-mono overflow-auto`}>{checksum}</code>
1313
</pre>
1414
</Modal>
1515
);

‎resources/scripts/components/server/databases/DatabaseRow.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,20 @@ export default ({ database, className }: Props) => {
111111
<Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
112112
<FlashMessageRender byKey={'database-connection-modal'} css={tw`mb-6`}/>
113113
<h3 css={tw`mb-6`}>Database connection details</h3>
114+
<div>
115+
<Label>Endpoint</Label>
116+
<Input type={'text'} readOnly value={database.connectionString} />
117+
</div>
118+
<div css={tw`mt-6`}>
119+
<Label>Connections from</Label>
120+
<Input type={'text'} readOnly value={database.allowConnectionsFrom} />
121+
</div>
122+
<div css={tw`mt-6`}>
123+
<Label>Username</Label>
124+
<Input type={'text'} readOnly value={database.username} />
125+
</div>
114126
<Can action={'database.view_password'}>
115-
<div>
127+
<div css={tw`mt-6`}>
116128
<Label>Password</Label>
117129
<Input type={'text'} readOnly value={database.password}/>
118130
</div>
@@ -134,22 +146,22 @@ export default ({ database, className }: Props) => {
134146
</Button>
135147
</div>
136148
</Modal>
137-
<GreyRowBox $hoverable={false} className={className}>
138-
<div>
149+
<GreyRowBox $hoverable={false} className={className} css={tw`mb-2`}>
150+
<div css={tw`hidden md:block`}>
139151
<FontAwesomeIcon icon={faDatabase} fixedWidth/>
140152
</div>
141153
<div css={tw`flex-1 ml-4`}>
142154
<p css={tw`text-lg`}>{database.name}</p>
143155
</div>
144-
<div css={tw`ml-8 text-center`}>
156+
<div css={tw`ml-8 text-center hidden md:block`}>
145157
<p css={tw`text-sm`}>{database.connectionString}</p>
146158
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
147159
</div>
148-
<div css={tw`ml-8 text-center`}>
160+
<div css={tw`ml-8 text-center hidden md:block`}>
149161
<p css={tw`text-sm`}>{database.allowConnectionsFrom}</p>
150162
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
151163
</div>
152-
<div css={tw`ml-8 text-center`}>
164+
<div css={tw`ml-8 text-center hidden md:block`}>
153165
<p css={tw`text-sm`}>{database.username}</p>
154166
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
155167
</div>

0 commit comments

Comments
 (0)