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

Fix database and css

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-08 02:15:48 +09:00
parent d4bb7508f2
commit 4c84d65ab3
3 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -555,7 +555,7 @@ function TableEditor(p) {
}} value={String(dat[col.name])}/></td>)}</tr>)} }} value={String(dat[col.name])}/></td>)}</tr>)}
</tbody> </tbody>
</table> </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=""/></>}
</> </>
} }

39
src/TestPanel.js
View File

@ -121,25 +121,28 @@ function EditableClass(p){
} }
function PopupWindow(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"> 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="box boxModal">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>{p.title}</h1> <h1>{p.title}</h1>
{p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>} {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
</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="itemBar">
<div className="itemBarSort"> <div className="itemBarSort">
<select className="itemBarForm"> <select className="itemBarForm">
{p.sortItems.map((item)=><option>{item.name}</option>)} {p.sortItems.map((item)=><option value={item.name}>{item.name}</option>)}
</select> </select>
</div> </div>
<div className="itemBarFilter"> <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>
</div> </div>
{p.children} {p.children}
</div> </div>
</Modal> </Modal>
} }

27
src/style.css
View File

@ -945,14 +945,6 @@ button{
.table-padding{ .table-padding{
padding: 4px; padding: 4px;
} }
.modal {
flex-grow: 1;
flex-basis: 200px;
max-width: 580px;
outline: 0;
height: 95vh;
margin: 0 10px;
}
.modalOverlay { .modalOverlay {
position: fixed; position: fixed;
top: 0; top: 0;
@ -960,11 +952,24 @@ button{
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0,0,0,.9); 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 { .boxModal {
} }
.modalItemListContainer { .modalItemListContainer {
overflow-y: auto; overflow-y: auto;