Use flexbox for layout height, better console size

retrixe · Jun 5, 2022 · 2a2353c · 2a2353c
1 parent fded657
commit 2a2353c
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 62 deletions.
diff --git a/imports/dashboard/dashboardLayout.tsx b/imports/dashboard/dashboardLayout.tsx
@@ -84,7 +84,14 @@ const DashboardLayout = (props: React.PropsWithChildren<{ loggedIn: boolean }>)
             </List>
           </Drawer>
         )}
-        <div style={{ marginLeft: drawerVariant === 'permanent' && props.loggedIn ? '200px' : undefined }}>
+        <div style={{
+          padding: 20,
+          marginLeft: drawerVariant === 'permanent' && props.loggedIn ? '200px' : undefined,
+          flexDirection: 'column',
+          display: 'flex',
+          flex: 1
+        }}
+        >
           {props.children}
         </div>
       </Layout>

diff --git a/imports/layout.tsx b/imports/layout.tsx
@@ -10,7 +10,9 @@ const Layout = (props: React.PropsWithChildren<{
       // background: 'linear-gradient(to top, #fc00ff, #00dbde)',
       minHeight: '100vh',
       width: '100vw',
-      maxWidth: '100%'
+      maxWidth: '100%',
+      display: 'flex',
+      flexDirection: 'column'
       // minWidth: '100%'
     }}
   >

diff --git a/pages/dashboard/[server]/console.tsx b/pages/dashboard/[server]/console.tsx
@@ -164,9 +164,9 @@ const Console = ({ setAuthenticated }: {
   return !listening
     ? <ConnectionFailure loading={listening === null} />
     : (
-      <Paper style={{ padding: 20 }}>
+      <Paper style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column' }}>
         <Typography variant='h5' gutterBottom>Console - {server}</Typography>
-        <Paper variant='outlined' style={{ height: '60vh', padding: 10, color, ...terminalUi }}>
+        <Paper variant='outlined' style={{ flex: 1, padding: 10, color, ...terminalUi }}>
           <ConsoleView console={consoleText} />
         </Paper>
         <CommandTextField ws={ws} buffer={buffer} id={id} />
@@ -187,13 +187,11 @@ const ConsolePage = () => {
         url={`/dashboard/${server}/console`}
       />
       <DashboardLayout loggedIn={nodeExists && serverExists && authenticated}>
-        <div style={{ padding: 20 }}>
-          {!nodeExists || !serverExists
-            ? <NotExistsError node={!nodeExists} />
-            : !authenticated
-                ? <AuthFailure />
-                : <Console setAuthenticated={setAuthenticated} />}
-        </div>
+        {!nodeExists || !serverExists
+          ? <NotExistsError node={!nodeExists} />
+          : !authenticated
+              ? <AuthFailure />
+              : <Console setAuthenticated={setAuthenticated} />}
       </DashboardLayout>
     </React.StrictMode>
   )

diff --git a/pages/dashboard/[server]/files/[[...path]].tsx b/pages/dashboard/[server]/files/[[...path]].tsx
@@ -16,16 +16,14 @@ const Files: NextPage<{ path: string }> = (props: { path: string }) => {
   return (
     <React.StrictMode>
       <DashboardLayout loggedIn={nodeExists && serverExists && authenticated}>
-        <div style={{ padding: 20 }}>
-          {!nodeExists || !serverExists ? <NotExistsError node={!nodeExists} />
-            : !authenticated
-                ? <AuthFailure />
-                : <FileManager
-                    path={props.path}
-                    setServerExists={setServerExists}
-                    setAuthenticated={setAuthenticated}
-                  />}
-        </div>
+        {!nodeExists || !serverExists ? <NotExistsError node={!nodeExists} />
+          : !authenticated
+              ? <AuthFailure />
+              : <FileManager
+                  path={props.path}
+                  setServerExists={setServerExists}
+                  setAuthenticated={setAuthenticated}
+                />}
       </DashboardLayout>
     </React.StrictMode>
   )

diff --git a/pages/dashboard/[server]/index.tsx b/pages/dashboard/[server]/index.tsx
@@ -117,14 +117,12 @@ const Statistics = () => {
         url={`/dashboard/${server}`}
       />
       <DashboardLayout loggedIn={nodeExists && serverExists && authenticated}>
-        <div style={{ padding: 20 }}>
-          {!nodeExists || !serverExists ? <NotExistsError node={!nodeExists} />
-            : !authenticated ? <AuthFailure /> : (
-              (!listening || !statistics) ? <ConnectionFailure loading={listening === null} /> : (
-                <StatisticsDisplayMemo statistics={statistics} />
-              )
-            )}
-        </div>
+        {!nodeExists || !serverExists ? <NotExistsError node={!nodeExists} />
+          : !authenticated ? <AuthFailure /> : (
+            (!listening || !statistics) ? <ConnectionFailure loading={listening === null} /> : (
+              <StatisticsDisplayMemo statistics={statistics} />
+            )
+          )}
       </DashboardLayout>
     </React.StrictMode>
   )

diff --git a/pages/dashboard/[server]/properties.tsx b/pages/dashboard/[server]/properties.tsx
@@ -62,39 +62,37 @@ const ServerProperties = () => {
         url={`/dashboard/${server}/properties`}
       />
       <DashboardLayout loggedIn={nodeExists && serverExists && authenticated}>
-        <div style={{ padding: 20 }}>
-          {!nodeExists || !serverExists ? <NotExistsError node={!nodeExists} />
-            : !authenticated ? <AuthFailure /> : (
-              !listening ? <ConnectionFailure loading={listening === null} /> : (
-                <Paper style={{ padding: 20 }}>
-                  {originalFileContent === null || fileContent === null ? (
-                    <>
-                      <Typography variant='h5' gutterBottom>server.properties</Typography>
-                      <div style={{ paddingBottom: 10 }} />
-                      <Typography>
-                        Looks like this server does not have a server.properties file.
-                      </Typography>
-                    </>
-                  ) : (
-                    <>
-                      <Editor
-                        name='server.properties'
-                        content={fileContent}
-                        siblingFiles={[]}
-                        handleClose={(setContent) => setContent(originalFileContent)}
-                        server={server as string}
-                        path='/'
-                        ip={ip}
-                        setMessage={setMessage}
-                        closeText='Cancel'
-                      />
-                      {message && <Message message={message} setMessage={setMessage} />}
-                    </>
-                  )}
-                </Paper>
-              )
-            )}
-        </div>
+        {!nodeExists || !serverExists ? <NotExistsError node={!nodeExists} />
+          : !authenticated ? <AuthFailure /> : (
+            !listening ? <ConnectionFailure loading={listening === null} /> : (
+              <Paper style={{ padding: 20 }}>
+                {originalFileContent === null || fileContent === null ? (
+                  <>
+                    <Typography variant='h5' gutterBottom>server.properties</Typography>
+                    <div style={{ paddingBottom: 10 }} />
+                    <Typography>
+                      Looks like this server does not have a server.properties file.
+                    </Typography>
+                  </>
+                ) : (
+                  <>
+                    <Editor
+                      name='server.properties'
+                      content={fileContent}
+                      siblingFiles={[]}
+                      handleClose={(setContent) => setContent(originalFileContent)}
+                      server={server as string}
+                      path='/'
+                      ip={ip}
+                      setMessage={setMessage}
+                      closeText='Cancel'
+                    />
+                    {message && <Message message={message} setMessage={setMessage} />}
+                  </>
+                )}
+              </Paper>
+            )
+          )}
       </DashboardLayout>
     </React.StrictMode>
   )