Fix: Neuer-Auftrag-Formular oben statt mittig + Tastatur-Handling [deploy]
All checks were successful
Deploy baustelle-pwa / deploy (push) Successful in 14s

- fs-body des Modals hatte per globalem CSS justify-content:center; bei
  flex-direction:column zentrierte das den Inhalt vertikal -> Formular sass
  'weit unten' (gemessen: Content-Top 255px statt 71px bei 390x740).
  Inline justify-content:flex-start ergaenzt -> Formular oben unter dem Header.
- scrollIntoView({block:'center'}) beim Fokus der Textfelder, damit das aktive
  Feld ueber die Bildschirmtastatur geschoben wird (mobile).
This commit is contained in:
Eddy 2026-07-18 13:53:26 +02:00
parent ad8779ce75
commit efc5cc2d29

12
app.js
View file

@ -1562,7 +1562,7 @@ async function openNewOrderModal() {
<div class="fs-title"> Neuer Auftrag</div> <div class="fs-title"> Neuer Auftrag</div>
<button class="icon-btn" id="no-save" title="Anlegen & Fotos machen" disabled></button> <button class="icon-btn" id="no-save" title="Anlegen & Fotos machen" disabled></button>
</div> </div>
<div class="fs-body" style="flex-direction:column;gap:10px;padding:16px;align-items:stretch;"> <div class="fs-body" style="flex-direction:column;gap:10px;padding:16px;align-items:stretch;justify-content:flex-start;">
<div id="no-step-customer"> <div id="no-step-customer">
<label class="label">Kunde wählen</label> <label class="label">Kunde wählen</label>
<input type="search" id="no-customer-search" class="new-order-customer-search" placeholder="🔍 Name, Ort…" autocomplete="off"> <input type="search" id="no-customer-search" class="new-order-customer-search" placeholder="🔍 Name, Ort…" autocomplete="off">
@ -1613,6 +1613,16 @@ async function openNewOrderModal() {
const validateCb = modal.querySelector('#no-validate'); const validateCb = modal.querySelector('#no-validate');
const changeBtn = modal.querySelector('#no-change-customer'); const changeBtn = modal.querySelector('#no-change-customer');
// Mobile: beim Fokus das aktive Feld über die Bildschirmtastatur schieben
// (Tastatur öffnet verzögert -> kleiner Timeout, bis der Viewport geschrumpft ist)
[refIn, titleIn, deliveryIn].forEach((el) => {
el.addEventListener('focus', () => {
setTimeout(() => {
try { el.scrollIntoView({ block: 'center', behavior: 'smooth' }); } catch (e) {}
}, 300);
});
});
let selectedCustomer = null; let selectedCustomer = null;
closeBtn.onclick = () => closeModal(modal); closeBtn.onclick = () => closeModal(modal);