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

Merge branch 'master' of https://github.com/sigonasr2/ngsplanner

Browse Source
This commit is contained in:
dudleycu 2021-09-01 00:38:07 +09:00
commit 38c8515814
3 changed files with 98 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/TestHeader.js
View File

@ -4,16 +4,17 @@ 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.com</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>
<li className="headerMenuItem"><a href=".">Blog</a></li> <li className="headerMenuItem"><a href=".">Blog</a></li>
<li className="headerMenuItem"><a href=".">About</a></li> <li className="headerMenuItem"><a href=".">About</a></li></ul>
</ul></div> <section className="miniNav"><a href="."><span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section>
</div>
<div className="rightNav"> <div className="rightNav">
<section className="loginNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /> Guest &emsp; <span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section> <section className="loginNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /> Guest &emsp; <span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section>
<section className="miniNav"><a href="."><span>&#xb7;&#xb7;&#xb7;</span></a></section> <section className="miniNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /></a></section>
</div> </div>
</div> </div>
</header> </header>

36
src/TestPanel.js
View File

@ -501,7 +501,7 @@ useEffect(()=>{
</div> </div>
<div className="containerB"> <div className="containerB">
<div className="box"> <div className="box equipWindow">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equipped Weapon</h1></div> <h1>Equipped Weapon</h1></div>
<h2 className="viewedEquipName rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2> <h2 className="viewedEquipName rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2>
@ -512,20 +512,34 @@ useEffect(()=>{
<div className="itemDetailsGrid"> <div className="itemDetailsGrid">
<div className={"itemDetailsIcon"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><img alt="" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div> <div className={"itemDetailsIcon"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><img alt="" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div>
<div className="itemDetailsProperties"> <div className="itemDetailsProperties">
RARITY<br /> <div className="itemDetailsPropertiesWrapper">
ATTACK<br />
ELEMENT<br /> <div style={{gridArea:"rarity"}}>Rarity</div>
EQUIP CONDITIONS<br /> <div style={{gridArea:"stars"}}className={rarityCheck(selectedWeapon[WEAPON_WEAPON])}><div className="itemRarityWrapper">-</div></div>
NOT TRADABLE
</div> <div style={{gridArea:"attack"}}>Attack</div>
<div className="itemPotential">POTENTIAL</div><div className="itemPreset">PRESET</div> <div style={{gridArea:"attackDisplay"}}>282</div>
<div style={{gridArea:"element"}}>Element</div>
<div style={{gridArea:"elementDisplay"}}>-</div>
<div style={{gridArea:"conditions"}}>Equip Conditons</div>
<div style={{gridArea:"conditionsDisplay"}}>Lv.15 (Current Lv.20)</div>
</div></div>
<div className="itemAbility"><div className="itemPotential"><span className="pot">Soulspring Unit Lv.3</span></div><div className="itemFixa"><span className="fixa">Fixa Attack Lv.3</span></div></div>
<div className="itemDetailsAugment"> <div className="itemDetailsAugment">
AUGMENT <span className="aug">Augment</span>
<div className="itemDetailsAugmentWrapper">
<div><span>Precision III</span></div>
<div></div>
<div></div>
<div></div>
</div> </div>
</div> </div>
</div>
@ -773,7 +787,7 @@ AUGMENT
setArmorSelectWindowOpen(false)}}> setArmorSelectWindowOpen(false)}}>
<div className="itemImgWrapper"><img alt="" src={DisplayIcon(item?.icon)} /></div> <div className="itemImgWrapper"><img alt="" src={DisplayIcon(item?.icon)} /></div>
<div className="itemNameWrapper rifle">{item.name}</div> <div className="itemNameWrapper rifle">{item.name}</div>
<div className="itemRarityWrapper">&nbsp;</div> <div className="itemRarityWrapper" style={{gridArea:"rarity"}}>&nbsp;</div>
<div className="itemPropertiesWrapper"><span className="atk">{item.def}</span></div> <div className="itemPropertiesWrapper"><span className="atk">{item.def}</span></div>
</div> </div>
}} }}

95
src/style.css
View File

