admin panel redesign

src/App.js

@@ -200,8 +200,8 @@ function TableEditor(p) {
 	
 	return <>
 	{!loading?
-		<div className="table-responsive">
-			<table cellPadding="10" className="table text-light table-padding">
+		<div>
+			<table>
 			  {importAllowed&&<caption><label className="buttonLabel" for="uploads">Import CSV</label><input onChange={(f)=>{
 				const reader = new FileReader()
 				reader.onload=(ev)=>{
@@ -377,9 +377,9 @@ function AdminPanel(p) {
 		{page:"Database Audit",url:"/admin/database_audit",table:"/database_audit"},
 	]
 
-	return <div className="main">
+	return <div className="adminMain">
 		{!verified?
-		<div style={{gridColumn:"1 / span 3"}}>
+		<div style={{gridArea:"sidebar / span 2"}}>
 			<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
 			<input type="password" value={password} onChange={(f)=>{setPassword(f.currentTarget.value)}} onKeyDown={(e)=>{
 				if (e.key==="Enter") {
@@ -397,26 +397,50 @@ function AdminPanel(p) {
 					})}}}></input>
 			<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
 		</div>:<>
-		<Box title="Navigation">
-		<div>Testing Mode <Toggle checked={p.TESTMODE} onChange={(f)=>{p.setTESTMODE(f.target.checked)}}/> {p.TESTMODE?<b>ON</b>:<b>OFF</b>}<br/>
+		
+		<div className="box boxAdminNav">
+		<div className="boxTitleBar">
+		<h1>Navigation</h1>
+		</div>
+		<p>Testing Mode <Toggle checked={p.TESTMODE} onChange={(f)=>{p.setTESTMODE(f.target.checked)}}/> {p.TESTMODE?<b>ON</b>:<b>OFF</b>}</p>
+		<div className="adminNavContainer customScrollbar">
 		  <Table classes="adminNav">
 		  {navigationData.map((nav)=>(nav.hr)?<hr/>:<><Link to={process.env.PUBLIC_URL+nav.url}>{nav.page}</Link><br/></>)}
 		  <Link to={process.env.PUBLIC_URL+"/admin/database_manager"}>Database Manager</Link><br/>
-		</Table></div></Box>
-		<div className="w-75">
+		</Table>
+		</div>
+		</div>		
+		
+
+
+
 			{navigationData.map((nav)=>(nav.duplicate===undefined&&nav.hr===undefined)&&<Route path={process.env.PUBLIC_URL+nav.url}>
-				<Box title={nav.page}>
-				<Helmet>
+			<div className="box boxAdminContent">
+		<div className="boxTitleBar">
+		<h1>{nav.page}</h1></div>
+		<div className="adminContainer customScrollbar">
+		<Helmet>
 					<title>{APP_TITLE+" - Admin Panel: "+nav.page}</title>
 				</Helmet>
 				{nav.render??<TableEditor password={password} BACKENDURL={GetBackendURL(p)} path={nav.table}/>}
-				</Box></Route>)}
+				</div></div></Route>)}
+
 			<Route path={process.env.PUBLIC_URL+"/admin/database_manager"}>
-				<Box title="Database Editor">
+			<div className="box boxAdminContent">
+			<div className="boxTitleBar">
+		<h1>Database Editor</h1></div>
+		<div className="adminContainer">
 					<DatabaseEditor password={password} BACKENDURL={GetBackendURL(p)}/>
-				</Box>
+				</div>					
+				</div>	
 			</Route>
-		</div></>}
+		
+		
+		
+		
+		
+		
+		</>}
 	</div>
 }
 
@@ -799,7 +823,6 @@ function App() {
 					<Helmet>
 						<title>{APP_TITLE+" - Admin Panel"}</title>
 					</Helmet>
-				<TestHeader/>
 					<AdminPanel setUpdate={setUpdate} setTESTMODE={setTESTMODE} BACKENDURL={BACKENDURL} TESTMODE={TESTMODE} DATA={GetData}/>
 				</Route>
 				<Route path={process.env.PUBLIC_URL+"/test"}>

src/style.css

@@ -3,10 +3,6 @@
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
-	-webkit-user-select: none; /* Safari */        
-	-moz-user-select: none; /* Firefox */
-	-ms-user-select: none; /* IE10+/Edge */
-	user-select: none; /* Standard */
 }
 @font-face {
   font-family: "ngs";
@@ -112,6 +108,7 @@ em {
 	gap: 10px;
 	margin: 0 10px;
 }
+
 .box {
 	color: #97e2fc;
 	background-clip: padding-box;
@@ -706,8 +703,9 @@ li.treeListSub:after {
 	padding: 2px;
 	max-height: calc(90vh - 150px);
 	min-width: 0;
-}/*
-@media screen and (min-width:390px) and (max-width:860px) {
+}
+
+/*@media screen and (min-width:390px) and (max-width:860px) {
 .skillTreeContainer {
 	max-height: 300px;
 }
@@ -930,19 +928,8 @@ button{
    	 -webkit-font-smoothing: antialiased;
 	text-shadow: -1px 1px 0 #000,1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
 }
-.w-25{
-	min-width:240px;
-	max-width:24%;
-	margin-right: 1%;
-}
-.w-75{
-	min-width:75%;
-	max-width:75%;
-}
 .table-responsive{
 	color:rgba(220,220,220);
-	overflow-y:hidden;
-	overflow-x:auto;
 }
 .table-responsive table {
 	background-color: rgba(20,29,40,0.66);
@@ -1052,12 +1039,50 @@ button{
 
 /* Admin Panel */
 
-.adminNav {
+.adminMain {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+	display: grid;
+	justify-items: stretch;
+	align-items: stretch;    
+	grid-template-columns: 250px 1fr;
+	grid-template-rows: minmax(10px, 1fr) max-content minmax(10px, 1fr);
+	grid-template-areas:
+	"header header"
+	"sidebar content"
+	"footer footer";
+	gap: 10px;
+	overflow:hidden;
+	margin: 0 10px;
+}
+.boxAdminNav {
+	grid-area: sidebar;
 	font-size: 12pt;
 	line-height: 1.5em;
 }
+.boxAdminContent {
+	grid-area: content;
+}
+.adminNavContainer {
+	overflow-y: scroll;
+	margin: 0 5px 0 10px;
+	padding: 2px;
+	height: 0;
+	height: 80vh;
+}
+.adminContainer {
+	overflow-x: auto;
+	overflow-y: scroll;
+	margin: 10px 5px 0 10px;
+	padding: 2px;
+	width: 84vw;
+	height: 85vh;
+}
 p.adminNav hr {
-	border-bottom: 1px solid white;
+	border-bottom: 1px solid silver;
 	margin: 10px 0;
 }
 .buttonLabel{
@@ -1279,4 +1304,4 @@ p.adminNav hr {
 .check:before {
 	font-family: "Segoe UI Symbol";
 	content: "\2B1B" !important;
-}
+}