diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css
index 623623b..d8b28d5 100644
--- a/lib/common/static/instance_theme.css
+++ b/lib/common/static/instance_theme.css
@@ -3213,35 +3213,15 @@ html[data-theme="light"] .options-estimate-row {
font-size: 0.78rem;
color: #b8c0dc;
}
-.options-pos-live-layout {
- display: flex;
- flex-direction: column;
- min-height: 0;
- flex: 1;
-}
-.opt-pos-expanded-host {
- flex-shrink: 0;
- margin-top: 8px;
- overflow: visible;
-}
-.opt-pos-expanded-host .opt-pos-card {
- margin-bottom: 0;
-}
-.options-pos-live-pane--bars-only {
- flex: 1;
- min-height: 72px;
- max-height: 140px;
- overflow-y: auto;
-}
-.options-pos-subcard .options-pos-live-layout {
- min-height: 0;
-}
.options-pos-live-pane {
flex: 1;
min-height: 100px;
max-height: 220px;
overflow-y: auto;
}
+.options-pos-live-pane.options-pos-live-pane--accordion {
+ max-height: 360px;
+}
.options-pos-stats-card {
flex-shrink: 0;
}
@@ -3308,8 +3288,18 @@ html[data-theme="light"] .options-estimate-row {
}
.opt-pos-accordion-item.is-expanded .opt-pos-bar {
border-color: #4a6fd8;
+ border-radius: 8px 8px 0 0;
+ border-bottom-color: transparent;
background: #171d2a;
}
+.opt-pos-accordion-body {
+ overflow: visible;
+}
+.opt-pos-card--inline {
+ margin-bottom: 0 !important;
+ border-top: none !important;
+ border-radius: 0 0 8px 8px !important;
+}
.opt-pos-bar-main {
display: flex;
align-items: center;
diff --git a/lib/common/static/options_panel.js b/lib/common/static/options_panel.js
index 524af2c..c1f4f12 100644
--- a/lib/common/static/options_panel.js
+++ b/lib/common/static/options_panel.js
@@ -470,7 +470,7 @@
);
}
- function renderPositionBar(p, expanded) {
+ function renderPositionAccordionItem(p, expanded) {
const upl = p.upl;
const uplCls = upl > 0 ? "pos-pnl-profit" : upl < 0 ? "pos-pnl-loss" : "";
const sideCls = (p.opt_type || "").toUpperCase() === "P" ? "pos-side-short" : "pos-side-long";
@@ -494,49 +494,28 @@
'' +
(p.upl_ratio_pct != null ? fmt(p.upl_ratio_pct, 2) + "%" : "—") + "" +
"" +
- ""
+ "" +
+ '
' +
+ '
' +
+ renderPositionCardInner(p) +
+ "
"
);
}
- function renderExpandedPositionCard(p) {
- return renderPositionCard(p);
- }
-
- function applyAccordionState(list) {
+ function applyAccordionState() {
const wrap = document.getElementById("opt-pos-cards");
- const expandedHost = document.getElementById("opt-pos-expanded-host");
- const livePane = document.getElementById("opt-pos-live");
if (!wrap) return;
- const expanded = (list || []).find(function (p) { return p.inst_id === state.expandedPosInst; }) || null;
wrap.querySelectorAll(".opt-pos-accordion-item").forEach(function (el) {
const open = el.getAttribute("data-inst") === state.expandedPosInst;
el.classList.toggle("is-expanded", open);
const btn = el.querySelector(".opt-pos-bar");
+ const body = el.querySelector(".opt-pos-accordion-body");
if (btn) btn.setAttribute("aria-expanded", open ? "true" : "false");
+ if (body) body.hidden = !open;
});
- if (expandedHost) {
- if (expanded) {
- expandedHost.hidden = false;
- expandedHost.setAttribute("aria-hidden", "false");
- expandedHost.innerHTML = renderExpandedPositionCard(expanded);
- expandedHost.querySelectorAll(".opt-close-btn").forEach(function (btn) {
- btn.addEventListener("click", function (e) {
- e.stopPropagation();
- closePosition(btn.getAttribute("data-inst"), btn);
- });
- });
- } else {
- expandedHost.hidden = true;
- expandedHost.setAttribute("aria-hidden", "true");
- expandedHost.innerHTML = "";
- }
- }
- if (livePane) {
- livePane.classList.toggle("options-pos-live-pane--bars-only", !!(list && list.length >= 2));
- }
}
- function bindPositionActions(container, list) {
+ function bindPositionActions(container) {
if (!container) return;
container.querySelectorAll(".opt-close-btn").forEach(function (btn) {
btn.addEventListener("click", function (e) {
@@ -550,7 +529,7 @@
if (!item) return;
const inst = item.getAttribute("data-inst");
state.expandedPosInst = state.expandedPosInst === inst ? null : inst;
- applyAccordionState(list);
+ applyAccordionState();
if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
OptionsExpiryCountdown.ensureTimer();
}
@@ -593,24 +572,19 @@
const d = await apiJson("/api/options/positions");
const wrap = document.getElementById("opt-pos-cards");
const empty = document.getElementById("opt-pos-empty");
- const expandedHost = document.getElementById("opt-pos-expanded-host");
const livePane = document.getElementById("opt-pos-live");
const list = (d.ok && d.positions) || [];
wrap.innerHTML = "";
- if (expandedHost) {
- expandedHost.hidden = true;
- expandedHost.setAttribute("aria-hidden", "true");
- expandedHost.innerHTML = "";
- }
if (!list.length) {
empty.style.display = "";
state.expandedPosInst = null;
- if (livePane) livePane.classList.remove("options-pos-live-pane--bars-only");
+ if (livePane) livePane.classList.remove("options-pos-live-pane--accordion");
return;
}
empty.style.display = "none";
const multi = list.length >= 2;
wrap.classList.toggle("opt-pos-cards--accordion", multi);
+ if (livePane) livePane.classList.toggle("options-pos-live-pane--accordion", multi);
if (multi) {
const ids = list.map(function (p) { return p.inst_id; });
if (state.expandedPosInst && ids.indexOf(state.expandedPosInst) < 0) {
@@ -618,21 +592,18 @@
}
list.forEach(function (p) {
const div = document.createElement("div");
- div.innerHTML = renderPositionBar(p, p.inst_id === state.expandedPosInst);
+ div.innerHTML = renderPositionAccordionItem(p, p.inst_id === state.expandedPosInst);
wrap.appendChild(div.firstChild);
});
- applyAccordionState(list);
- bindPositionActions(wrap, list);
} else {
state.expandedPosInst = null;
- if (livePane) livePane.classList.remove("options-pos-live-pane--bars-only");
list.forEach(function (p) {
const div = document.createElement("div");
div.innerHTML = renderPositionCard(p);
wrap.appendChild(div.firstChild);
});
- bindPositionActions(wrap, list);
}
+ bindPositionActions(wrap);
if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
OptionsExpiryCountdown.ensureTimer();
}
diff --git a/lib/options/templates/options_panel.html b/lib/options/templates/options_panel.html
index b56fb4f..f0bb0c3 100644
--- a/lib/options/templates/options_panel.html
+++ b/lib/options/templates/options_panel.html
@@ -81,12 +81,9 @@