@ -91,6 +91,8 @@ header {
text-align: left; text-align: left;
margin: 0; margin: 0;
padding: 0 10px; padding: 0 10px;
line-height: 50px;
height: 50px
} }
.headerWrapper { .headerWrapper {
grid-area: 1 / span 3; grid-area: 1 / span 3;
@ -100,12 +102,12 @@ header {
} }
header a { header a {
display: block; display: block;
height: 50px
} }
.logo { .logo {
font-family: "ngs2"; font-family: "ngs2";
margin-right: auto; margin-right: auto;
font-size:24px; font-size:24px;
line-height: 47px;
white-space: nowrap; white-space: nowrap;
} }
.logo span{ .logo span{
@ -120,9 +122,6 @@ header a {
} }
.navigation { .navigation {
text-align: left; text-align: left;
font-size: 17px;
font-family: "ngs2";
line-height: 50px;
} }
.navigation a { .navigation a {
padding: 0 15px; padding: 0 15px;
@ -132,13 +131,14 @@ header a {
border-color: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.13);
border-style: solid; border-style: solid;
border-left-width: 1px; border-left-width: 1px;
font-size: 17px;
font-family: "ngs2";
} }
.navigation li:last-child { .navigation li:last-child {
border-right-width: 1px; border-right-width: 1px;
} }
.rightNav { .rightNav {
text-align: right; text-align: right;
line-height: 43px;
} }
.rightNav a { .rightNav a {
padding: 0 15px; padding: 0 15px;
@ -150,20 +150,14 @@ header a {
} }
.dotMenu { .dotMenu {
display: inline-block; display: inline-block;
font-family: "Segoe UI Symbol";
font-size: 24px; font-size: 24px;
font-weight: 900;
letter-spacing: 2px;
} }
.miniNav { .miniNav {
display: none; display: none;
grid-area: 2 / span 2;
line-height: 45px;
text-align: right; text-align: right;
} }
.miniNav span {
display: inline-block;
font-family: "Segoe UI Symbol";
font-size: 24px;
}
@media screen and (max-width:860px) { @media screen and (max-width:860px) {
.navigation > ul, .loginNav { .navigation > ul, .loginNav {
display: none; display: none;
@ -173,7 +167,6 @@ header a {
} }
} }
.box { .box {
/*color: #97e2fc;*/
color:white; color:white;
background-clip: padding-box; background-clip: padding-box;
background-color: rgba(24, 36, 48, 0.66); background-color: rgba(24, 36, 48, 0.66);
@ -253,7 +246,7 @@ 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(1), .statsInfo > div:nth-last-child(2) { .statsInfo > div:nth-last-child(-n+2) {
border: 0; border: 0;
} }
.basicInfo > div > span, .statsInfo > div > span { .basicInfo > div > span, .statsInfo > div > span {
@ -536,9 +529,6 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.itemRarityWrapper {
grid-area: rarity;
}
.r1 .itemRarityWrapper { .r1 .itemRarityWrapper {
content: url("./icons/NGSUIRarity1Star.png"); content: url("./icons/NGSUIRarity1Star.png");
} }
@ -580,11 +570,11 @@ li.selected:hover {
outline: 2px solid hsl(180, 78%, 50%); outline: 2px solid hsl(180, 78%, 50%);
}*/ }*/
.itemControlsWrapper > span:nth-child(1), .itemControlsWrapper > span:nth-child(3) { .itemControlsWrapper > span:nth-child(odd) {
background-color: rgba(113,169,189,0.33); background-color: rgba(113,169,189,0.33);
cursor: pointer; cursor: pointer;
} }
.itemControlsWrapper > span:nth-child(1):hover, .itemControlsWrapper > span:nth-child(3):hover { .itemControlsWrapper > span:nth-child(odd):hover {
background-color: rgba(113,169,189,0.33); background-color: rgba(113,169,189,0.33);
cursor: pointer; cursor: pointer;
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
@ -1490,32 +1480,81 @@ p.adminNav hr {
position:relative; position:relative;
top:16px; top:16px;
} }
.equipWindow {
height: 440px;
}
.itemDetailsGrid { .itemDetailsGrid {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"icon properties" "icon properties"
"potential preset" "ability ability"
"augment augment"; "augment augment";
grid-template-columns: 128px minmax(0,1fr); grid-template-columns: 128px minmax(0,1fr);
grid-template-rows: auto;
margin: 10px 10px 0 10px; margin: 10px 10px 0 10px;
place-items: stretch;
} }
.itemDetailsIcon { .itemDetailsIcon {
background-color: hsl(0, 17%, 70%);
grid-area: icon; grid-area: icon;
align-self: center;
} }
.itemDetailsProperties { .itemDetailsProperties {
margin: 0 0 0 10px;
grid-area: properties; grid-area: properties;
} }
.itemDetailsPropertiesWrapper {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0,1fr);
grid-template-areas:
"rarity stars"
"attack attackDisplay"
"element elementDisplay"
"conditions conditionsDisplay";
text-align: left;
gap: 10px 0;
}
.itemDetailsPropertiesWrapper > div {
border-bottom: 1px solid rgba(128,128,128,0.5);
padding-bottom: 2px;
}
.itemDetailsPropertiesWrapper > div:nth-child(odd) {
color: #97e2fc;
}
.itemDetailsPropertiesWrapper > div:nth-child(even) {
padding-left: 0;
}
.itemDetailsAugment { .itemDetailsAugment {
margin: 15px 0 0 0;
grid-area: augment; grid-area: augment;
} }
.itemPotential { .itemDetailsAugmentWrapper {
grid-area: potential; margin: 10px 0 0 0;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(100px,200px));
gap: 10px 30px;
} }
.itemPreset { .itemDetailsAugmentWrapper > div {
grid-area: preset; background-color:rgba(0,0,0,0.33);
padding: 2px 10px;
border-radius: 0 10px 0 0;
height: 20px;
white-space: nowrap;
text-overflow:ellipsis;
}
.itemDetailsAugmentWrapper > div span:before {
content: "\00B7";
margin-right: 10px;
font-weight: 900;
}
.itemAbility {
grid-area: ability;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
margin: 20px 0 0 0;
}
.itemPotential {
text-align: left;
}
.itemFixa {
text-align: left;
} }
.itemDetailsIcon img { .itemDetailsIcon img {
background: radial-gradient(rgb(196,196,196),rgb(128,128,128)); background: radial-gradient(rgb(196,196,196),rgb(128,128,128));