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

MORE css

Browse Source
master
dudleycu 4 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 ( return (
<header> <header>
<div className="headerWrapper"> <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> <div className="navigation"><ul>
<li className="headerMenuItem"><a href=".">Builds</a></li> <li className="headerMenuItem"><a href=".">Builds</a></li>
<li className="headerMenuItem"><a href=".">Guides</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"> <div className="boxTitleBar">
<h1>Basic Information</h1></div> <h1>Basic Information</h1></div>
<div className="basicInfo"> <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:"author"}}>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:"build"}}>Build Name</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:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}>Class</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:"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>
<div className="statsInfo"> <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:"bp"}}>Battle Power</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:"hp"}}>HP</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:"pp"}}>PP</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:"atk"}}>Attack</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:"def"}}>Defense</div>
<div style={{gridArea:"wepUp"}}>Weapon Up</div>
<div style={{gridArea:"wepUp"}}><span>Weapon Up</span></div> <div style={{gridArea:"res"}}>Ailment Resist.</div>
<div style={{gridArea:"wepUp2",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /> +{(p.weaponUp1*100).toFixed(1)}%<br /> <div style={{gridArea:"dmgRes",border:"0"}}>Damage Resist.</div>
<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:"bp2"}}>{p.bp}</div>
<div style={{gridArea:"hp2"}}>{p.hp}</div>
<div style={{gridArea:"res"}}><span>Ailment Resist.</span></div> <div style={{gridArea:"pp2"}}>{p.pp}</div>
<div style={{gridArea:"res2"}}> <div style={{gridArea:"atk2"}}>{p.statDisplayAtk}</div>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br /> <div style={{gridArea:"def2"}}>{p.def}</div>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br /> <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>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br /> <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>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br /> <div style={{gridArea:"dmgRes2",border:"0"}}>{(p.damageResist*100).toFixed(1)}%</div>
</div>
<div style={{gridArea:"res3"}}> <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>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br /> <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>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br /> <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>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br /> <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> <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:"dmgRes"}}><span>Damage Resist.</span></div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</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"> </div><section className="saveControls">
<button onClick={()=>{SaveData()}}>Save Build</button> <button onClick={()=>{SaveData()}}>Save Build</button>

88
src/style.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save