From f8f89d38f50200f656beef4d76526dbf5ede39c5 Mon Sep 17 00:00:00 2001 From: Dudley C Date: Fri, 10 Sep 2021 15:35:11 +0900 Subject: [PATCH] equipbox --- src/TestPanel.js | 74 ++++++++++++++++++-------- src/icons/mel.png | Bin 0 -> 312 bytes src/icons/rng.png | Bin 0 -> 157 bytes src/icons/tec.png | Bin 0 -> 157 bytes src/style.css | 130 ++++++++++++++++++++++++++++++++++++++-------- 5 files changed, 161 insertions(+), 43 deletions(-) create mode 100644 src/icons/mel.png create mode 100644 src/icons/rng.png create mode 100644 src/icons/tec.png diff --git a/src/TestPanel.js b/src/TestPanel.js index eb56bcb..4b68a41 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -515,7 +515,10 @@ useEffect(()=>{

Equipped Weapon

-

{GetSpecialWeaponName(selectedWeapon)}+40

+
+

{GetSpecialWeaponName(selectedWeapon)}

+
+40
+
Edit Details {weaponPage === 1 ? @@ -560,29 +563,56 @@ useEffect(()=>{ +:weaponPage === 2 ? +
+
Enhancement Lv.
+
Damage Adj.
+
Weapon Up
+
Ailment Resist.
+
Available Classes
+
Multi-weapon
+ +
40
+
75.0% ~ 100%
+
Weapon Up
+
Ailment Resist.
+
Available Classes
+
+
:weaponPage === 3 ? -
-
-

Ability Details

-
    -
  • Potency +20%/
    Critical Hit Rage +15% for 30 seconds after a successful sidestep
    Dynamo Unit Lv.3
    • -
  • Potency +4%
    Fixa Attack Lv.3
    • -
  • PP +5
    Ranged Weapon Potency +2.0%
    Pettas Soul II
    • -
  • HP -10, Potency +1.5%,
    Potency Floor Increase +1.5%
    Damage Resistance -1.5%
    Alts Secreta II
    • -
  • HP +10
    Ranged Weapon Potency +2.0%
    Gigas Precision II
    • -
  • Ranged Weapon Potency +2.0%
    Precision III
    • -
    • -
-
-
-

Stat Adjustment

-
    -
  • Enhancement Lv. +35
    • -
  • Multi-Weapon -
    • -
  • Element -
    • -
-
+ +
+

Ability Details

+

Stat Adjustment

+
+
    +
  • Dynamo Unit Lv.3
    • +
  • Fixa Attack Lv.3
    • +
  • test
    • +
  • test
    • +
  • test
    • +
  • test
    • +
  • test
    • +
  • test
    • +
  • test
    • +
  • test
    • +
+
+
+ + + + + + + + + + + +
HP+99
PP+9
+
: <>hi2 diff --git a/src/icons/mel.png b/src/icons/mel.png new file mode 100644 index 0000000000000000000000000000000000000000..ec0e19b1f425662b36d736fe9ea0a498b3b9ea28 GIT binary patch literal 312 zcmV-80muG{P)~=2B*6Bp5OW2^E>y3yc_36@reiQg(N%IFru;bES8Yw-FV|KfbUrR4J5+L6v$>1 zKnH^gNWTsepb({4DA5ei4oP-a3HT2rjBoO8yoLT0NGBxOX`$W6dYDu-fnXJfcnf8| z3P_6ilJp1W@QU3~HQgG>s5r@vqRQtPd2M4@lD@^|k0Dlc(!w!jCQ?_}i5mRYxF~+c z_1O6e(ol2z0eW~WrhkJIEEkgZx(?QGhgL|ki;!gZ*e?7(VfY0ZB~*|4q1g`r0000< KMNUMnLSTXupNg&k literal 0 HcmV?d00001 diff --git a/src/icons/rng.png b/src/icons/rng.png new file mode 100644 index 0000000000000000000000000000000000000000..a8e048f5708f65477fd1a1799ed9153578814bb6 GIT binary patch literal 157 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!P=HT}E0Ffs@*f%1=Z9?vin5jj z`2{mL)HfVhW~wa(6fpI4aSV~Ty!VVDAA^DbljD;+|LboanlVRY+9g9p52LXDheFOA q_Dh`t-i8V{SUytCdwp@~=J@AvjN7aK*)IVaz~JfX=d#Wzp$Pzt2Q(l6 literal 0 HcmV?d00001 diff --git a/src/icons/tec.png b/src/icons/tec.png new file mode 100644 index 0000000000000000000000000000000000000000..8581141c64787707ba3becfba841c99919305155 GIT binary patch literal 157 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJPk>K|E0F&GcL@Z2F4?dY$Y(AI z@(X6DZ`hxybR5XF^>lFzk+{6|>_*-L20Y9M)$9MyjkVxR`JSl!!okrYp00i_>zopr0EB%v2mk;8 literal 0 HcmV?d00001 diff --git a/src/style.css b/src/style.css index a2dfee6..9ba47b5 100644 --- a/src/style.css +++ b/src/style.css @@ -69,6 +69,7 @@ body { } table { border-spacing: 0; + width: 100%; } table td { vertical-align: top; @@ -205,6 +206,10 @@ header a { padding-bottom:10px; backdrop-filter: blur(10px); } +.box h3 { + color: #97e2fc; + +} .box h3, dt { font-size: 12pt; font-weight: normal; @@ -213,24 +218,14 @@ header a { border-bottom: 1px solid rgba(128,128,128,0.5); } .box tr { - background-repeat: no-repeat; - background-position: left bottom; - border-bottom: 1px solid rgba(128,128,128,0.5); -} -.box tr:last-child { - border-bottom: 0; + border-bottom: 1px solid rgba(128,128,128,0.13); } .box td { padding: 0 5px; - white-space: nowrap; } .box td:first-child { color: #97e2fc; } -.box td:last-child { - text-align: right; -} - .basicInfo { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1fr) minmax(0,1fr); @@ -305,16 +300,32 @@ header a { content: " \25C6"; margin-right: 10px; } -.viewedEquipName { +.equipNameWrapper { + display:grid; + grid-template-columns: minmax(0,auto) minmax(0,1fr); + margin: 10px 10px 0; + gap: 10px; +} +.equipName { + max-width: 250px; + padding-right:2px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.equipName:hover { + background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); + outline: 2px solid hsl(180, 78%, 50%); +} +.equipName h2 { color: white; font-weight: normal; font-size: 18px; - margin: 10px 10px 0 10px; text-align: left; } -.viewedEquipName img { - margin-right: 5px; - vertical-align: top; +.equipEnhancement:hover { + background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); + outline: 2px solid hsl(180, 78%, 50%); } .saveControls { margin-top: 10px; @@ -400,6 +411,67 @@ header a { margin: 10px 10px 0 0; text-align: left; } +.statsDetails { + display:grid; + grid-template-columns: minmax(0,auto) repeat(3,minmax(0,1fr)); + grid-template-areas: + "enhance1 enhance2 enhance2 enhance2" + "variance1 variance2 variance2 variance2" + "weaponup mel rng tec" + "ailment ailment1 ailment2 ailment3" + "class1 class2 class2 class2" + "mw1 mw2 mw2 mw2" +} +.statsDetails > div:nth-child(-n+6){ + color: #97e2fc; +} +.statsDetails > div { + border-bottom: 1px solid rgba(128,128,128,0.5); +} +.augmentDetails { + display: grid; + grid-template-columns: minmax(0,1fr) minmax(0,0.8fr); + grid-template-rows: auto minmax(0, 1fr); + gap: 10px; + flex: 1; + grid-template-areas: + "header1 header2" + "ability stats"; + place-content: stretch; + place-items: stretch; + margin: 8px 10px 0 8px; +} +.augmentDetails h3 { + margin: 0; +} +.augmentDetailsListHeader { + grid-area: header1; +} +.augmentDetailsStatsHeader { + grid-area: header2; +} +.augmentDetailsList { + grid-area: ability; + overflow-y: scroll; + max-height: 280px; +} +.augmentDetailsList li { + background-color: rgba(128,128,128,0.25); + color: white; + margin: 2px 5px 5px 2px; + padding: 10px; +} +.augmentDetailsList li:hover { + background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); + outline: 2px solid hsl(180, 78%, 50%); +} +.augmentDetailsStats { + grid-area: stats; + margin: 0 0 0 10px; +} +.augmentDetailsStats td:last-child { + color: #ffb74c; +} .equipAugs { flex: 1 1 auto; } @@ -611,7 +683,7 @@ header a { vertical-align: middle; } .fixa { - color: rgb(255,135,80); + color: rgb(255,135,80) !important; } .fixa:before { content: url("./icons/UINGSItemPresetAbility.png"); @@ -619,7 +691,22 @@ header a { vertical-align: middle; } .pot { - color: rgb(255,255,0); + color: rgb(255,255,0) !important; +} +.mel:before { + content: url("./icons/mel.png"); + margin-right: 5px; + vertical-align: middle; +} +.rng:before { + content: url("./icons/rng.png"); + margin-right: 5px; + vertical-align: middle; +} +.tec:before { + content: url("./icons/tec.png"); + margin-right: 5px; + vertical-align: middle; } .pot:before { content: url("./icons/NGSUIItemPotentialAbility.png"); @@ -630,7 +717,6 @@ header a { clear: both; } .itemlistcontainer { -/* max-height: 400px;*/ overflow-y: scroll; overflow-x: hidden; margin: 10px 5px 0 0; @@ -822,7 +908,6 @@ li.treeListSub:after { margin-right: 5px; } .skillTreeBox { -/* flex: 1 1 auto;*/ margin: 0; min-width: 181px; min-height: auto; @@ -1468,6 +1553,8 @@ p.adminNav hr { top:16px; } .equipWindow { + display: flex; + flex-direction: column; min-height: 440px; } .itemDetailsGridTop { @@ -1484,6 +1571,7 @@ p.adminNav hr { "augment augment"; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 10px; + flex: 1; } .itemDetailsIcon { grid-area: icon; @@ -1548,7 +1636,7 @@ p.adminNav hr { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px, 1fr)); gap: 10px 30px; - + flex: 1; } .itemDetailsAugmentWrapper > div { background-color:rgba(0,0,0,0.33);