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:
parent
bec9b466fc
commit
b9e8b495b7
@ -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
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user