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

Make box better

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
master
Joshua Sigona 3 years ago
parent c1030c6ac0
commit 43d0a6eb7e
2 changed files with 42 additions and 27 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 29
      src/TestPanel.js
  2. 38
      src/style.css

29
src/TestPanel.js
Unescape View File

@ -69,7 +69,7 @@ function PageControl(p) {
for (var i=0;i<p.pages;i++) {
pages.push(<PageControlButton pageName={p.pageNames?p.pageNames[i]:undefined} currentPage={p.currentPage} setCurrentPage={p.setCurrentPage} page={i+1}/>)
}
return <ul className="boxmenu">
return pages.length>0&&<ul className="boxmenu">
{pages.map((page,i)=>{return <React.Fragment key={i}>{page}</React.Fragment>})}
</ul>
}
@ -127,7 +127,7 @@ function PopupWindow(p) {
<h1>{p.title}</h1>
{p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
</div>
<PageControl pages={p.pageNames.length} pageNames={p.pageNames} currentPage={p.page} setCurrentPage={p.setPage}/>
<PageControl pages={p.pageNames?p.pageNames.length:0} pageNames={p.pageNames} currentPage={p.page} setCurrentPage={p.setPage}/>
{p.children}
</div>
@ -139,30 +139,34 @@ function SelectorWindow(p) {
const [itemList,setItemList] = useState([])
const [tabPage,setTabPage] = useState(1)
const [sortSelector,setSortSelector] = useState(p.sortItems[0])
const [sortSelector,setSortSelector] = useState(p.sortItems?p.sortItems[0]:"")
const [filter,setFilter] = useState("")
useEffect(()=>{
if (p.dataFunction) {
setItemList(p.dataFunction())
}
},[p])
return <PopupWindow page={tabPage} setPage={setTabPage} modalOpen={p.modalOpen} setModalOpen={p.setModalOpen} showCloseButton={true} title={p.title}
pageNames={p.pageNames}
filter={true}
>
<div className="itemBar">
{(p.sortItems||p.filter)&&<div className="itemBar">
<div className="itemBarSort">
<select className="itemBarForm" value={sortSelector} onChange={(f)=>{setSortSelector(f.currentTarget.value)}}>
{p.sortItems&&p.sortItems.map((item)=><option value={item}>{item}</option>)}
</select>
{p.sortItems&&<select className="itemBarForm" value={sortSelector} onChange={(f)=>{setSortSelector(f.currentTarget.value)}}>
{p.sortItems.map((item)=><option value={item}>{item}</option>)}
</select>}
</div>
<div className="itemBarFilter">
{p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" value={filter} onChange={(f)=>{setFilter(f.currentTarget.value)}} />}
</div>
</div>
}
<div className="modalItemListContainer customScrollbar">
<ul className="itemlist">
{itemList.filter((item)=>p.filterFunction(tabPage,item)).filter((item)=>p.searchFieldFunction(filter,item)).sort((a,b)=>p.sortOrderFunction(sortSelector,a,b)).map((item)=>p.displayFunction(item))}
{p.children}
</ul>
</div>
</PopupWindow>
@ -186,6 +190,7 @@ const [effectPage,setEffectPage] = useState(1)
const [weaponPage,setWeaponPage] = useState(1)
const [statPage,setStatPage] = useState(1)
const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false)
const [weaponSelectWindowOpen,setWeaponSelectWindowOpen] = useState(false)
useEffect(()=>{
@ -209,11 +214,11 @@ useEffect(()=>{
return (<>
<div className="main">
<div className="containerA">
<div className="box">
<div className="box basicInfoBox">
<div className="boxTitleBar">
<h1>Basic Information</h1></div>
<table className="basicInfo">
<table className="basicInfoTable">
<tr>
<td>Author</td>
<td colspan="2"><EditBoxInput setData={setauthor} data={author}/></td>
@ -223,9 +228,9 @@ useEffect(()=>{
<td colspan="2"><EditBoxInput setData={setbuildName} data={buildName}/></td>
</tr>
<tr>
<td>Class</td>
<td onClick={()=>{setClassSelectWindowOpen(true)}} >Class</td>
<td>
<EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass>
<EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass>
</td>
<td>
<span className="ye"><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></span>
@ -434,6 +439,8 @@ useEffect(()=>{
</div>
</div>
<SelectorWindow title="Class Select" modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}>ez pz</SelectorWindow>
<SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}
pageNames={["All","Rifle","Launcher","Rod","Talis"]}
sortItems={["Standard Sort","Rarity","Attack","Potency"]}

38
src/style.css
Unescape View File

@ -158,23 +158,14 @@ em {
color: #97e2fc;
background-clip: padding-box;
background-color: rgba(38,53,63,0.80);
/*background-color: #151f25;*/
margin: 10px auto;
text-align: left;
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66);
/*min-width: 300px;*/
/*max-width: 500px;*/
padding-bottom:10px;
filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));
/*filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));*/
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
}
/* box hover, save bcuz i will use this in popup menu
.box:hover {
outline: 1px solid rgba(54,255,255,1);
}
.box:hover .boxTitleBar {
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1));
}
*/
.box table {
border-spacing: 0;
color: white;
@ -276,7 +267,10 @@ em {
.da span:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}
.basicInfo {
.basicInfoBox {
}
.basicInfoTable {
table-layout:fixed;
width: 100%;
line-height: 23px;
@ -385,6 +379,7 @@ em {
color: white;
margin: 0 0 5px 10px;
padding: 12px 10px 7px 10px;
cursor: pointer;
}
.equipAugs li:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
@ -914,12 +909,13 @@ input#editBoxInput {
flex-wrap: wrap;
}
.popup2{
z-index:999;
z-index:5;
position: absolute;
background-color: rgba(128,128,128,0.9);
max-width: 250px;
min-width: 100px;
padding: 20px;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
}
.popup button{
margin:5px;
@ -987,12 +983,24 @@ button{
outline: 0;
grid-column: 2;
grid-row: 2;
filter: drop-shadow(0 15px 20px black);
}
.boxModal {
max-width: 580px;
margin: 0 auto;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
outline: 1px solid rgba(54,255,255,1);
}
.boxModal .boxTitleBar {
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1));
}
/* box hover, save bcuz i will use this in popup menu
.box:hover {
outline: 1px solid rgba(54,255,255,1);
}
.box:hover .boxTitleBar {
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1));
}
*/
.modalItemListContainer {
overflow-y: auto;
overflow-x: hidden;

Write Preview
Loading…
Cancel
Save