diff --git a/public/stylesheets/new-ui-styles.css b/public/stylesheets/new-ui-styles.css index 82b866766..338bc78c9 100644 --- a/public/stylesheets/new-ui-styles.css +++ b/public/stylesheets/new-ui-styles.css @@ -403,6 +403,7 @@ body.t-s9 { .o-primary-btn--dimension-reset { display: flex; + width: 25rem; height: 6rem; justify-content: center; align-items: center; diff --git a/src/components/GenericDimensionRowText.vue b/src/components/GenericDimensionRowText.vue index f6964f652..4a684b594 100644 --- a/src/components/GenericDimensionRowText.vue +++ b/src/components/GenericDimensionRowText.vue @@ -23,6 +23,11 @@ export default { required: true }, }, + data() { + return { + width: 0, + }; + }, computed: { rateText() { return this.tier < 8 @@ -31,12 +36,17 @@ export default { }, }, methods: { + update() { + // Needs to be reactive or else rows that don't have changing values (eg. the highest dimension and any higher + // locked ones) won't change layout when the window size changes + this.width = window.innerWidth; + }, adjustableTextStyle() { return { display: "flex", "text-align": "left", width: "100%", - "flex-direction": window.innerWidth < 1450 ? "column" : "row", + "flex-direction": this.width < 1450 ? "column" : "row", "justify-content": "space-between", "align-items": "center", }; diff --git a/src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue b/src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue index 4b6639881..790d43835 100644 --- a/src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue +++ b/src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue @@ -40,7 +40,7 @@ export default { return this.buyUntil10 ? format(this.until10Cost) : format(this.singleCost); }, amountDisplay() { - return this.tier < 8 ? format(this.amount, 2, 0) : formatInt(this.amount); + return this.tier < 8 ? format(this.amount, 2) : formatInt(this.amount); }, continuumString() { return formatFloat(this.continuumValue, 2); @@ -58,8 +58,8 @@ export default { }, buttonPrefix() { if (this.isCapped) return "Shattered by Enslaved"; - if (this.isContinuumActive) return "Continuum:"; - return `Buy ${this.howManyCanBuy}`; + if (this.isContinuumActive) return "Continuum: "; + return `Buy ${this.howManyCanBuy}, `; }, buttonValue() { if (this.isCapped) return ""; @@ -149,7 +149,7 @@ export default { >
+ + diff --git a/src/components/tabs/infinity-dimensions/ModernInfinityDimensionRow.vue b/src/components/tabs/infinity-dimensions/ModernInfinityDimensionRow.vue index 7c09df559..3da51368f 100644 --- a/src/components/tabs/infinity-dimensions/ModernInfinityDimensionRow.vue +++ b/src/components/tabs/infinity-dimensions/ModernInfinityDimensionRow.vue @@ -58,7 +58,7 @@ export default { return `Reach ${formatPostBreak(InfinityDimension(this.tier).amRequirement)} AM`; }, hasLongText() { - return this.costDisplay.length > 20; + return this.costDisplay.length > 15; }, capTooltip() { if (this.enslavedRunning) return `Enslaved prevents the purchase of more than ${format(10)} Infinity Dimensions`; diff --git a/src/components/tabs/time-dimensions/ModernTimeDimensionRow.vue b/src/components/tabs/time-dimensions/ModernTimeDimensionRow.vue index 870baf9c3..6a9274b91 100644 --- a/src/components/tabs/time-dimensions/ModernTimeDimensionRow.vue +++ b/src/components/tabs/time-dimensions/ModernTimeDimensionRow.vue @@ -65,7 +65,7 @@ export default { return this.isCapped ? "Capped" : `${this.showCostTitle ? "Cost: " : ""}${format(this.cost, 2)} EP`; }, hasLongText() { - return this.buttonContents.length > 20; + return this.buttonContents.length > 15; }, showCostTitle() { return this.cost.exponent < 1e6;