Verbessere mobile Eintragserfassung mit Fokus-Ruecksprung.

Nach dem Speichern bleibt der Fokus im Feld Neuer Eintrag und die mobile Ansicht nutzt weniger vertikalen Platz, damit auf iPhone mehr Listeneintraege sichtbar sind.

Made-with: Cursor
This commit is contained in:
Stefan Zwischenbrugger 2026-04-01 15:15:26 +02:00
parent bec9b466fc
commit b9e8b495b7
2 changed files with 24 additions and 6 deletions

View File

@ -104,7 +104,9 @@ class ShoppingListController extends Controller
'quantity' => $request->filled('quantity') ? $request->string('quantity')->toString() : $doneItem->quantity,
]);
return back()->with('status', 'Eintrag wurde aus erledigt nach offen uebernommen.');
return back()
->with('status', 'Eintrag wurde aus erledigt nach offen uebernommen.')
->with('focus_new_item', true);
}
ShoppingItem::query()->create([
@ -116,7 +118,9 @@ class ShoppingListController extends Controller
'is_done' => false,
]);
return back()->with('status', 'Eintrag wurde hinzugefuegt.');
return back()
->with('status', 'Eintrag wurde hinzugefuegt.')
->with('focus_new_item', true);
}
public function update(UpdateShoppingItemRequest $request, ShoppingItem $shoppingItem): RedirectResponse

View File

@ -5,8 +5,8 @@
</h2>
</x-slot>
<div class="py-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
<div id="shopping-list-page" data-focus-new-item="{{ session('focus_new_item') ? '1' : '0' }}" class="py-3 sm:py-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-4 sm:space-y-6">
<datalist id="store-options">
@foreach($stores as $store)
<option value="{{ $store->name }}"></option>
@ -34,8 +34,8 @@
@endif
<div class="bg-white overflow-hidden shadow-sm sm:rounded-xl p-4 sm:p-6">
<h3 class="text-lg font-semibold mb-3">Neuer Eintrag</h3>
<p class="text-sm text-gray-600 mb-3">Nur Namen eingeben, mit <kbd class="px-1 bg-gray-100 rounded text-xs">Enter</kbd> speichern.</p>
<h3 class="text-lg font-semibold mb-2">Neuer Eintrag</h3>
<p class="hidden sm:block text-sm text-gray-600 mb-3">Nur Namen eingeben, mit <kbd class="px-1 bg-gray-100 rounded text-xs">Enter</kbd> speichern.</p>
<form method="POST" action="{{ route('shopping-items.store') }}" class="flex flex-col sm:flex-row gap-2">
@csrf
<input
@ -364,6 +364,20 @@
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const pageRoot = document.getElementById('shopping-list-page');
const shouldFocusNewItem = pageRoot?.dataset.focusNewItem === '1';
if (!shouldFocusNewItem) {
return;
}
const input = document.getElementById('new-item-name');
if (!input) {
return;
}
input.focus({ preventScroll: true });
input.select();
});
document.addEventListener('click', async (event) => {
const pasteBtn = event.target.closest('.js-paste-price');
if (!pasteBtn) {