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

css grid zzz

Browse Source
master
dudleycu 3 years ago
parent 61461291a6
commit 4d8c4354fb
2 changed files with 57 additions and 166 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. 166
      src/TestPanel.js
  2. 43
      src/style.css

166
src/TestPanel.js
Unescape View File

@ -369,95 +369,38 @@ useEffect(()=>{
<div className="boxTitleBar">
<h1>Basic Information</h1></div>
<div className="basicInfo">
<table>
<tbody>
<tr>
<td>Author</td>
<td colSpan="2"><EditBoxInput setData={setauthor} data={author}/></td>
</tr>
<tr>
<td>Build Name</td>
<td colSpan="2"><EditBoxInput setData={setbuildName} data={buildName}/></td>
</tr>
<tr>
<td onClick={()=>{setClassSelectWindowOpen(true)}}>Class</td>
<td>
<EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass>
</td>
<td>
<span className="ye"><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></span>
</td>
</tr>
<tr>
<td onClick={()=>{setClassSkillTreeWindowOpen(true)}}>Sub-Class</td>
<td>
<EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass>
</td>
<td>
<EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/>
</td>
</tr>
</tbody>
</table>
<div style={{gridArea:"author"}}>Author</div><div style={{gridArea:"player",textAlign:"right"}}><EditBoxInput setData={setauthor} data={author}/></div>
<div style={{gridArea:"build"}}>Build Name</div><div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}>Class</div><div><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div><div style={{textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></div>
<div style={{gridArea:"subClass"}} onClick={()=>{setClassSkillTreeWindowOpen(true)}}>Sub-Class</div><div><EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div><div style={{textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
</div>
<div className="statsInfo">
<table className="statsInfo">
<tbody>
<tr>
<td>Battle Power</td>
<td>{p.bp}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>HP</td>
<td>{p.hp}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>PP</td>
<td>{p.pp}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Attack</td>
<td>{p.statDisplayAtk}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Defense</td>
<td>{p.def}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Weapon Up</td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Ailment Resist.</td>
<td>
<div style={{gridArea:"bp"}}>Battle Power</div><div>{p.bp}</div><div style={{gridArea:"bpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"hp"}}>HP</div><div>{p.hp}</div><div style={{gridArea:"hpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"pp"}}>PP</div><div>{p.pp}</div><div style={{gridArea:"ppGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"atk"}}>Attack</div><div>{p.statDisplayAtk}</div><div style={{gridArea:"atkGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"def"}}>Defense</div><div>{p.def}</div><div style={{gridArea:"defGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"wepUp"}}>Weapon Up</div>
<div style={{gridArea:"wepUp2"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></div>
<div style={{gridArea:"wepUp3"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></div>
<div style={{gridArea:"res"}}>Ailment Resist.</div>
<div style={{gridArea:"res2"}}>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br />
</td>
<td>
</div>
<div style={{gridArea:"res3"}}>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br />
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Damage Resist.</td>
<td>{(p.damageResist*100).toFixed(1)}%</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<div style={{gridArea:"dmgRes"}}>Damage Resist.</div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div>
</div>
</div>
<div className="box">
@ -570,7 +513,7 @@ AUGMENT
<dt>UI</dt>
<dd className="half">Grids. Grids everywhere.</dd>
<dd>Finish "Item Details" for Weapons/Armor</dd>
<dd className="half">Class Skill Window</dd>
<dd className="half">Class Skill Window - Make it Scale</dd>
<dd>PA Selector</dd>
<dd>Food/Buffs Menu</dd>
<dd className="check">Get all the fckn icons</dd>
@ -595,67 +538,6 @@ AUGMENT
<div className="containerC">
<div className="box">
<div className="boxTitleBar">
<h1>Basic Stats</h1></div>
<table className="statsInfo">
<tbody>
<tr>
<td>Battle Power</td>
<td>{p.bp}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>HP</td>
<td>{p.hp}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>PP</td>
<td>{p.pp}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Attack</td>
<td>{p.statDisplayAtk}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Defense</td>
<td>{p.def}</td>
<td colSpan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Weapon Up</td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Ailment Resist.</td>
<td>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br />
</td>
<td>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br />
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Damage Resist.</td>
<td>{(p.damageResist*100).toFixed(1)}%</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<div className="box">
<div className="boxTitleBar">
<h1>Damage Stats</h1></div>
<PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/>
<table>

43
src/style.css
Unescape View File

@ -159,28 +159,37 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
display: block;
height: 8px;
}
.basicInfo > table {
table-layout:fixed;
line-height: 23px;
margin: 0 5px;
}
.basicInfo > table td:nth-child(3) {
width: 33%;
.basicInfo {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
justify-content: stretch;
grid-template-areas:
"author player player"
"build character character"
"class . ."
"subClass . .";
margin: 10px 10px;
padding: 0 5px;
}
.statsInfo {
background-color:rgba(0,0,0,0.33);
margin: 0 10px;
padding: 5px;
}
.statsInfo > table {
table-layout:fixed;
line-height: 23px;
}
.statsInfo > table td:nth-child(2) {
text-align: right;
}
.statsInfo > table td:nth-child(3) {
width: 50%;
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: stretch;
grid-template-areas:
"bp . bpGraph bpGraph"
"hp . hpGraph hpGraph"
"pp . ppGraph ppGraph"
"atk . atkGraph atkGraph"
"def . defGraph defGraph"
"wepUp wepUp2 wepUp3 wepUp3"
"res res2 res3 res3"
"dmgRes dmgRes2 dmgRes2 dmgRes2";
}
.statsInfo > div {
border-bottom: 1px solid rgba(128,128,128,0.5);
}
.boxTitleBar {
background-color: rgba(124, 144, 148, 0.66);

Write Preview
Loading…
Cancel
Save