openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ux): add inputmode and autocomplete attributes for mobile UX

Browse Source 
- inputmode=decimal on budget amount input for correct decimal keyboard
- inputmode=numeric on rrule interval input for numeric keyboard
- autocomplete attributes on contacts form (name, tel, email, street-address)
This commit is contained in:
Ulas
2026-04-05 01:39:01 +02:00
parent 72515c5a69
commit 1dccba8d96
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/budget.js
+1 -1
View File
@@ -362,7 +362,7 @@ function openBudgetModal({ mode, entry = null }) {
<label class="form-label" for="bm-amount">${t('budget.amountLabel')}</label> <label class="form-label" for="bm-amount">${t('budget.amountLabel')}</label>
<input type="number" class="form-input" id="bm-amount" <input type="number" class="form-input" id="bm-amount"
placeholder="${t('budget.amountPlaceholder')}" step="0.01" min="0" placeholder="${t('budget.amountPlaceholder')}" step="0.01" min="0"
value="${absAmount}"> inputmode="decimal" value="${absAmount}">
</div> </div>
<div class="form-group"> <div class="form-group">
public/pages/contacts.js
+4 -4
View File
@@ -263,7 +263,7 @@ function openContactModal({ mode, contact = null }) {
const content = ` const content = `
<div class="form-group"> <div class="form-group">
<label class="form-label" for="cm-name">${t('contacts.nameLabel')}</label> <label class="form-label" for="cm-name">${t('contacts.nameLabel')}</label>
<input type="text" class="form-input" id="cm-name" placeholder="${t('contacts.namePlaceholder')}" value="${v('name')}"> <input type="text" class="form-input" id="cm-name" placeholder="${t('contacts.namePlaceholder')}" value="${v('name')}" autocomplete="name">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="cm-category">${t('contacts.categoryLabel')}</label> <label class="form-label" for="cm-category">${t('contacts.categoryLabel')}</label>
@@ -271,15 +271,15 @@ function openContactModal({ mode, contact = null }) {
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="cm-phone">${t('contacts.phoneLabel')}</label> <label class="form-label" for="cm-phone">${t('contacts.phoneLabel')}</label>
<input type="tel" class="form-input" id="cm-phone" placeholder="${t('contacts.phonePlaceholder')}" value="${v('phone')}"> <input type="tel" class="form-input" id="cm-phone" placeholder="${t('contacts.phonePlaceholder')}" value="${v('phone')}" autocomplete="tel">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="cm-email">${t('contacts.emailLabel')}</label> <label class="form-label" for="cm-email">${t('contacts.emailLabel')}</label>
<input type="email" class="form-input" id="cm-email" placeholder="${t('contacts.emailPlaceholder')}" value="${v('email')}"> <input type="email" class="form-input" id="cm-email" placeholder="${t('contacts.emailPlaceholder')}" value="${v('email')}" autocomplete="email">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="cm-address">${t('contacts.addressLabel')}</label> <label class="form-label" for="cm-address">${t('contacts.addressLabel')}</label>
<input type="text" class="form-input" id="cm-address" placeholder="${t('contacts.addressPlaceholder')}" value="${v('address')}"> <input type="text" class="form-input" id="cm-address" placeholder="${t('contacts.addressPlaceholder')}" value="${v('address')}" autocomplete="street-address">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="cm-notes">${t('contacts.notesLabel')}</label> <label class="form-label" for="cm-notes">${t('contacts.notesLabel')}</label>
public/rrule-ui.js
+1 -1
View File
@@ -100,7 +100,7 @@ export function renderRRuleFields(prefix, existingRule) {
<label class="label form-label" for="${prefix}-rrule-interval">Alle</label> <label class="label form-label" for="${prefix}-rrule-interval">Alle</label>
<div class="rrule-interval-wrap"> <div class="rrule-interval-wrap">
<input class="input form-input" type="number" id="${prefix}-rrule-interval" <input class="input form-input" type="number" id="${prefix}-rrule-interval"
min="1" max="99" value="${parsed.interval}" style="width:64px;text-align:center"> min="1" max="99" value="${parsed.interval}" inputmode="numeric" style="width:64px;text-align:center">
<span class="rrule-interval-unit" id="${prefix}-rrule-unit">${unitLabel(parsed.freq, parsed.interval)}</span> <span class="rrule-interval-unit" id="${prefix}-rrule-unit">${unitLabel(parsed.freq, parsed.interval)}</span>
</div> </div>
</div> </div>