ah-admin/AH-Oil-Trader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CB-Knopf ins Balance-Feld, rechts neben den Wert (v=211)

Browse Source 
User-Vorgabe. Der Knopf sass seit v=210 NEBEN dem Feld; jetzt sitzt er DRIN.

Umsetzung: der Wert und der Knopf liegen in einer gemeinsamen Flex-Zeile
(`.px-zeile`, space-between), damit der Knopf rechtsbuendig steht und die
Feldhoehe nicht springt.
⚠ `.px span` setzt 1,1111rem - eine Zeile, die das erbt, wuerde den
Knopf-Text mitskalieren. Deshalb bekommt `#balance` seine Groesse explizit und
`.cb-dot` im Balance-Feld eine eigene (1,7222rem statt 2,0556rem, damit die
Box nicht hoeher wird als ihre Nachbarn).

⚠ Farb-Logik unveraendert und weiterhin die Vorgabe des Nutzers: GRUEN =
inaktiv (aus), ROT = aktiv (scharf) - bewusst nicht die uebliche
"gruen = geschuetzt"-Lesart. Der Grund steht im Markup UND im JS, damit es
niemand spaeter "korrigiert".

Struktur am ausgelieferten HTML geprueft: Knopf liegt im Balance-Feld, Wert vor
Knopf, 0 doppelte IDs, span-Balance 58/58.
⚠ Die div-Differenz von 1 ist VORBESTEHEND (ein `<div` in einem Kommentar) -
gegen HEAD verglichen, nicht angenommen: ohne Kommentare 90/90.

