kzbkowski/whowhat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1.2 Pole ilości: klawiatura numeryczna i mniejsza szerokość
All checks were successful
Build and Push Docker Images / build-and-push (push) Successful in 1m33s
Details

Browse Source 
Pole ilości na liście zakupów przyjmuje teraz tylko cyfry i otwiera
na telefonie klawiaturę numeryczną (inputMode=numeric) zamiast
zwykłej. Pole ilości jest też wyraźnie węższe niż pole nazwy
produktu (wcześniej rosło do tej samej szerokości przez konflikt
reguł CSS).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Kacper Żbikowski
2026-08-03 15:23:09 +02:00
parent 1f0dc92814
commit ce631feb5b
3 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/ShoppingListItemRow.jsx
View File

@@ -40,10 +40,12 @@ export default function ShoppingListItemRow({ item, listId }) {
/> />
<input <input
type="text" type="text"
inputMode="numeric"
pattern="[0-9]*"
className="shopping-item-qty-input" className="shopping-item-qty-input"
placeholder={t('shoppingListDetail.quantityPlaceholder')} placeholder={t('shoppingListDetail.quantityPlaceholder')}
value={quantity} value={quantity}
onChange={(e) => setQuantity(e.target.value)} onChange={(e) => setQuantity(e.target.value.replace(/\D/g, ''))}
onBlur={saveEdit} onBlur={saveEdit}
onKeyDown={(e) => e.key === 'Enter' && saveEdit()} onKeyDown={(e) => e.key === 'Enter' && saveEdit()}
/> />

4
frontend/src/pages/ShoppingListDetail.jsx
View File

@@ -75,10 +75,12 @@ export default function ShoppingListDetail() {
/> />
<input <input
type="text" type="text"
inputMode="numeric"
pattern="[0-9]*"
className="shopping-item-qty-input" className="shopping-item-qty-input"
placeholder={t('shoppingListDetail.quantityPlaceholder')} placeholder={t('shoppingListDetail.quantityPlaceholder')}
value={itemQuantity} value={itemQuantity}
onChange={(e) => setItemQuantity(e.target.value)} onChange={(e) => setItemQuantity(e.target.value.replace(/\D/g, ''))}
/> />
<button type="submit" className="btn-primary" disabled={createItem.isPending || !itemName.trim()}> <button type="submit" className="btn-primary" disabled={createItem.isPending || !itemName.trim()}>
<Icon name="add" /> <Icon name="add" />

3
frontend/src/styles.css
View File

@@ -778,6 +778,7 @@ input, select, button, textarea { font-family: inherit; font-size: 1rem; color:
color: var(--text); color: var(--text);
} }
.shopping-add-list-form button, .shopping-add-item-form button { flex-shrink: 0; } .shopping-add-list-form button, .shopping-add-item-form button { flex-shrink: 0; }
.shopping-add-item-form .shopping-item-qty-input { flex: 0 0 64px; }
.shopping-list-card { .shopping-list-card {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -835,4 +836,4 @@ input, select, button, textarea { font-family: inherit; font-size: 1rem; color:
color: var(--text); color: var(--text);
} }
.shopping-item-edit input:first-child { flex: 1; } .shopping-item-edit input:first-child { flex: 1; }
.shopping-item-qty-input { width: 72px; flex-shrink: 0; } .shopping-item-qty-input { width: 64px; flex-shrink: 0; }