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

MORE css

Browse Source
master
dudleycu 3 years ago
parent d67d55ed5d
commit 53325c2f93
3 changed files with 90 additions and 66 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. 2
      src/TestHeader.js
  2. 66
      src/TestPanel.js
  3. 88
      src/style.css

2
src/TestHeader.js
Unescape View File

@ -4,7 +4,7 @@ function TestHeader() {
return (
<header>
<div className="headerWrapper">
<div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div>
<div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner</span></a></div>
<div className="navigation"><ul>
<li className="headerMenuItem"><a href=".">Builds</a></li>
<li className="headerMenuItem"><a href=".">Guides</a></li>

66
src/TestPanel.js
Unescape View File

@ -448,37 +448,45 @@ useEffect(()=>{
<div className="boxTitleBar">
<h1>Basic Information</h1></div>
<div className="basicInfo">
<div style={{gridArea:"author"}}><span>Author</span></div><div style={{gridArea:"player",textAlign:"right"}}><EditBoxInput setData={setAuthor} data={author}/></div>
<div style={{gridArea:"build"}}><span>Build Name</span></div><div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}><span>Class</span></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)}}><span>Sub-Class</span></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 style={{gridArea:"author"}}>Author</div>
<div style={{gridArea:"build"}}>Build Name</div>
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}>Class</div>
<div style={{gridArea:"subclass"}} onClick={()=>{setClassSkillTreeWindowOpen(true)}}>Sub-Class</div>
<div style={{gridArea:"class2"}}><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
<div style={{gridArea:"subclass2"}}><EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
<div style={{gridArea:"player",textAlign:"right"}}><EditBoxInput setData={setAuthor} data={author}/></div>
<div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
<div style={{gridArea:"classlv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></div>
<div style={{gridArea:"subclasslv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
</div>
<div className="statsInfo">
<div style={{gridArea:"bp"}}><span>Battle Power</span></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"}}><span>HP</span></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"}}><span>PP</span></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"}}><span>Attack</span></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"}}><span>Defense</span></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"}}><span>Weapon Up</span></div>
<div style={{gridArea:"wepUp2",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /> +{(p.weaponUp1*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /> +{(p.weaponUp3*100).toFixed(1)}%</div>
<div style={{gridArea:"wepUp3",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /> +{(p.weaponUp2*100).toFixed(1)}%</div>
<div style={{gridArea:"res"}}><span>Ailment Resist.</span></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 />
</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 />
</div>
<div style={{gridArea:"dmgRes"}}><span>Damage Resist.</span></div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div>
<div style={{gridArea:"bp"}}>Battle Power</div>
<div style={{gridArea:"hp"}}>HP</div>
<div style={{gridArea:"pp"}}>PP</div>
<div style={{gridArea:"atk"}}>Attack</div>
<div style={{gridArea:"def"}}>Defense</div>
<div style={{gridArea:"wepUp"}}>Weapon Up</div>
<div style={{gridArea:"res"}}>Ailment Resist.</div>
<div style={{gridArea:"dmgRes",border:"0"}}>Damage Resist.</div>
<div style={{gridArea:"bp2"}}>{p.bp}</div>
<div style={{gridArea:"hp2"}}>{p.hp}</div>
<div style={{gridArea:"pp2"}}>{p.pp}</div>
<div style={{gridArea:"atk2"}}>{p.statDisplayAtk}</div>
<div style={{gridArea:"def2"}}>{p.def}</div>
<div style={{gridArea:"wepUp2",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /> +{(p.weaponUp1*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /> +{(p.weaponUp3*100).toFixed(1)}%</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 /></div>
<div style={{gridArea:"dmgRes2",border:"0"}}>{(p.damageResist*100).toFixed(1)}%</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:"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:"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:"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:"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:"wepUp3",color:"#ffb74c"}} ><div><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /> +{(p.weaponUp2*100).toFixed(1)}%</div></div>
<div style={{gridArea:"res3"}}><div><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 /></div></div>
</div><section className="saveControls">
<button onClick={()=>{SaveData()}}>Save Build</button>

88
src/style.css
Unescape View File

@ -104,7 +104,7 @@ header {
grid-area: 1 / span 3;
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
place-items: stretch;
align-items: stretch;
}
header a {
display: block;
@ -115,11 +115,15 @@ header a {
margin-right: auto;
font-size:24px;
white-space: nowrap;
justify-self: start;
}
.logo span{
font-size:16px;
text-transform: uppercase;
}
.logo span:after {
content:".com";
}
.logo img {
height: 40px;
}
@ -128,6 +132,7 @@ header a {
}
.navigation {
text-align: left;
justify-self: start;
}
.navigation a {
padding: 0 15px;
@ -145,6 +150,7 @@ header a {
}
.rightNav {
text-align: right;
justify-self: end;
}
.rightNav a {
padding: 0 15px;
@ -165,6 +171,21 @@ header a {
text-align: right;
}
@media screen and (max-width:860px) {
.logo a {
padding: 0 10px;
}
.logo {
font-size:22px;
}
.logo span{
font-size:14px;
}
.logo span:after {
content: "";
}
.navigation {
justify-self: end;
}
.navigation > ul, .loginNav {
display: none;
}
@ -207,26 +228,15 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
.box td:last-child {
text-align: right;
}
.barGraph {
margin: 8px 0;
background: linear-gradient(90deg, #65beef, #f5ee3c);
display: block;
height: 8px;
}
.barOverlay {
border: 2px solid black;
display: block;
height: 8px;
}
.basicInfo {
display: grid;
grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
justify-content: stretch;
grid-template-columns: minmax(0,0.9fr) minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"author player player"
"build character character"
"class . ."
"subClass . .";
"author author player"
"build build character"
"class class2 classlv"
"subclass subclass2 subclasslv";
margin: 10px 10px 0;
padding: 0 5px;
}
@ -235,16 +245,15 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
margin: 5px 10px 0;
padding: 0 5px 5px;
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
justify-content: stretch;
grid-template-columns: minmax(0,1fr) minmax(0,auto) minmax(0,0.66fr) minmax(0,1fr);
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"
"bp bp2 bpGraph bpGraph"
"hp hp2 hpGraph hpGraph"
"pp pp2 ppGraph ppGraph"
"atk atk2 atkGraph atkGraph"
"def def2 defGraph defGraph"
"wepUp wepUp2 wepUp2 wepUp3"
"res res2 res2 res3"
"dmgRes dmgRes2 dmgRes2 dmgRes2";
}
.basicInfo > div, .statsInfo > div {
@ -252,12 +261,24 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
line-height: 25px;
position: relative;
}
.statsInfo > div:nth-last-child(-n+2) {
border: 0;
}
.basicInfo > div > span, .statsInfo > div > span {
.basicInfo > div:nth-child(-n+4), .statsInfo > div:nth-child(-n+8) {
color: #97e2fc;
}
.statsInfo > div:nth-child(n+9):nth-child(-n+13) {
text-align: right;
}
.barGraph {
margin: 8px 0 8px auto;
background: linear-gradient(90deg, #65beef, #f5ee3c);
display: block;
height: 8px;
width: 75%;
}
.barOverlay {
border: 2px solid black;
display: block;
height: 8px;
}
.boxTitleBar {
background-color: rgba(124, 144, 148, 0.66);
color: white;
@ -779,10 +800,6 @@ adminScrollbar::-webkit-scrollbar-button {
.customScrollbar::-webkit-scrollbar-corner,.adminScrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
/* Handle on hover
::-webkit-scrollbar-thumb:hover {
background: #555;
}*/
.containerX {
margin: 10px;
min-width: 0;
@ -992,7 +1009,6 @@ cursor:pointer !important;
}
/* Sig's Amazing CSS (cuz Dudley edited it) */
.editBox:hover{
background-color:rgba(0,0,0,0.5);
cursor:pointer !important;

Write Preview
Loading…
Cancel
Save