fix: style improvements according to review

csfloat · Nov 26, 2024 · e26fa15 · e26fa15
1 parent a43cbaf
commit e26fa15
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/src/lib/components/inventory/selected_item_info.ts b/src/lib/components/inventory/selected_item_info.ts
@@ -133,7 +133,7 @@ export class SelectedItemInfo extends FloatElement {
     }
 
     renderFloatBar(): TemplateResult<1> {
-        if (!this.itemInfo) {
+        if (!this.itemInfo || !(this.itemInfo.floatvalue > 0)) {
             return html``;
         }
 

diff --git a/src/lib/components/market/item_row_wrapper.ts b/src/lib/components/market/item_row_wrapper.ts
@@ -160,8 +160,9 @@ export class ItemRowWrapper extends FloatElement {
 
             return html`
                 <div class="float-row-wrapper">
-                    ${this.renderFloatBar()} Float: ${this.itemInfo.floatvalue.toFixed(14)}
-                    ${renderClickableRank(this.itemInfo)}<br />
+                    ${this.renderFloatBar()}
+                    <span> Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)} </span>
+                    <br />
                     Paint Seed:
                     ${formatSeed(this.itemInfo)}${fadePercentage !== undefined
                         ? html`<br />

diff --git a/src/lib/ui/floatbar.ts b/src/lib/ui/floatbar.ts
@@ -1,4 +1,4 @@
-import {LitElement, html, css, TemplateResult} from 'lit';
+import {LitElement, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
 @customElement('float-bar')
@@ -31,10 +31,10 @@ export class FloatBar extends LitElement {
             opacity: 0.8;
         }
 
-        .market-float-bar:not([style*='background-color: transparent']):first-of-type {
+        .market-float-bar:first-of-type {
             border-radius: 4px 0 0 4px;
         }
-        .market-float-bar:not([style*='background-color: transparent']):last-of-type {
+        .market-float-bar:last-of-type {
             border-radius: 0 4px 4px 0;
         }
     `;
@@ -47,22 +47,39 @@ export class FloatBar extends LitElement {
         {min: 45, max: 100, color: '#f92424'},
     ];
 
-    render(): TemplateResult {
+    get minFloatPercentage(): number {
+        return this.minFloat * 100;
+    }
+
+    get maxFloatPercentage(): number {
+        return this.maxFloat * 100;
+    }
+
+    render() {
         const left = (this.minFloat * 100).toFixed(0);
         const markerLeft = (((this.float - this.minFloat) * 100) / (this.maxFloat - this.minFloat)).toFixed(3);
         const dynamicWidth = (this.maxFloat - this.minFloat) * 100;
 
+        const getConditionWidth = (condMin: number, condMax: number) => {
+            return (
+                Math.max(
+                    0,
+                    (Math.min(condMax, this.maxFloatPercentage) - Math.max(condMin, this.minFloatPercentage)) * 100
+                ) / dynamicWidth
+            );
+        };
+
         return html`
             <div class="market-float-bar-container" style="left: ${left}%; width: ${dynamicWidth.toFixed(2)}%;">
                 <div style="height: 100%; border-radius: 4px; overflow: hidden; font-size: 0;">
                     ${this.floatConditions.map(
                         (cond) => html`
                             <div
                                 class="market-float-bar"
-                                style="width: ${((Math.min(cond.max, this.maxFloat * 100) -
-                                    Math.max(cond.min, this.minFloat * 100)) *
-                                    100) /
-                                dynamicWidth}%; background-color: ${cond.color};"
+                                style="width: ${getConditionWidth(
+                                    cond.min,
+                                    cond.max
+                                )}%; background-color: ${cond.color};"
                             ></div>
                         `
                     )}