Fix database and css

Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>

src/App.js

@@ -555,7 +555,7 @@ function TableEditor(p) {
 						}} value={String(dat[col.name])}/></td>)}</tr>)}
 			  </tbody>
 			</table>
-		</div>:<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>}
+		</div>:<><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/></>}
 	</>
 }
 

src/TestPanel.js

@@ -121,21 +121,24 @@ function EditableClass(p){
 }
 
 function PopupWindow(p) {
+  const [filter,setFilter] = useState("")
+  const [page,setPage] = useState(1)
+
 	return <Modal isOpen={p.modalOpen} onRequestClose={()=>{p.setModalOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
     <div className="box boxModal">
     <div className="boxTitleBar">
     <h1>{p.title}</h1>
     {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
     </div>
-<PageControl pages={p.pageNames.length} pageNames={p.pageNames}/>
+    <PageControl  pages={p.pageNames.length} pageNames={p.pageNames}  currentPage={page} setCurrentPage={setPage}/>
     <div className="itemBar">
       <div className="itemBarSort">
         <select className="itemBarForm">
-  {p.sortItems.map((item)=><option>{item.name}</option>)}
+          {p.sortItems.map((item)=><option value={item.name}>{item.name}</option>)}
         </select>
       </div>
       <div className="itemBarFilter">
-{p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" />}
+        {p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" value={filter} onChange={(f)=>{setFilter(f.currentTarget.value)}} />}
       </div>
     </div>
     {p.children}

src/style.css

@@ -945,14 +945,6 @@ button{
 .table-padding{
 	padding: 4px;
 }
-.modal {
-	flex-grow: 1;
-	flex-basis: 200px;
-	max-width: 580px;
-	outline: 0;
-	height: 95vh;
-	margin: 0 10px;
-  }
 .modalOverlay {
     position: fixed;
     top: 0;
@@ -960,11 +952,24 @@ button{
     right: 0;
     bottom: 0;
     background: rgba(0,0,0,.9);
-	display: flex;
+	display: grid;
-	flex-flow: row wrap;
+	justify-items: stretch;
-	justify-content: center;
+	justify-content: stretch;    
+	grid-template-columns: 10px auto 10px;
+	grid-template-rows: 10px auto 10px;
+	grid-template-areas: 
+    ". . ."
+    ". main ."
+    ". . .";
+}
+.modal {
+	background-color: purple;
+	max-width: 580px;
+	outline: 0;
+	grid-area: main;
   }
 .boxModal {
+
 }
 .modalItemListContainer {
 		overflow-y: auto;