From 7e34658dae847832c849f2169534960b8e96f9f5 Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Sat, 19 Dec 2020 11:56:01 +0100
Subject: [PATCH] improve long textbox sizes for different screen sizes.
---
src/gui/css/options.css | 4 ++++
src/gui/options/options.js | 28 ++++++++++----------------
src/npc/startingGirls/startingGirls.js | 6 +++---
3 files changed, 18 insertions(+), 20 deletions(-)
diff --git a/src/gui/css/options.css b/src/gui/css/options.css
index 7ce9fb2705c..15bd8453a97 100644
--- a/src/gui/css/options.css
+++ b/src/gui/css/options.css
@@ -84,6 +84,10 @@ div.options-group input.number {
width: 50px;
}
+div.options-group input.full-width {
+ width: 100%;
+}
+
.subHeading {
width: 85%;
text-align: center;
diff --git a/src/gui/options/options.js b/src/gui/options/options.js
index 5ff496ffbfa..6f306cf2c1c 100644
--- a/src/gui/options/options.js
+++ b/src/gui/options/options.js
@@ -90,18 +90,13 @@ App.UI.OptionsGroup = (function() {
}
/**
- * @param {string} [unit]
- * @param {string} [length]
+ * @param {Object} params
+ * @param {string} [params.unit]
+ * @param {boolean} [params.large=false]
* @returns {Option}
*/
- showTextBox(unit, length) {
- this.textbox = true;
- if (unit) {
- this.unit = unit;
- }
- if (length) {
- this.textBoxLength = length;
- }
+ showTextBox({unit, large = false}) {
+ this.textbox = {unit: unit, large: large};
return this;
}
@@ -318,16 +313,15 @@ App.UI.OptionsGroup = (function() {
if (isNumber) {
textbox.classList.add("number");
}
- buttonGroup.append(textbox);
- if (this.unit) {
- buttonGroup.append(" ", this.unit);
+ if (this.textbox.large) {
+ textbox.classList.add("full-width");
}
- textbox.style.minWidth = "15em";
- textbox.style.width = currentValue.length + "ch";
- if (this.textBoxLength) {
- textbox.style.width = this.textBoxLength;
+ buttonGroup.append(textbox);
+ if (this.textbox.unit) {
+ buttonGroup.append(" ", this.textbox.unit);
}
}
+
if (this.comment) {
const comment = document.createElement("span");
comment.classList.add("comment");
diff --git a/src/npc/startingGirls/startingGirls.js b/src/npc/startingGirls/startingGirls.js
index 8839927356e..32c6ef1f5d8 100644
--- a/src/npc/startingGirls/startingGirls.js
+++ b/src/npc/startingGirls/startingGirls.js
@@ -626,7 +626,7 @@ App.StartingGirls.physical = function(slave) {
options.addOption("Condition", "condition", slave.health)
.addValueList([["Unhealthy", -40], ["Healthy", 0], ["Very healthy", 40], ["Extremely healthy", 80]]);
- options.addOption(`Height: ${heightToEitherUnit(slave.height)}`, "height", slave).showTextBox("cm")
+ options.addOption(`Height: ${heightToEitherUnit(slave.height)}`, "height", slave).showTextBox({unit: "cm"})
.addRange(145, 150, "<", "Petite")
.addRange(155, 160, "<", "Short")
.addRange(165, 170, "<", "Average")
@@ -746,7 +746,7 @@ App.StartingGirls.physical = function(slave) {
option.addValue("Baby", "baby");
}
- options.addOption("Breasts", "boobs", slave).showTextBox("CCs")
+ options.addOption("Breasts", "boobs", slave).showTextBox({unit: "CCs"})
.addRange(200, 200, "<=", "Flat (AA-cup)")
.addRange(300, 300, "<=", "Small (A-cup)")
.addRange(400, 400, "<=", "Medium (B-cup)")
@@ -1189,7 +1189,7 @@ App.StartingGirls.profile = function(slave) {
App.UI.DOM.appendNewElement("h3", el, "Optional customizations");
options = new App.UI.OptionsGroup();
- options.addOption("Origin story", "origin", slave).showTextBox("", "100em").addComment("Use complete, capitalized and punctuated sentences.");
+ options.addOption("Origin story", "origin", slave).showTextBox({large: true}).addComment("Use complete, capitalized and punctuated sentences.");
options.addOption("Origin override", "originOverride", V)
.addValue("Enable", 1).on()
--
GitLab