← Mockups

QuoteKit · Angebot erstellen — Mobil

Leistungen & Positionen: 3 Vorschläge

Der Bereich „Leistungen & Positionen“ steckt in PositionenEditor.tsx und wird an drei Stellen benutzt: Angebot neu, Angebot aus Projektaufnahme (dort zusätzlich der KI-Button) und Rechnung. Unten links der heutige Stand am Handy, daneben drei Richtungen. Die Sheets und Menüs sind antippbar — am besten direkt am Telefon durchklicken.

Was am Handy heute konkret schiefgeht

  1. Alle Button-Beschriftungen werden ausgeblendet. .btnText { display:none } greift unter 768px — übrig bleiben bis zu vier nackte Icons (Plus, Buch, Funken, Ordner) in einer Reihe. Ohne Text ist nicht erkennbar, was „Buch“ gegenüber „Ordner“ tut. Die Zähler (12) / (3) verschwinden mit, der Aufklapp-Pfeil beim Paket bleibt aber stehen — das wirkt zufällig.
  2. Zwei verschiedene Aufklapp-Muster für dieselbe Sache. „Aus Vorlage“ öffnet ein Panel direkt im Fluss, „Paket einfügen“ ein absolut positioniertes Dropdown mit min-width: 260px, das auf schmalen Geräten am rechten Rand anstößt.
  3. Die Positionskarte verschenkt ~90px Breite. Links ein rein dekoratives Stift-Icon (24px + Abstand), rechts eine 44px-Spalte mit zwei gestapelten Icon-Buttons. Von ~340px Bildschirm bleiben für Titel und Beschreibung nur noch gut 240px.
  4. Der grüne Speichern-Button ist meistens deaktiviert (Position schon als Vorlage vorhanden → opacity: 0.3) und sieht dadurch defekt statt bewusst gesperrt aus.
  5. Löschen ist ein Ein-Tipp-Ziel direkt neben dem Text, gleich groß wie „Speichern“ — beim Scrollen mit dem Daumen leicht falsch getroffen. Der Bestätigungsdialog fängt das ab, nervt aber.
Heute
Icon-Reihe ohne Text

Vier Icons nebeneinander, Beschriftungen weggeblendet. Aktionen als Icon-Spalte rechts an der Karte.

IST-ZUSTAND
Leistungen & Positionen
19%7%
Altanstrich abwaschen
Inkl. Abkleben und Abdecken der Böden
42 × 4,50 € m² = 189,00 €
↔ ~90px Rand-Chrome, ~240px für Text
Wände grundieren KI
42 × 3,20 € m² = 134,40 €
Nettobetrag323,40 €
MwSt. 19%61,45 €
GESAMTBETRAG384,85 €
Vier unbeschriftete Icons — nicht erratbar
Zähler weg, Pfeil bleibt
Löschen direkt am Daumenweg
Option A
Ein Knopf, ein Auswahl-Sheet

Am Handy nur noch ein großer Button. Er öffnet ein Sheet von unten mit den vier Wegen — ausgeschrieben, mit Erklärung.

OPTION A — ANTIPPEN
Leistungen & Positionen
19%7%
Altanstrich abwaschen
Inkl. Abkleben und Abdecken der Böden
42 × 4,50 € m²
189,00 €
Wände grundieren KI
42 × 3,20 € m²
134,40 €
Nettobetrag323,40 €
MwSt. 19%61,45 €
GESAMTBETRAG384,85 €
Leistung hinzufügen
Altanstrich abwaschen
+Nur noch eine Entscheidung, alles ausgeschrieben
+Sheet liegt in der Daumenzone, Zeilen sind 58px hoch
+Löschen braucht zwei bewusste Tipps
Ein Tipp mehr für Vielnutzer der Vorlagen
Option B
Beschriftete Kacheln

Die Beschriftungen kommen zurück — Icon über Text in einem 2×2-Raster. Aktionen wandern als Textknöpfe unter die Position.

OPTION B
Leistungen & Positionen
19%7%
Altanstrich abwaschen
Inkl. Abkleben und Abdecken der Böden
42 × 4,50 € m²
189,00 €
Wände grundieren KI
42 × 3,20 € m²
134,40 €
Nettobetrag323,40 €
MwSt. 19%61,45 €
GESAMTBETRAG384,85 €
+Kleinster Eingriff — kein neues Muster zu lernen
+Alles sofort sichtbar, Zähler bleiben
+Volle Breite für den Positionstext
Kachelblock kostet ~140px, bevor die erste Position kommt
Option C
Feste Leiste am unteren Rand

Hinzufügen bleibt beim Scrollen immer in Daumenreichweite. Oben nur noch die Liste, unten „+ Position“ und ein „Mehr“-Knopf.

OPTION C — SCROLLEN
Leistungen & Positionen
19%7%
Altanstrich abwaschen
Inkl. Abkleben und Abdecken der Böden
42 × 4,50 € m²
189,00 €
Wände grundieren KI
42 × 3,20 € m²
134,40 €
Zwei Anstriche Dispersion
Weiß matt, waschbeständig
42 × 9,80 € m²
411,60 €
Heizkörper lackieren
3 × 65,00 € Stk.
195,00 €
Nettobetrag930,00 €
MwSt. 19%176,70 €
GESAMTBETRAG1.106,70 €
Weitere Quellen
Position
+Bei 15 Positionen kein Hochscrollen zum Hinzufügen
+Ruhigster Listenbereich von allen drei
Zweite feste Leiste über der Haupt-Navigation — muss sauber gestapelt werden (env(safe-area-inset-bottom))
Größter Umbau, betrifft auch das Rechnungsformular

Sheets und Aufklapp-Panels sind antippbar · Telefonrahmen ≈ 340px breit

Gilt überall gleich: PositionenEditor.tsx ist eine geteilte Komponente — die gewählte Variante wirkt automatisch in „Angebot neu“, „Angebot aus Projektaufnahme“ (dort mit KI-Knopf) und im Rechnungsformular. Desktop bleibt in allen drei Optionen die heutige Button-Reihe mit ausgeschriebenen Beschriftungen; geändert wird nur, was unter 768px passiert. Kombinierbar wäre außerdem: die aufgeräumte Positionskarte (Betrag rechts groß, Aktionen gebündelt) aus A/C zusammen mit den beschrifteten Kacheln aus B.