From 336762ffb013997d64a8a311274bc59867fe5895 Mon Sep 17 00:00:00 2001 From: hppeng Date: Sun, 24 Jul 2022 12:35:06 -0700 Subject: [PATCH 1/3] Compactify UI - remove optimize str/dex button - cram all the equip inputs together - highlight sharing buttons --- builder/index_full.html | 61 +++++++++++++++++------------------------ css/sq2bs.css | 27 ++++++++++++------ js/builder_graph.js | 14 ++++------ 3 files changed, 49 insertions(+), 53 deletions(-) diff --git a/builder/index_full.html b/builder/index_full.html index fcf508e..5145110 100644 --- a/builder/index_full.html +++ b/builder/index_full.html @@ -36,20 +36,20 @@
WB DiscordWB Discord -
+
Join the discord today to suggest new features, submit bug reports, and hangout/talk to devs!
-
+
-
+
-
+
-
+
- +
@@ -74,7 +74,7 @@
-
+
@@ -94,14 +94,13 @@
-
-
+
@@ -128,7 +127,7 @@
-
+
@@ -154,7 +153,7 @@
-
+
@@ -181,7 +180,7 @@
-
+
@@ -208,7 +207,7 @@
-
+
@@ -235,7 +234,7 @@
-
+
@@ -261,7 +260,7 @@
-
+
@@ -288,28 +287,22 @@
-
+
-
-
+
+
Level:
-
+
-
- +
+
-
-
-
- -
-
- -
-
+
+ +
@@ -390,12 +383,9 @@
-
- -
-
+
@@ -408,8 +398,7 @@
-
- +
diff --git a/css/sq2bs.css b/css/sq2bs.css index 59e4e99..c5ac672 100644 --- a/css/sq2bs.css +++ b/css/sq2bs.css @@ -7,7 +7,6 @@ } /* builder containers */ - .slider { -webkit-appearance: none; background: #AAAAAA; @@ -46,7 +45,6 @@ input[type=range]:focus { outline: none; /* Removes the border. */ } - /* equipment field specifics */ /* inputs and dropdowns */ .form-control { @@ -174,11 +172,11 @@ input.equipment-input { } .scaled-item-icon { - width: 8rem; + width: 6rem; } .scaled-item-icon img { - width: 6.5rem; + width: 5.5rem; } .scaled-bckgrd { @@ -190,10 +188,18 @@ input.equipment-input { width: 6.5rem; } +.overall-box { + max-width: 95%; +} + @media screen and (min-width: 1200px) and (max-width: 1400px) { :root { --scaled-fontsize: 1rem; } + .overall-box { + padding-left: var(--sidebar-width); + max-width: 100%; + } .scaled-font { font-size: 1rem; } @@ -219,11 +225,11 @@ input.equipment-input { } .scaled-item-icon { - width: 3.2rem; + width: 2.6rem; } .scaled-item-icon img { - width: 2.8rem; + width: 2.2rem; } .scaled-bckgrd { @@ -248,6 +254,11 @@ input.equipment-input { :root { --scaled-fontsize: 1rem; } + .overall-box { + padding-left: var(--sidebar-width); + max-width: 100%; + } + .scaled-font { font-size: 1rem; } @@ -273,11 +284,11 @@ input.equipment-input { } .scaled-item-icon { - width: 4rem; + width: 3.2rem; } .scaled-item-icon img { - width: 3.5rem; + width: 2.7rem; } .scaled-bckgrd { diff --git a/js/builder_graph.js b/js/builder_graph.js index b2ed8cb..cc0255c 100644 --- a/js/builder_graph.js +++ b/js/builder_graph.js @@ -702,7 +702,7 @@ class DisplayBuildWarningsNode extends ComputeNode { input_map.get('def'), input_map.get('agi') ]; - let skp_effects = ["% more damage dealt.","% chance to crit.","% spell cost reduction.","% less damage taken.","% chance to dodge."]; + let skp_effects = ["% damage","% crit","% cost red.","% resist","% dodge"]; let total_assigned = 0; for (let i in skp_order){ //big bren const assigned = skillpoints[i] - base_totals[i] + min_assigned[i] @@ -724,20 +724,16 @@ class DisplayBuildWarningsNode extends ComputeNode { let summarybox = document.getElementById("summary-box"); summarybox.textContent = ""; - let skpRow = document.createElement("p"); - let remainingSkp = document.createElement("p"); - remainingSkp.classList.add("scaled-font"); - let remainingSkpTitle = document.createElement("b"); - remainingSkpTitle.textContent = "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: "; + let remainingSkp = make_elem("p", ['scaled-font', 'my-0']); + let remainingSkpTitle = make_elem("b", [], { textContent: "Assigned " + total_assigned + " skillpoints. Remaining skillpoints: " }); let remainingSkpContent = document.createElement("b"); remainingSkpContent.textContent = "" + (levelToSkillPoints(build.level) - total_assigned); remainingSkpContent.classList.add(levelToSkillPoints(build.level) - total_assigned < 0 ? "negative" : "positive"); - remainingSkp.appendChild(remainingSkpTitle); - remainingSkp.appendChild(remainingSkpContent); + remainingSkp.append(remainingSkpTitle); + remainingSkp.append(remainingSkpContent); - summarybox.append(skpRow); summarybox.append(remainingSkp); if(total_assigned > levelToSkillPoints(build.level)){ let skpWarning = document.createElement("span"); From f441236531b7dff030c4b1e7b09856a05e35e844 Mon Sep 17 00:00:00 2001 From: hppeng Date: Mon, 25 Jul 2022 00:15:16 -0700 Subject: [PATCH 2/3] Bump vertical spacing a bit, make weapon powder input consistent with other equips --- builder/index_full.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/builder/index_full.html b/builder/index_full.html index 5145110..31a2019 100644 --- a/builder/index_full.html +++ b/builder/index_full.html @@ -45,7 +45,7 @@
-
+
@@ -260,7 +260,7 @@
-
+
From dbc69ab8742edb86e2ed27dd2cb96684b2a7ec9a Mon Sep 17 00:00:00 2001 From: hppeng Date: Mon, 25 Jul 2022 00:41:02 -0700 Subject: [PATCH 3/3] Compactify level/reset/copy box, touch up mobile UI --- builder/index_full.html | 10 ++++++---- css/sq2bs.css | 27 +++++++++++++++++++-------- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/builder/index_full.html b/builder/index_full.html index 31a2019..1280b6e 100644 --- a/builder/index_full.html +++ b/builder/index_full.html @@ -45,7 +45,7 @@
-
+
@@ -286,7 +286,7 @@
-
+
@@ -301,8 +301,10 @@
- - + +
diff --git a/css/sq2bs.css b/css/sq2bs.css index c5ac672..1e5751f 100644 --- a/css/sq2bs.css +++ b/css/sq2bs.css @@ -106,11 +106,9 @@ input.equipment-input { font-size: var(--scaled-fontsize); } -.my-container { - position: fixed; /* Stay in place */ - left: var(--sidebar-width); - overflow-y: scroll; - height: 100%; +.equipment-input { + --bs-gutter-y: 1rem; + --bs-gutter-x: 3rem } .text-right { @@ -176,7 +174,7 @@ input.equipment-input { } .scaled-item-icon img { - width: 5.5rem; + width: 6rem; } .scaled-bckgrd { @@ -185,7 +183,7 @@ input.equipment-input { } .scaled-bckgrd img { - width: 6.5rem; + width: 7rem; } .overall-box { @@ -200,6 +198,13 @@ input.equipment-input { padding-left: var(--sidebar-width); max-width: 100%; } + .equipment-input { + --bs-gutter-y: 0.5rem; + --bs-gutter-x: 1.5rem; + } + .level-input { + margin-top: 0 + } .scaled-font { font-size: 1rem; } @@ -258,7 +263,13 @@ input.equipment-input { padding-left: var(--sidebar-width); max-width: 100%; } - + .equipment-input { + --bs-gutter-y: 0.5rem; + --bs-gutter-x: 1.5rem + } + .level-input { + margin-top: 0 + } .scaled-font { font-size: 1rem; }