Pipeline A-G gruen, 97 Tests, 14 render*-Funktionen, deployt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Axel Hocks
2026-08-21 10:50:35 +02:00
co-authored by Claude Opus 5
parent 0dd2e524b7
commit 75e783e882
3 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+1 -1
View File
@@ -2481,7 +2481,7 @@ async function closeSlot(slot, label, pnl) {
// und der Browser zeigte Altes. Statt das jedes Mal von Hand zu diagnostizieren, // und der Browser zeigte Altes. Statt das jedes Mal von Hand zu diagnostizieren,
// sagt die Seite es jetzt selbst. // sagt die Seite es jetzt selbst.
// ⚠ Bewusst SICHTBAR statt nur Konsole: die Konsole sieht am Handy niemand. // ⚠ Bewusst SICHTBAR statt nur Konsole: die Konsole sieht am Handy niemand.
const _JS_V = "210"; const _JS_V = "211";
{ {
const htmlV = document.body && document.body.dataset const htmlV = document.body && document.body.dataset
? document.body.dataset.htmlV : null; ? document.body.dataset.htmlV : null;
web/index.html
+9 -9
View File
@@ -12,9 +12,9 @@
⚠ LOKAL eingebunden, kein CDN: die PWA laeuft ueber WireGuard ⚠ LOKAL eingebunden, kein CDN: die PWA laeuft ueber WireGuard
und muss offline funktionieren. --> und muss offline funktionieren. -->
<link rel="stylesheet" href="pico.min.css?v=1"> <link rel="stylesheet" href="pico.min.css?v=1">
<link rel="stylesheet" href="style.css?v=210"> <link rel="stylesheet" href="style.css?v=211">
</head> </head>
<body data-html-v="210"> <body data-html-v="211">
<!-- Modul-Menü (ganz oben) --> <!-- Modul-Menü (ganz oben) -->
<nav id="tabs"> <nav id="tabs">
<button class="tab active" data-view="dash">Dashboard</button> <button class="tab active" data-view="dash">Dashboard</button>
@@ -42,13 +42,13 @@
</div> </div>
</div> </div>
<div class="price-row"> <div class="price-row">
<div class="px"><label title="Kontostand ohne die offene Position.">BALANCE</label><span id="balance">—</span></div> <!-- ⚠⚠ Der CB-Knopf sitzt IM Balance-Feld, rechts neben dem Wert
<!-- ⚠⚠ Farb-Logik wie vom Nutzer vorgegeben: GRUEN = Breaker AUS (User-Vorgabe 2026-08-21). Farb-Logik ebenfalls seine Vorgabe:
(inaktiv, nichts begrenzt), ROT = Breaker AN (aktiv, ein GRUEN = Breaker AUS (inaktiv, nichts begrenzt), ROT = Breaker AN
Tagesverlust-Limit ist scharf). Das ist bewusst NICHT die (aktiv, ein Tagesverlust-Limit ist scharf). Bewusst NICHT die
uebliche "gruen = geschuetzt"-Lesart — hier signalisiert Rot, uebliche "gruen = geschuetzt"-Lesart — Rot signalisiert hier,
dass eine Automatik eingreifen kann. --> dass eine Automatik eingreifen kann. -->
<button class="cb-dot" id="btn-cb" title="Circuit Breaker (Tagesverlust-Stopp) an/aus">CB</button> <div class="px px-cb"><label title="Kontostand ohne die offene Position.">BALANCE</label><span class="px-zeile"><span id="balance">—</span><button class="cb-dot" id="btn-cb" title="Circuit Breaker (Tagesverlust-Stopp) an/aus">CB</button></span></div>
<div class="px"><label title="Realisiertes Ergebnis von heute. Brutto — die Quellensteuer wird größtenteils erstattet und ist hier nicht abgezogen.">TAG P/L</label><span id="day-pl">—</span></div> <div class="px"><label title="Realisiertes Ergebnis von heute. Brutto — die Quellensteuer wird größtenteils erstattet und ist hier nicht abgezogen.">TAG P/L</label><span id="day-pl">—</span></div>
<div class="px"><label title="Kontostand einschließlich der offenen Position.">EQUITY</label><span id="equity">—</span></div> <div class="px"><label title="Kontostand einschließlich der offenen Position.">EQUITY</label><span id="equity">—</span></div>
<div class="px"><label id="hdr-price-lbl" title="Der Kurs, zu dem tatsächlich gehandelt wird. Steht er länger als 3 Minuten still, gilt der Markt als geschlossen und das Label zeigt ZU.">PEPPERSTONE KURS</label><span id="hdr-price">—</span></div> <div class="px"><label id="hdr-price-lbl" title="Der Kurs, zu dem tatsächlich gehandelt wird. Steht er länger als 3 Minuten still, gilt der Markt als geschlossen und das Label zeigt ZU.">PEPPERSTONE KURS</label><span id="hdr-price">—</span></div>
@@ -485,6 +485,6 @@
</div> </div>
<div id="toast" class="toast hidden"></div> <div id="toast" class="toast hidden"></div>
<script src="app.js?v=210"></script> <script src="app.js?v=211"></script>
</body> </body>
</html> </html>
web/style.css
+7
View File
@@ -770,5 +770,12 @@ main{padding-bottom:4.1111rem} /* Platz für die fixe Leiste */
background:var(--surface-2); color:var(--dim); transition:filter .15s; background:var(--surface-2); color:var(--dim); transition:filter .15s;
} }
.cb-dot:active{filter:brightness(1.3)} .cb-dot:active{filter:brightness(1.3)}
/* ⚠ Der Knopf sitzt IM Balance-Feld neben dem Wert (User 2026-08-21).
`.px span` setzt 1,1111rem — die Zeile darf das nicht erben, sonst wird
der Knopf-Text mitskaliert. Deshalb eigene Groesse auf `.cb-dot`. */
.px .px-zeile{display:flex; align-items:center; justify-content:space-between;
gap:0.4444rem; font-size:inherit}
.px .px-zeile > #balance{font-size:1.1111rem; font-weight:600}
.px-cb .cb-dot{width:1.7222rem; height:1.7222rem; font-size:0.6111rem}
.cb-dot.inaktiv{background:#0d2a16; border-color:#1a4731; color:#3fb950} .cb-dot.inaktiv{background:#0d2a16; border-color:#1a4731; color:#3fb950}
.cb-dot.aktiv{background:#2d0d0d; border-color:#5c1a1a; color:#f85149} .cb-dot.aktiv{background:#2d0d0d; border-color:#5c1a1a; color:#f85149}