From b86c378fba9cc804ce83ada0f5ce34c8e14bd8d1 Mon Sep 17 00:00:00 2001 From: dudleycu Date: Tue, 31 Aug 2021 01:12:26 +0000 Subject: [PATCH 1/5] item details window changes --- src/TestPanel.js | 13 ++++++++----- src/style.css | 27 +++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/TestPanel.js b/src/TestPanel.js index ca45ab4..f9bc997 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -518,12 +518,15 @@ ELEMENT
EQUIP CONDITIONS
NOT TRADABLE -
POTENTIAL
PRESET
+
Soulspring Unit Lv.3
Fixa Attack Lv.3
-AUGMENT - - - +Augment +
+
test
+
test
+
test
+
test
+
diff --git a/src/style.css b/src/style.css index 49021f3..9f2f683 100644 --- a/src/style.css +++ b/src/style.css @@ -1494,7 +1494,7 @@ p.adminNav hr { display: grid; grid-template-areas: "icon properties" - "potential preset" + "ability ability" "augment augment"; grid-template-columns: 128px minmax(0,1fr); grid-template-rows: auto; @@ -1506,16 +1506,35 @@ p.adminNav hr { grid-area: icon; } .itemDetailsProperties { + margin: 0 0 0 10px; grid-area: properties; } .itemDetailsAugment { + margin: 15px 0 0 0; grid-area: augment; } +.itemDetailsAugmentWrapper { + margin: 10px 0 0 0; + display: grid; + grid-template-columns: repeat(auto-fit,minmax(150px,200px)); + gap: 10px 30px; +} +.itemDetailsAugmentWrapper > div { + 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 { - grid-area: potential; + text-align: left; } -.itemPreset { - grid-area: preset; +.itemFixa { + text-align: left; } .itemDetailsIcon img { background: radial-gradient(rgb(196,196,196),rgb(128,128,128)); From e960656d4175684f1d8cc937decabf9acf1df56c Mon Sep 17 00:00:00 2001 From: dudleycu Date: Tue, 31 Aug 2021 03:18:06 +0000 Subject: [PATCH 2/5] Equip Window Page 1 is done --- src/style.css | 36 ++++++++++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/src/style.css b/src/style.css index 9f2f683..4242ed6 100644 --- a/src/style.css +++ b/src/style.css @@ -253,7 +253,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 +536,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 +577,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,6 +1487,9 @@ p.adminNav hr { position:relative; top:16px; } +.equipWindow { + height: 440px; +} .itemDetailsGrid { display: grid; grid-template-areas: @@ -1497,9 +1497,7 @@ p.adminNav hr { "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%); @@ -1509,6 +1507,27 @@ p.adminNav hr { 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; @@ -1523,6 +1542,7 @@ p.adminNav hr { background-color:rgba(0,0,0,0.33); padding: 2px 10px; border-radius: 0 10px 0 0; + height: 20px; } .itemAbility { grid-area: ability; From 50dec099a0163b41990ee9f2344a3da63516a8e6 Mon Sep 17 00:00:00 2001 From: dudleycu Date: Tue, 31 Aug 2021 03:18:19 +0000 Subject: [PATCH 3/5] Equip Window page 1 is done --- src/TestPanel.js | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/src/TestPanel.js b/src/TestPanel.js index f9bc997..d2b695e 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -501,7 +501,7 @@ useEffect(()=>{
-
+

Equipped Weapon

{GetSpecialWeaponName(selectedWeapon)}+40

@@ -512,20 +512,29 @@ useEffect(()=>{
-RARITY
-ATTACK
-ELEMENT
-EQUIP CONDITIONS
-NOT TRADABLE -
+
+ +
Rarity
+
-
+ +
Attack
+
282
+ +
Element
+
-
+ +
Equip Conditons
+
Lv.15 (Current Lv.20)
+ +
Soulspring Unit Lv.3
Fixa Attack Lv.3
Augment
-
test
-
test
-
test
-
test
+ +
+
+
@@ -776,7 +785,7 @@ NOT TRADABLE setArmorSelectWindowOpen(false)}}>
{item.name}
-
 
+
 
{item.def}
}} From c15559bc9fc3dd5031f9d2f4b74edbf111dfb09b Mon Sep 17 00:00:00 2001 From: dudleycu Date: Tue, 31 Aug 2021 06:18:40 +0000 Subject: [PATCH 4/5] Clearning up UI for itemDetails and header. --- src/TestHeader.js | 11 ++++++----- src/TestPanel.js | 2 ++ src/style.css | 30 +++++++++++++++--------------- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/TestHeader.js b/src/TestHeader.js index 3167a67..af4f301 100644 --- a/src/TestHeader.js +++ b/src/TestHeader.js @@ -4,16 +4,17 @@ function TestHeader() { return (
diff --git a/src/TestPanel.js b/src/TestPanel.js index d2b695e..8820990 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -532,6 +532,8 @@ useEffect(()=>{ Augment
+
Precision III
+
diff --git a/src/style.css b/src/style.css index 4242ed6..e595717 100644 --- a/src/style.css +++ b/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); @@ -1535,7 +1528,7 @@ p.adminNav hr { .itemDetailsAugmentWrapper { margin: 10px 0 0 0; display: grid; - grid-template-columns: repeat(auto-fit,minmax(150px,200px)); + grid-template-columns: repeat(auto-fit,minmax(100px,200px)); gap: 10px 30px; } .itemDetailsAugmentWrapper > div { @@ -1543,6 +1536,13 @@ p.adminNav hr { 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; From 87e0e83138cd84da3b30d01a2dde9ad4bde3d20d Mon Sep 17 00:00:00 2001 From: dudleycu Date: Tue, 31 Aug 2021 06:22:30 +0000 Subject: [PATCH 5/5] item details icon now centers on instances where the properties div is a larger height --- src/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index e595717..2718615 100644 --- a/src/style.css +++ b/src/style.css @@ -1493,8 +1493,8 @@ p.adminNav hr { margin: 10px 10px 0 10px; } .itemDetailsIcon { - background-color: hsl(0, 17%, 70%); grid-area: icon; + align-self: center; } .itemDetailsProperties { margin: 0 0 0 10px;