sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

admin panel redesign

Browse Source
This commit is contained in:
dudleycu 2021-08-19 06:57:47 +09:00
parent 213f568038
commit e1e68c7898
2 changed files with 83 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/App.js
View File

@ -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}>
<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"}>

63
src/style.css
View File

@ -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{