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

item details window changes

Browse Source
This commit is contained in:
dudleycu 2021-08-31 01:12:26 +00:00
parent 4945bc99fc
commit b86c378fba
2 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/TestPanel.js
View File

@ -518,12 +518,15 @@ ELEMENT<br />
EQUIP CONDITIONS<br /> EQUIP CONDITIONS<br />
NOT TRADABLE NOT TRADABLE
</div> </div>
<div className="itemPotential">POTENTIAL</div><div className="itemPreset">PRESET</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>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
</div> </div>
</div> </div>

29
src/style.css
View File

@ -1494,7 +1494,7 @@ p.adminNav hr {
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; grid-template-rows: auto;
@ -1506,16 +1506,35 @@ p.adminNav hr {
grid-area: icon; grid-area: icon;
} }
.itemDetailsProperties { .itemDetailsProperties {
margin: 0 0 0 10px;
grid-area: properties; grid-area: properties;
} }
.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(150px,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;
}
.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));