From b86c378fba9cc804ce83ada0f5ce34c8e14bd8d1 Mon Sep 17 00:00:00 2001
From: dudleycu <dudleyc.twitch@gmail.com>
Date: Tue, 31 Aug 2021 01:12:26 +0000
Subject: [PATCH] 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<br />
 EQUIP CONDITIONS<br />
 NOT TRADABLE
 </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">
-AUGMENT 
-
-
-
+<span className="aug">Augment</span>
+<div className="itemDetailsAugmentWrapper">
+<div>test</div>
+<div>test</div>
+<div>test</div>
+<div>test</div>
+</div>
 </div>
 </div>
 
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));