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

src/TestHeader.js

@@ -4,16 +4,17 @@ 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.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=".">Guides</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">
                     <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>
         </header>

src/TestPanel.js

@@ -501,7 +501,7 @@ useEffect(()=>{
 
       </div>
       <div className="containerB">
-          <div className="box">
+          <div className="box equipWindow">
             <div className="boxTitleBar">
               <h1>Equipped Weapon</h1></div>
             <h2 className="viewedEquipName rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2>
@@ -512,18 +512,32 @@ useEffect(()=>{
 <div className="itemDetailsGrid">
 <div className={"itemDetailsIcon"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><img alt="" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div>
 <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 className="itemDetailsAugment">
-AUGMENT 
 
+<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">
+<span className="aug">Augment</span>
+<div className="itemDetailsAugmentWrapper">
+
+<div><span>Precision III</span></div>
+<div></div>
+<div></div>
+<div></div>
+
+</div>
 </div>
 </div>
 
@@ -773,7 +787,7 @@ AUGMENT
     setArmorSelectWindowOpen(false)}}>
           <div className="itemImgWrapper"><img alt="" src={DisplayIcon(item?.icon)} /></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>
       }}

src/style.css

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