sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes for mobile responsiveness on the console page (#2411)

This commit is contained in:
Oreo Oreoniv 2020-10-03 21:21:09 +03:00 committed by GitHub
parent 1616cf1318
commit 6893f9bfcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/scripts/components/server/ServerConsole.tsx
View File

@ -65,7 +65,7 @@ export default () => {
return ( return (
<ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}> <ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
<div css={tw`w-full md:w-1/4`}> <div css={tw`w-full lg:w-1/4`}>
<TitledGreyBox css={tw`break-all`} title={name} icon={faServer}> <TitledGreyBox css={tw`break-all`} title={name} icon={faServer}>
<p css={tw`text-xs uppercase`}> <p css={tw`text-xs uppercase`}>
<FontAwesomeIcon <FontAwesomeIcon
@ -138,7 +138,7 @@ export default () => {
</div> </div>
} }
</div> </div>
<div css={tw`w-full md:flex-1 md:ml-4 mt-4 md:mt-0`}> <div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
<SuspenseSpinner> <SuspenseSpinner>
<ChunkedConsole/> <ChunkedConsole/>
<ChunkedStatGraphs/> <ChunkedStatGraphs/>

40
resources/scripts/components/server/StatGraphs.tsx
View File

@ -142,24 +142,28 @@ export default () => {
return ( return (
<div css={tw`flex flex-wrap mt-4`}> <div css={tw`flex flex-wrap mt-4`}>
<TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`md:flex-1 w-full md:w-1/2 md:mr-2`}> <div css={tw`w-full sm:w-1/2`}>
{status !== 'offline' ? <TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`mr-0 sm:mr-4`}>
<canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/> {status !== 'offline' ?
: <canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/>
<p css={tw`text-xs text-neutral-400 text-center p-3`}> :
Server is offline. <p css={tw`text-xs text-neutral-400 text-center p-3`}>
</p> Server is offline.
} </p>
</TitledGreyBox> }
<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`}> </TitledGreyBox>
{status !== 'offline' ? </div>
<canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/> <div css={tw`w-full sm:w-1/2 mt-4 sm:mt-0`}>
: <TitledGreyBox title={'CPU usage'} icon={faMicrochip} css={tw`ml-0 sm:ml-4`}>
<p css={tw`text-xs text-neutral-400 text-center p-3`}> {status !== 'offline' ?
Server is offline. <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
</p> :
} <p css={tw`text-xs text-neutral-400 text-center p-3`}>
</TitledGreyBox> Server is offline.
</p>
}
</TitledGreyBox>
</div>
</div> </div>
); );
}; };