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

Einsatz-Feld: feste Breiten durch mitwachsende ersetzt (v=174)

Browse Source 
User: das Einsatz-Feld ist nicht breit genug.

Die Trade-Leiste hatte width:88px fest, die Order-Leiste 74px. Der Einsatz zeigt
Betraege wie '712.84 EUR' -- bei fett und 0,94rem passt das in 88px nicht (das
sind ~9,7 Zeichen Platz bei 10 benoetigten).

Jetzt in ch statt px: 1ch ist die Breite einer Ziffer und haengt damit an der
Schriftgroesse -- skaliert also mit der fluiden Wurzel mit, was ein px-Wert
nicht tut. Anzeige-Werte bekommen width:auto + min-width:7.5ch und duerfen bei
laengeren Betraegen darueber hinaus wachsen statt abzuschneiden; Eingabefelder
bleiben bei 8ch als feste, aber mitskalierende Basis. Order-Leiste 74px -> 7ch.

Das war dieselbe Klasse wie die px-Abstaende von heute frueh: eine feste
Pixelzahl in einem Layout, dessen Schrift skaliert.

Verifiziert: min-width:7.5ch im ausgelieferten CSS, HTML zieht v=174.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Axel Hocks
2026-08-19 00:44:44 +02:00
co-authored by Claude Opus 5
parent 496713b396
commit 5b01610634
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+2 -2
View File
@@ -12,7 +12,7 @@
⚠ 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=173"> <link rel="stylesheet" href="style.css?v=174">
</head> </head>
<body> <body>
<!-- Modul-Menü (ganz oben) --> <!-- Modul-Menü (ganz oben) -->
@@ -362,6 +362,6 @@
</div> </div>
<div id="toast" class="toast hidden"></div> <div id="toast" class="toast hidden"></div>
<script src="app.js?v=173"></script> <script src="app.js?v=174"></script>
</body> </body>
</html> </html>
web/style.css
+9 -3
View File
@@ -226,11 +226,17 @@ main{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
Felder (SL/TP/Gewinn-Close/Notfall-Close) sehen identisch aus (Label über Box). */ Felder (SL/TP/Gewinn-Close/Notfall-Close) sehen identisch aus (Label über Box). */
.tb-field{display:flex;flex-direction:column;gap:2px} .tb-field{display:flex;flex-direction:column;gap:2px}
.tb-field label{font-size:0.7222rem;color:var(--dim);letter-spacing:.5px} .tb-field label{font-size:0.7222rem;color:var(--dim);letter-spacing:.5px}
.tb-field input, .tb-field .tb-val{width:88px;background:var(--surface-2); /* ⚠ Feste 88px waren zu schmal (User 2026-08-19: „das Einsatz-Feld ist nicht
breit genug"). Der Einsatz zeigt Betraege wie „712.84 €" — bei fett und
0,94rem passt das nicht in 88px. `ch` = Breite einer Ziffer, haengt also
an der Schriftgroesse und waechst mit der fluiden Wurzel mit; `width:auto`
laesst laengere Werte darueber hinaus wachsen, statt sie abzuschneiden. */
.tb-field input, .tb-field .tb-val{width:auto;min-width:7.5ch;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--r-sm);color:var(--bright); border:1px solid var(--border);border-radius:var(--r-sm);color:var(--bright);
font-size:0.9444rem;font-weight:700;padding:0.3333rem 0.3889rem;text-align:center; font-size:0.9444rem;font-weight:700;padding:0.3333rem 0.3889rem;text-align:center;
transition:border-color .15s, box-shadow .15s} transition:border-color .15s, box-shadow .15s}
.tb-field .tb-val{display:block} /* nur Anzeige, kein Input */ .tb-field .tb-val{display:block;white-space:nowrap}
.tb-field input{width:8ch} /* Eingaben: feste, aber mitskalierende Basis */ /* nur Anzeige, kein Input */
.tb-field input:focus{outline:none;border-color:var(--blue); .tb-field input:focus{outline:none;border-color:var(--blue);
box-shadow:0 0 0 2px #58a6ff33} box-shadow:0 0 0 2px #58a6ff33}
.tb-field.stop input{border-color:#5c1a1a;color:#f85149} /* SL/Notfall rötlich */ .tb-field.stop input{border-color:#5c1a1a;color:#f85149} /* SL/Notfall rötlich */
@@ -566,7 +572,7 @@ main{padding-bottom:4.1111rem} /* Platz für die fixe Leiste */
.mg-field { display: inline-flex; flex-direction: column; gap:2px; margin-right:0.4444rem; } .mg-field { display: inline-flex; flex-direction: column; gap:2px; margin-right:0.4444rem; }
.mg-field label { font-size:0.6111rem; color: var(--dim); line-height: 1; } .mg-field label { font-size:0.6111rem; color: var(--dim); line-height: 1; }
.mg-field input { .mg-field input {
width: 74px; padding:0.2778rem 0.3889rem; width: 7ch; min-width: 7ch; padding:0.2778rem 0.3889rem;
background: var(--surface-2); color: var(--bright); background: var(--surface-2); color: var(--bright);
border: 1px solid var(--border); border-radius: var(--r-sm); border: 1px solid var(--border); border-radius: var(--r-sm);
font-family: var(--mono); font-size:0.7778rem; text-align: right; font-family: var(--mono); font-size:0.7778rem; text-align: right;